Links

Parsers

Parsers are functions allowing you to transform design tokens and assets coming from Specify to fit your needs and company standards.
Try out Specify with your team and put us to the test! Do you have an ideal workflow in mind, or are you curious if your output can be generated? Challenge us on GitHub or send us a message! We welcome all your feedback.

Parser types

Utilities parsers

Utilities parsers mutate the design token tree, through dedicated parsers like filter, convert-color, change-case
You configure their options property to instruct the changes to apply to your token tree before it get passed to the next step.

Generation parsers

Code generation parsers generate one or several outputs like CSS, JavaScript, TypeScript or assets like SVGs or bitmaps.
You configure their output property to produce the files that will end up in your codebase.
The options property is also available for most of the generation parsers.

Usage in Configuration

When configuring a Destination (CLI, SDK, GitHub…), you need to provide a Configuration which contain Rules.
A Rule is meant to take an arbitrary design token tree as input and execute the sequential chain of parsers listed in its parsers property.

Parser properties

name: the name of the parser - picked among the list below.
output: an object describing the desired output type - can be optional.
options: an object of arbitrary keys and values defined by the parser - can be optional. Check each parser documentation to find details.

Output types

Generation parsers support several output types based on the nature of the output they produce.

File

Use case: the parser is expected to produce exactly one file.
type FileOutput = {
type: 'file';
filePath: string;
}
Example with the to-css-custom-properties parser:
"parsers": [
{
"name": "to-css-custom-properties",
"output": {
"type": "file",
"filePath": "style.css"
}
}
]
Directory
Use case: the parser is expected to produce 0 to N files, all placed in the given base directory.
type DirectoryOutput = {
type: 'directory';
directoryPath: string;
}
Example with the to-svg-file parser:
"parsers": [
{
"name": "to-svg-file",
"output": {
"type": "directory",
"directoryPath": "./public/assets"
}
}
]

Available parsers

Parser
Description
Usage example
This parser helps you change the case of names or modes over a SDTF graph.
Example
This parser helps you convert the color formats of color compatible tokens over a SDTF graph.
Example
This parser helps you convert units of dimension tokens.
Example
filter
This parser helps you filter a SDTF graph.
Example
This parser helps you select design tokens from specific mode(s).
Example
svgo
This parser help you optimize and transform your SVG strings with svgo.
Example
This parser helps you generate JSX or TSX components from your vector assets.
Example
This parser helps you generate TSX components from your vector assets.
Example
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
This parser helps you generate Style Dictionary raw token files for all your design tokens coming from Specify.
Example
This parser helps you generate a Tailwind theme from all your design tokens coming from Specify.
Example
This parser helps you pull design tokens as JavaScript objects for all token types and their respective getter functions.
Example
This parser helps you pull design tokens as TypeScript objects for all token types and their respective getter functions.
Example
This parser helps you pull design tokens as a theme compatible with React Native and their respective helper functions.
Example
to-json
This parser helps you pull design tokens in JSON with token values in JSON or CSS.
Example
This parser helps you generate SVG files from your vector assets.
Example
This parser helps you generate a Flutter theme from all your design tokens coming from Specify.
Example
to-swift
This parser helps you generate design tokens as Swift classes.
Example
to-kotlin
This parser helps you generate design tokens for Kotlin.
Example