@nxkit/style-dictionary

🔌 Plug Style Dictionary into your Nx workspace

Nx Plugin to generate Style Dictionary projects & maintain your design tokens within your Nx workspace

Quick Start

Create an Nx workspace and add the Style Dictionary plugin

npx create-nx-workspace@latest my-org

npm install -D @nxkit/style-dictionary

Generate a Style Dictionary library

npx nx generate @nxkit/style-dictionary:lib my-tokens

Build your tokens

Build your design tokens

npx nx build my-tokens

To know more about the @nxkit/style-dictionary plugin, run:

npx nx list @nxkit/style-dictionary

Generate extensions

If you'd like to add customizatios to your Style Dictionary projects like:

• Custom Actions
• Custom Filters
• Custom Formats
• Custom Parsers
• Custom Transform Groups
• Custom Tranforms

you can generate and register them using the extension generator:

npx nx generate @nxkit/style-dictionary:extension --project my-tokens

The terminal will prompt you to choose the desired extensions, or they can be passed in a comma-separated string with the --extensions argument. For example:

npx nx generate @nxkit/style-dictionary:extension --project my-tokens --extensions actions,filters,transforms

That's it!

To know more about the @nxkit/style-dictionary plugin, run:

npx nx list @nxkit/style-dictionary