> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kansolabs.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Unplugin Style Dictionary

> Compile Style Dictionary design tokens ahead of your bundler, with watching and rebuilds under Vite, Rolldown, Rollup, Rspack and Webpack.

`@kanso-labs/unplugin-style-dictionary` compiles [Style Dictionary](https://styledictionary.com/) 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](https://unplugin.unjs.io/), 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](/style-dictionary/installation.md)**
>
> The package, its peers and the Node it needs.

> **[Add it to your bundler](/style-dictionary/bundlers.md)**
>
> Vite, Rolldown, Rollup, Rspack and Webpack.

> **[Configure it](/style-dictionary/configuration.md)**
>
> Files, objects, functions and custom formats.

> **[Every option](/style-dictionary/options.md)**
>
> The full options reference.

## What it does

> **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**
>
> 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**
>
> 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**
>
> 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**
>
> A configuration whose output already reflects everything it reads is not compiled again. See [Caching](/style-dictionary/caching.md).

> **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](https://github.com/kanso-labs/unplugin-style-dictionary)**
>
> Source, issues and the changelog.

> **[npm](https://www.npmjs.com/package/@kanso-labs/unplugin-style-dictionary)**
>
> `@kanso-labs/unplugin-style-dictionary`

> **[Roadmap](https://github.com/orgs/kanso-labs/projects/3)**
>
> What is planned next.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.