Compiler

How It Works

The compiler traverses your JSX AST at build time, detects token props, and replaces them with atomic CSS class names — zero runtime overhead.

Before & After

<Box
  bg={colors.celurenBlue[500]}
  p={spacing[4]}
/>

<Box
  className="sz-bg-celurenBlue-500
             sz-p-spacing-4"
/>

Generated CSS:

:root {
  --celurenBlue-500: #024CCE;
  --spacing-4: 4px;
}

.sz-bg-celurenBlue-500 {
  background-color: var(--celurenBlue-500);
}
.sz-p-spacing-4 {
  padding: var(--spacing-4);
}

Vite Plugin

// vite.config.ts
import { stareezyVitePlugin } from '@stareezy-ui/compiler'

export default {
  plugins: [
    stareezyVitePlugin({
      cssVariablePrefix: 'sz',
      outputDir: 'dist/styles',
    }),
  ],
}

Babel Plugin

// babel.config.js
module.exports = {
  plugins: [
    ['@stareezy-ui/compiler/babel', {
      cssVariablePrefix: 'sz',
    }],
  ],
}

Prop Mappings

Non-Token Props

Props with plain string or number values are left completely unchanged:

// Token prop → replaced with class name ✓
<Box bg={colors.celurenBlue[500]} />

// Plain value → passed through unchanged ✓
<Box bg="#024CCE" />

CSS Deduplication

The compiler generates each CSS rule at most once per build, regardless of how many components reference the same token. This keeps your CSS bundle minimal even at scale.