@omnium/refractor · React 19 · Vite

Refractor. Style faster.
Enjoy the DX. Keep runtime light.

Keep the component-level ergonomics of CSS-in-JS. Ship scoped, static CSS and a lightweight class selector to the browser.

Start building

Static extraction Property-aware tokens Typed variants

Build time CSS generation

Property-aware Token IntelliSense

React 19 Native props and refs

3 exports Core, themes, plugin

Compiler model

Write styles beside components.
Leave them out of the bundle.

Refractor separates authoring, compilation, and runtime selection into three clear responsibilities.

{ }

Author

Use typed style objects, semantic tokens, selectors, variants, and at-rules.

⌁

Extract

The Vite plugin validates tokens and generates scoped, static CSS.

◇

Select

The runtime applies defaults and selects precompiled classes from props.

Quick start

Theme-bound from the first component.

import { initiateRefractor }
  from
  '@omnium/refractor';
import { darkTheme, lightTheme }
  from './themes';

export const {
  refract,
  createVariants,
  createCompoundVariants,
  keyframes,
  globalCss,
} = initiateRefractor({
  themes: [lightTheme, darkTheme],
});

import { defineConfig }
  from 'vite';
import { refractorPlugin }
  from
  '@omnium/refractor/plugin';
import { darkTheme, lightTheme }
  from './src/themes';

export default defineConfig({
  plugins: [
    refractorPlugin({
      themes: [lightTheme, darkTheme],
      tokenValidation: 'error',
    }),
  ],
});

export const Panel =
  refract('section', {
  displayName: 'Panel',

  base: {
    padding: '$16',
    color: '$default',
    backgroundColor: '$content',
    borderRadius: '$8',
  },
});

Theme contract

Tokens that understand the property.

A token is not a loose string. Each CSS property maps to a category, so suggestions stay relevant and every reference is checked across registered themes.

backgroundColor→surface color→text borderColor→border padding→size

backgroundColor: '$

surface tokens 5 results

Selected token

Component contracts

Variants compile down. Types stay rich.

Variants

Finite visual states become typed React props backed by precompiled classes.

<Button size="large" />

Compound variants

Apply a rule only when every declared variant condition matches.

intent: 'primary' + variant: 'solid'

Custom props

Add component behavior without leaking private properties onto native DOM nodes.

transformProps: ({ busy, ...rest })

Native composition

Style elements or React components while retaining their props and refs.

refract(Link, { color: '$primary' })

Public surface

Small API. Clear boundaries.

core@omnium/refractor

initiateRefractor()Bind authoring tools to themes
refract()Create a statically styled component
createVariants()Generate repeated variant branches
createCompoundVariants()Generate compound rules
globalCss()Author document-level styles
keyframes()Create theme-aware animation

themes@omnium/refractor/themes

createTheme()Define tokens and property mappings
defaultTokensStart from practical categories
useTheme()Read and update reactive theme state
setTheme()Persist light, dark, or auto mode

build@omnium/refractor/plugin

refractorPlugin()Extract and validate during Vite builds
warnReport invalid tokens and continue
errorStop builds on invalid tokens
ignoreDisable token validation

Stop shipping a styling engine.

Refractor. Style faster. Enjoy the DX. Keep runtime light.

Write styles beside components.Leave them out of the bundle.