@sxo/engine is a powerful, runtime-first CSS-in-JS engine that generates atomic utility classes on demand. It bridges the gap between static design tokens and dynamic application needs.

✨ Key Features

• ⚡ On-Demand Generation: Generate CSS only when needed, keeping your styles lean.
• 📱 Responsive by Default: Built-in support for customizable breakpoints.
• 🎭 State Variants: Easy handling of hover, focus, active, and other pseudo-classes.
• 🚀 Performance Optimized: Advanced caching prevents redundant style injections.
• 🧩 Design Token First: Native integration with @sxo/design tokens.

🚀 Quick Start

Installation

pnpm add @sxo/engine @sxo/design

Basic Usage

import { StyleEngine } from '@sxo/engine';
import { defaultTokens } from '@sxo/design';

const engine = new StyleEngine(defaultTokens);

// Generate atomic class styles
const className = engine.generate('text-primary-DEFAULT bg-background-secondary');
// Automatically injects corresponding CSS into the head

Responsive & States

Supports prefixes similar to Tailwind CSS for maximum familiarity.

// Responsive breakpoints
engine.generate('md:text-lg lg:grid-cols-2');

// Interactive state variants
engine.generate('hover:bg-primary-DEFAULT focus:ring-2');

📖 Documentation

For full documentation and examples, visit the Atomic CSS Documentation.

📄 License

MIT License.