@aesthetic/style

A low-level, high-performance, atomic-based CSS-in-JS style engine.

Usage no npm install needed!

<script type="module">
  import aestheticStyle from 'https://cdn.skypack.dev/@aesthetic/style';
</script>

README

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