Specify Parsers

What is Specify?

Specify helps you unify your brand identity by collecting, storing and distributing design tokens and assets—automatically.

Parsers

Why you need parsers

By default, without any parsers, Specify will return your design data as raw data:

Design tokens are returned in JSON
Assets are returned as files

Parsers help you transform design data coming from Specify to make it work with your environment.

What are parsers?

Parsers are functions allowing you to transform design tokens and assets you get from Specify's API.

A parser does the following job:

Receives design data as input
Transforms this design data
Returns the transformed data

The data returned by a parser can either be:

Design data that can be used by another parser coming next in your transformation pipeline
A file so it can be used by people, frameworks, or scripts

Not only parsers are what make Specify powerful and flexible, but above all, they help you be in total control of the design data you synchronize.

Parsers are ordered and takes specific input to generate specific output. This way, we can easily test the input coming from the previous parser to check if the whole parsers process will work.

All parsers available

Parser	Description	Usage example
camelcasify	Apply camelcase function on specific keys from a design token.	See usage example
convert-font	Convert font files in several formats.	See usage example
filter	Filter tokens and assets by their name using a regular expression.	See usage example
kebabcasify	Apply kebabcase function on specific keys from a design token.	See usage example
link-design-tokens	Have design tokens referencing other ones. It replaces absolute values by their potential corresponding design token.	See usage example
name-assets-files-by-pattern	Set a structured filename on your assets. It won't rename your asset but only add a new `filename` property on the asset object. The filename structure uses mustache as a template engine.	See usage example
omit	Omit keys from a design token not given in parameters.	See usage example
pascalcasify	Apply pascalcase function on specific keys from a design token.	See usage example
pick	Get only specific keys from a design token given in params.	See usage example
px-to-rem	Convert the value of a measurement design token from pixel to rem.	See usage example
replace-string	Replace any string matched by a regex by a new string.	See usage example
round-number	Round any measurement design token with specific precision.	See usage example
snakecasify	Apply snakecase function on specific keys from a design token.	See usage example
sort-by	Loop on several design tokens and sort them according to their respective key values.	See usage example
suffix-by	Concatenate two strings.	See usage example
svg-to-jsx	Wrap SVG files within a JSX component.	See usage example
svgo	Optimize vectors using svgo.	See usage example
to-css-custom-properties	Transform design tokens in CSS Custom Properties.	See usage example
to-css-font-import	Create CSS `@font-face` rules to import your font files.	See usage example
to-css-text-style	Create text styles as CSS classes.	See usage example
to-dsp	Create a Design System Package (DSP).	See usage example
to-jss	Transform design tokens in JSS.	See usage example
to-react-native	Transform design tokens to a JavaScript theme object compatible with React Native.	See usage example
to-scss-map	Generate `.scss` files containing Scss map and function / mixin to access the values of the tokens.	See usage example
to-scss-mixin-text-style	Create text styles formatted as SCSS mixins.	See usage example
to-style-dictionary	Generate Style Dictionary configuration files for all your design tokens coming from Specify.	See usage example
to-tailwind	Create a theme compatible with the TailwindCSS specification. The theme is also compatible with WindiCSS.	See usage example
to-theme-ui	Create a theme compatible with the theme-ui specification.	See usage example

How to create your own parser?

Let's say you want to create a parser named my-parser.

Fork the current repository
Git clone the forked repository
In the directory parsers, create a directory named my-parser
Create your valid parser
Make a PR

Creating a valid parser

To be valid, your parser needs:

A README.md file containing:
- A description
- A typed interface with its params (See the camelcasify one)
- A usage example (See the camelcasify one)
- The typing of its inputs and outputs (See the camelcasify one)
A my-parser.spec.ts file containing your parser's unit tests
A my-parser.parser.ts file

Usable libraries

For now, our parsers only use the following libraries:

If you need another library to develop your parser:

Install it using yarn or npm
Import and export it in the parsers/global-libs.ts file

Testing

To easily create and test your parsers, we advise you to use them on design tokens provided in the seeds.json file. It will allow you to use our fake tokens to test your parsers.

To use our design tokens seed:

Import it in your [parser].spec.ts using import * as seeds from '../../seeds.json';
Use the seeds.tokens variable according to your needs.
Launch yarn test to tests your parsers

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Specifyapp / parsers

Programming Languages

Labels

Projects that are alternatives of or similar to parsers