Stilvoll

CLI and Vite Plugin to auto-generate atomic utility CSS from your CSS design tokens (custom properties).

Features

• css driven no need to maintain your theme in a config file, you're css custom properties are the source of truth
• on-demand in build only the CSS classes you’re actually using a generated
• typesafe optionally build a classname map to get autocomplete on the utility classes in your editor
• extensible create your own atomic css classes by creating rules on how to create them from your custom properties

TL;DR

Turns this...

:root {
  --color-text-blue: #0000ff;
  --color-background-blue: #0000ff;
}

...into something like this

:root {
  --color-text-blue: #0000ff;
  --color-background-blue: #0000ff;
}

.textBlue {
  color: var(--color-text-blue);
}

.bgBlue {
  background-color: var(--color-background-blue);
}

...and this

import { sv } from 'stilvoll';

// sv is an autogenerated fully typed look up table of all
// your utility classes to be used in JSX with near-zero
// runtime overhead
<div className={sv.color_Blue}>Cool</div>;

Note 🚨🚨🚨

stilvoll is a work in progress and should not be used for production purposes. It’s currently in heavy dogfooding mode, so expect breaking changes on below 1.0.0 versions. Feel free to explore and contribute to its development.