Filters

Filters is a hook that provides a way to filter your tokens prior to formatting them to the final output.

Common use cases for filtering are:

• Not outputting your primitive/option tokens such as a color palette
• Splitting component tokens into separate files for each component

---

Filter structure

A filter is an object with two props:

• name: the name of the filter
• filter: a callback function that receives the token as argument and returns a boolean, true to include the token, false to exclude/filter it out. Can also be an async function. Also has a second argument with the Style Dictionary options, which also contains the tokens object, usesDTCG option, etc.

my-filter.js

const myFilter = {
  name: 'my-filter',
  // async is optional
  filter: async (token, options) => {
    return !token.filePath.endsWith('core.json');
  },
};

---

Using filters

First you will need to tell Style Dictionary about your filter. You can do this in two ways:

1. Using the .registerFilter method
2. Inline in the configuration hooks.filters property

.registerFilter

import StyleDictionary from 'style-dictionary';

StyleDictionary.registerFilter(myFilter);

Inline

export default {
  hooks: {
    filters: {
      'my-filter': myFilter,
    },
  },
  // ... the rest of the configuration
};

Applying it in config

{
  "source": ["**/*.tokens.json"],
  "platforms": {
    "css": {
      "transformGroup": "css",
      "files": [
        {
          "format": "css/variables",
          "destination": "_variables.css",
          "filter": "my-filter"
        }
      ]
    }
  }
}

---

Example