@aesthetic/style
    TypeScript icon, indicating that this package has built-in type declarations

    0.9.8 • Public • Published

    Aesthetic - CSS-in-JS Style Engine

    Build Status npm version npm deps

    A low-level, high-performance, atomic-based CSS-in-JS solution. Can be used stand-alone but has been designed to power additional abstractions or APIs.

    import { createClientEngine } from '@aesthetic/style';
    
    // Instantiate a client side (DOM) engine
    const engine = createClientEngine();
    
    // Render a style decleration into individual atomic class names
    const className = engine.renderRule({
    	margin: 0,
    	textAlign: 'center',
    	color: 'var(--color)',
    	backgroundColor: 'transparent',
    	border: '2px solid #eee',
    
    	':hover': {
    		borderColor: '#fff',
    	},
    
    	'@media': {
    		'(max-width: 600px)': {
    			display: 'block',
    		},
    	},
    
    	'@variants': {
    		'size:small': {
    			fontSize: 14,
    			padding: '4px 10px',
    		},
    		'size:default': {
    			fontSize: 16,
    			padding: '6px 12px',
    		},
    		'size:large': {
    			fontSize: 18,
    			padding: '8px 14px',
    		},
    	},
    });
    
    className.result; // -> a b c d e f g
    className.variants; // -> [h i, j k, l m]

    Features

    • 5.8kb minified and gzipped (35.4kb original).
    • Atomic based CSS. One declaration per class name.
    • Variants and compound variants for complex styling.
    • Specificity ranking so the intended property is always rendered.
    • Font faces, keyframes, imports, and other globals are rendered before normal declarations.
    • Media and support queries are grouped and rendered after normal declarations.
    • Media queries are sorted mobile-first.
    • Injection buffering for increased performance and reduced paints.
    • Style declarations support pseudos, attributes, conditional at-rules, and nested declarations.
    • Deterministic or atomic incremental CSS class names.
    • Right-to-left (RTL) integration (with addon).
    • Vendor prefixing for browsers with >= 1% market share (with addon).
    • Unit suffixing for numerical values.
    • First-class CSS variables support.
    • Server-side rendering and client-side hydration.
    • Framework and library agnostic. Can be used stand-alone.

    Installation

    yarn add @aesthetic/style
    

    Documentation

    https://aestheticsuite.dev/docs/packages/style

    Install

    npm i @aesthetic/style

    DownloadsWeekly Downloads

    252

    Version

    0.9.8

    License

    MIT

    Unpacked Size

    195 kB

    Total Files

    55

    Last publish

    Collaborators

    • milesj