to-css-custom-properties
This parser helps you transform design tokens into CSS Custom Properties.
Interface
Options
selectorTemplate
false
string
tokenNameTemplate
false
string
tokenNotInCollectionNameTemplate
false
string
includeCoreTokensInScopes
false
boolean
false
When set to true
, you will have both core tokens and alias tokens in each CSS scopes thus making alias tokens always resolvable.
allowUnresolvable
false
boolean
false
When set to true
, you'll be able to generate alias CSS variables targeting tokens which are not generating in the same scope or file (e.g., if you want a primitive.css
and semantic.css
files).
When set to true
, tokens will be named with the tokenNotInCollectionNameTemplate
option.
withSDTFView
false
string
Basic usage
A design token can have modes, be nested in groups and be part of a collection. The following use case will generate a single CSS file containing core tokens and semantic tokens.
Head towards our templates section to see how you can use this parser with others to suit a common use case when working with CSS.
Last updated