Compiler

How it works

The compiler traverses your JSX AST at build time, detects props whose values are Token objects (__token: true), and replaces them with atomic CSS class names. Zero runtime overhead — the style is already in the CSS bundle before the browser loads the page.

Before & after

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

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

Generated CSS:

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

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

stareezy.config.ts — automatic shorthand pickup

The compiler reads your stareezy.config.ts at build time and merges your custom shorthands into its prop mappings. You do not need to pass the config path to the plugin — it finds the file automatically by searching process.cwd() (your project root).

What you do need to do: add the plugin to your build tool config. That's it.

// stareezy.config.ts — define shorthands here
export const ui = createUi({
  shorthands: {
    bg:  'backgroundColor',
    br:  'borderRadius',
    f:   'flex',
  } as const,
})

// babel.config.js — just add the plugin, no config path needed
const { stareezyBabelPlugin } = require('@stareezy-ui/compiler')
module.exports = {
  plugins: [stareezyBabelPlugin()],  // ← reads stareezy.config.ts automatically
}

// Now the compiler expands your shorthands at build time:
<Box bg={colors.celurenBlue[500]} br={8} />
// → <Box className="sz-celurenBlue-500 sz-8" />

Vite plugin

Add the plugin to vite.config.ts. It reads stareezy.config.ts from your project root automatically — no path needed.

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

export default {
  plugins: [
    stareezyVitePlugin(),  // reads stareezy.config.ts automatically
  ],
}

// Add this import once in your entry file to include the generated CSS:
import 'virtual:stareezy-ui/styles'

Babel plugin

Add the plugin to babel.config.js. Same deal — reads stareezy.config.ts automatically.

// babel.config.js
const { stareezyBabelPlugin } = require('@stareezy-ui/compiler')

module.exports = {
  presets: ['babel-preset-expo'],  // or your preset
  plugins: [
    stareezyBabelPlugin(),  // reads stareezy.config.ts automatically
  ],
}

Metro transformer (React Native)

For React Native projects using Metro, point babelTransformerPath at the Metro transformer. It reads stareezy.config.ts automatically — same as the other plugins.

// metro.config.js
const { getDefaultConfig } = require('expo/metro-config')

const config = getDefaultConfig(__dirname)

config.transformer = {
  ...config.transformer,
  // reads stareezy.config.ts automatically
  babelTransformerPath: require.resolve('@stareezy-ui/compiler/metro'),
}

module.exports = config

Built-in prop mappings

These are the default mappings. Custom shorthands from stareezy.config.ts are merged on top.

Non-token props pass through

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

// ThemeToken → resolved at render time, not by compiler ✓
<Box bg={t.backgrounds.primary} />

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