@design-sync/vanilla-extract-plugin

Transforms design tokens to vanilla extract themes and styles

Usage

Install package:

# npm
npm install @design-sync/vanilla-extract-plugin

# yarn
yarn add @design-sync/vanilla-extract-plugin

# pnpm
pnpm install @design-sync/vanilla-extract-plugin

# bun
bun install @design-sync/vanilla-extract-plugin

in the config file add the plugin to the plugins array

import { vanillaExtractPlugin } from '@design-sync/vanilla-extract-plugin'

export default {
  plugins: [vanillaExtractPlugin({
    // relative path in the `out` root config, default ''
    outDir: 'vanilla-extract',
    // name of the exported variable from the theme contract, default: 'contract'
    contractName: 'contract',
    // global theme selector, default: ':root'
    globalThemeSelector: ':root',
    // create global themes, default: false
    createGlobalThemes: false,
    // create global theme contract, default: false
    createGlobalContract: false,
    // generate style name from token path
    styleName: ({ path }) => path.split('.').join('_')
  })],
}

Development

• Clone this repository
• Install latest LTS version of Node.js
• Enable Corepack using corepack enable
• Install dependencies using pnpm install
• Run interactive tests using pnpm dev

License

Made with 💛

Published under MIT License.