@kanso-labs/unplugin-style-dictionary compiles Style Dictionary design tokens before your bundler needs them, and compiles them again when a token file changes while a dev server or a watch build runs.
It is built on unplugin, so one implementation serves five bundlers. That matters when a project has more than one build surface, such as Storybook and Vitest on Vite beside a package build on Rolldown or tsdown, and both need the tokens compiled first.
Install it
The package, its peers and the Node it needs.
Add it to your bundler
Vite, Rolldown, Rollup, Rspack and Webpack.
Configure it
Files, objects, functions and custom formats.
Every option
The full options reference.
What it does
One implementation, five bundlers
One implementation, five bundlers
Vite, Rolldown, Rollup, Rspack and Webpack each get an entry point of their own. Every one of them compiles the tokens before the build that reads them, and rebuilds on a token change under its watch mode.
Watches what your tokens are made of
Watches what your tokens are made of
The plugin reads the
source and include patterns of each Style Dictionary configuration and watches the files they match, a token package linked into node_modules in a workspace included. A file created later under a watched pattern is picked up too.Shows a failed rebuild in the browser
Shows a failed rebuild in the browser
Under Vite’s dev server a rebuild that fails reaches the error overlay, and the next rebuild that succeeds dismisses it.
Never leaves a half-written file
Never leaves a half-written file
Every generated file is written to a temporary sibling and renamed into place, so code reading one mid-rebuild never sees it half-written. A file whose contents did not change is left alone, so a rebuild that changes nothing fires no file event.
Skips a build that would change nothing
Skips a build that would change nothing
A configuration whose output already reflects everything it reads is not compiled again. See Caching.
Builds several configurations
Builds several configurations
Pass an array for multiple brands or themes. Configurations compile one after another, so two of them can safely write to the same destination.
Where it lives
GitHub
Source, issues and the changelog.
npm
@kanso-labs/unplugin-style-dictionaryRoadmap
What is planned next.