Skip to content


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.
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


import StyleDictionary from 'style-dictionary';


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"