@aesthetic/style NPM

Aesthetic - CSS-in-JS Style Engine

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.