Parsers

Parsers are functions allowing you to transform design tokens and assets coming from Specify to fit your needs and company standards.

Not familiar with parsers? Head over to the existing parsers documentation and learn more about why you need them and how to use them.

We're currently working on making our existing parsers compatible with the SDTF. We'll update this page accordingly.

General properties

You must set a name and your desired output for each parser:

1. The name is the name of the parser

2. The output property indicates which type of output you want the parser to produce

Output types

Parsers support none, some or more output types, please refer to dedicated parser pages for details.

File

Use case: the parser is expected to produce exactly one file.

type FileOutput = {
  type: 'file';
  filePath: string;
}

Directory

Use case: the parser is expected to produce 0 to N files, all placed in the given directoryPath.

type DirectoryOutput = {
  type: 'directory';
  directoryPath: string;
}

Example with the to-css-custom-properties parser:

"parsers": [
  {
    "name": "to-css-custom-properties",
    "output": {
      "type": "file",
      "filePath": "style.css"
    }
  }
  // ...
]

Available parsers

Parser	Description	Usage example
change-case	This parser helps you change the case of names or modes over a SDTF graph.	Example
convert-color	This parser helps you convert the color formats of color compatible tokens over a SDTF graph.	Example
filter	This parser helps you filter a SDTF graph.	Example
select-modes	This parser helps you select design tokens from specific mode(s).	Example
to-css-custom-properties	This parser helps you transform design tokens in CSS Custom Properties.	Example
to-sdtf	This parser helps you get your design tokens as a SDTF graph in JSON.	Example
to-style-dictionary	This parser helps you generate Style Dictionary raw token files for all your design tokens coming from Specify.	Example
to-tailwind	This parser helps you generate a Tailwind theme from all your design tokens coming from Specify.	Example
to-javascript	This parser helps you pull design tokens as JavaScript objects for all token types and their respective getter functions.	Example
to-json	This parser helps you pull design tokens in JSON with token values in JSON or CSS.	Example
to-typescript	This parser helps you pull design tokens as TypeScript objects for all token types and their respective getter functions.	Example