stylelint-design-tokens-plugin

Stylelint plugin for checking Design Tokens use inside your CSS

Install

$ yarn add --dev stylelint-design-tokens-plugin

Usage

Add the plugin within the .stylelintrc and activate the rule:

{
    "plugins": ["stylelint-design-tokens-plugin"],
    "rules": {
        "designtokens/check": [true, "./path-to-your-design-tokens.json"]
    }
}

How it works

When launched Stylelint, the plugin:

• will try to load your JSON Tokens from the path you defined on the rule
• will check for env() defined variables (eg. env(--space-8))
• will try to map the variable to the Tokens keys
• alert with an error if the no keys are mapped

The Tokens JSON

Example of a Token JSON file:

{
    "space-8": "8px",
    "space-16": "16px",
    ...
}

NOTE: be sure that your Token JSON file is a flat JSON so the plugin can recover the keys for the mapping.

License

MIT © Alessio Occhipinti