@design-sync/css-plugin

Transforms design tokens to css variables and classes

Usage

Install package:

# npm
npm install @design-sync/css-plugin

# yarn
yarn add @design-sync/css-plugin

# pnpm
pnpm install @design-sync/css-plugin

# bun
bun install @design-sync/css-plugin

in the config file add the plugin to the plugins array

import { cssPlugin } from '@design-sync/css-plugin'

export default {
  plugins: [cssPlugin({
    // extract token types as css classes default: ['typography']
    extractAsStyles: ['typography'],
    // relative path in the `out` root config, default ''
    outDir: 'css',
    // extract typography as css variables in the format of `font` css property, default: false
    typographyAsFontProperty: false,
    // css selector per mode to wrap the css variables, default: ':root'
    selectors: {
      dark: '@media (prefers-color-scheme: dark)',
      light: '@media (prefers-color-scheme: light)',
    },
  })],
}

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.