oncss
oncss is a CSS-in-JS library that provides developers with a powerful css function to style their web applications. It enables modern styling techniques, including nested selectors, responsive design, and dynamic keyframes, all while offering seamless integration with JavaScript frameworks like React.
Installation
Install the oncss package via npm:
npm install oncss
Import the css function in your project:
import css from 'oncss';
Core Concept: The css Function
The css function is the heart of oncss, designed to dynamically generate and inject CSS into your application. It supports:
CSS Properties: Use standard CSS properties and values.
Nested Selectors: Apply styles to child elements or states using&.
Media Queries: Implement responsive designs with@mediarules.
Keyframes: Create animations with@keyframes.
Global Styles: Apply styles globally with@global.
Custom Breakpoints: Define reusable breakpoints for responsiveness.
Other At-Rules: Utilize additional at-rules like@container,@layer, and@supports.
Basic Example
const buttonStyles = css({
backgroundColor: 'blue',
color: 'white',
padding: '10px 20px',
borderRadius: '5px',
'&:hover': {
backgroundColor: 'darkblue',
},
'@media (min-width: 768px)': {
padding: '15px 30px',
},
});
console.log(buttonStyles);
Configuration Options
The css function can be customized through an options object:
Available Properties
| Property | Type | Description |
|---|---|---|
classPrefix | string | Adds a prefix to generated class names. |
breakpoints | object | Custom breakpoints for responsive designs. |
aliases | object | Custom shorthand properties for CSS rules. |
injectStyle | boolean | Controls whether styles are auto-injected. |
skipProps | function | Filters out unwanted properties. |
getValue | function | Transforms property values dynamically. |
getProps | function | Customizes specific property handling. |
Example with Options
const styles = css({
fontSize: 16,
padding: 10,
}, {
classPrefix: 'myprefix',
breakpoints: {
sm: 480,
md: 768,
lg: 1024,
},
});
Using Breakpoints
You can use the defined breakpoints in your styles to create responsive designs:
const responsiveStyles = css({
fontSize: 14,
padding: {
sm: 12,
lg: 24
},
}, {
breakpoints: {
sm: 480,
md: 768,
lg: 1024,
},
});
React Integration
oncss integrates seamlessly with React. Simply pass the generated class name to your component.
React Example
import React from 'react';
import css from 'oncss';
const buttonStyle = css({
backgroundColor: 'green',
color: 'white',
padding: '10px 20px',
borderRadius: '8px',
'&:hover': {
backgroundColor: 'darkgreen',
},
});
function Button() {
return <button className={buttonStyle.toString()}>Click Me</button>;
}
export default Button;
Advanced Features
Nested Selectors
Apply styles to child elements or pseudo-classes:
const cardStyles = css({
padding: '20px',
border: '1px solid #ccc',
'& h1': {
fontSize: '24px',
margin: 0,
},
'&:hover': {
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
},
});
Media Queries
Easily add responsive styles:
const responsiveStyles = css({
fontSize: '14px',
'@media (min-width: 768px)': {
fontSize: '18px',
},
});
Keyframes
Define and use animations:
const animationStyles = css({
'@keyframes fadeIn': {
from: { opacity: 0 },
to: { opacity: 1 },
},
animation: 'fadeIn 2s ease-in-out',
});
Global Styles
Apply global styles effortlessly:
const globalStyles = css({
'@global': {
body: {
margin: 0,
fontFamily: 'Arial, sans-serif',
},
a: {
color: 'blue',
textDecoration: 'none',
},
},
});
Supported At-Rules
oncss supports various CSS at-rules to enhance your styling capabilities. Here is a list of supported at-rules with descriptions:
| At-Rule | Description |
|---|---|
@media | Used for applying styles based on media queries for responsive design. |
@keyframes | Defines animations that can be applied to elements. |
@global | Applies styles globally across the entire application. |
@container | Used for container queries to apply styles based on container size. |
@layer | Defines style layers to control the order of style application. |
@supports | Applies styles based on the support of specific CSS features in the browser. |
Server-Side Styling
oncss supports server-side rendering (SSR) by utilizing the CSSFactory to store and manage generated CSS styles. This allows you to extract and inject styles into your server-rendered HTML.
Example with React
Here's an example of how to use oncss for server-side rendering with React:
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import css, { CSSFactory } from 'oncss';
const buttonStyle = css({
backgroundColor: 'blue',
color: 'white',
padding: '10px 20px',
borderRadius: '5px',
'&:hover': {
backgroundColor: 'darkblue',
},
});
function Button() {
return <button className={buttonStyle}>Click Me</button>;
}
const App = () => (
<div>
<Button />
</div>
);
// Render the component to a string
const html = ReactDOMServer.renderToString(<App />);
// Extract the generated CSS from CSSFactory
const styles = Array.from(CSSFactory.values())
.map(style => style.css)
.join('\n');
// Inject the styles into the HTML
const fullHtml = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SSR with oncss</title>
<style>${styles}</style>
</head>
<body>
<div id="root">${html}</div>
</body>
</html>
`;
console.log(fullHtml);
In this example, the CSSFactory is used to collect all generated CSS styles during the server-side rendering process. These styles are then injected into the HTML document, ensuring that the styles are applied correctly when the page is loaded in the browser.
Utility Functions
CSSFactory
CSSFactory is a global cache for storing generated CSS styles. It helps in reusing styles and avoiding redundant style generation.
formatCSSProp
formatCSSProp is a utility function that converts camelCase CSS property names to kebab-case.
import { formatCSSProp } from 'oncss';
const formattedProp = formatCSSProp('backgroundColor');
console.log(formattedProp); // 'background-color'
formatCSSValue
formatCSSValue is a utility function that formats CSS values, adding units like px where necessary.
import { formatCSSValue } from 'oncss';
const formattedValue = formatCSSValue('width', 100);
console.log(formattedValue); // '100px'
TypeScript Integration
oncss provides full TypeScript support, allowing you to define types for your CSS properties and options.
Defining CSS Properties
You can define the types for your CSS properties using the CSSProps type:
import { CSSProps } from 'oncss';
interface MyAliases {
customColor?: string;
}
const styles: CSSProps<MyAliases, 'sm' | 'md' | 'lg'> = {
backgroundColor: 'blue',
customColor: 'red',
'@media (min-width: 768px)': {
backgroundColor: 'green',
},
};
Using Options with Types
You can also define types for the options object:
import { CSSOptionProps } from 'oncss';
const options: CSSOptionProps<MyAliases, 'sm' | 'md' | 'lg'> = {
classPrefix: 'myprefix',
breakpoints: {
sm: 480,
md: 768,
lg: 1024,
},
aliases: {
customColor: (prop, value) => ({ color: value }),
},
};
const styles = css({
fontSize: 16,
padding: 10,
}, options);
Conclusion
oncss simplifies styling for modern web applications. Its robust feature set, from responsive design to keyframe animations, makes it an invaluable tool for developers.
Author
 | Naxrul Ahmed  Vollständiger Original-Bericht Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to. Wie bewertest du diesen Beitrag? 1 Klick Feedback Teilen mit Netzwerk & Team: Hat Ihnen dieser Tipp / Anleitung geholfen? Community-Analysen & Experten-Meinungen 0Verfasse deine eigene Analyse, teile Workarounds oder diskutiere diesen Vorfall im Blog. Noch keine Community-Analyse verfasst. Markiere einen Textabschnitt oder klicke oben auf „ Eigene Analyse verfassen“! Community Pulse: Relevanz-Einschätzung 1 Klick Experten-Votum 🔴 Akute Relevanz 0% 🟡 In Evaluierung 0% 🟢 Keine Auswirkung 0% Spannende Innovation 0% Verwandte Story-Cluster & Quellen (Vektor-KI) Tipp: Mit Pfeiltasten [ ← ] und [ → ] blättern 
Ähnliche Beiträge
🔍 Verwandte News
Auch interessante Nachrichten ONCSSThematisch verwandte Begriffe: ONCSS · 6 Treffer 🕵️ Sicherheitslücken GBHackers Security | #1 Glob Roundcube Fixes 12 Security Flaws Including Zero-Click XSS and SSRF Bypass 🍏 iOS / Mac OS AppleInsider News OWC's new Thunderbolt 5 dock connects two HDMI displays without adapters 🕵️ Reverse Engineering Exploit Development Reverse Engineering Windows Security Center 🔧 Programmierung Elastic Security Labs Cobalt Strike Beacon Extractor 🔧 Programmierung Google Alert – windows serve Vodafone gegen 1&1: Bundeskartellamt darf Urteil zu Marktmissbrauch fällen - Golem.de
Laden...
Videos werden geladen ...
Laden...
Beiträge werden geladen ...
Laden...
Videos werden geladen ...
🔖 Gespeicherte Artikel
📂
Keine gespeicherten Artikel vorhanden.
📂 News
⏱️ 3 Min
vor 10 Min
Artikeldaten werden geladen...
tsecurity.de AppOffline-Lesen, Eilmeldungen & 0ms Ladezeit
Installiere tsecurity.de direkt auf deinen Home-Bildschirm für das ultimative Vollbild-Magazinerlebnis ohne Browser-Leisten.
Nächster Beitrag
Community Radar & Live Chat
Sentinel Bot online • Live-Stream
Dein Cluster:
Security Explorer
Match:
lädt…
Verbindung zum Community-Stream wird aufgebaut...
Aktivitäten deiner Analystenlädt…
Neues Thema oder Eilmeldung einreichenReiche interessante Links, Zero-Days oder Debatten ein. Die Community entscheidet per Upvote über die Veröffentlichung. Heiß diskutierte Einreichungen |
SOCIAL SHARE CARD GENERATOR