Parsers
Specify helps you unify your brand identity by collecting, storing and distributing design tokens and assets — automatically.
Install / Use
/learn @Specifyapp/ParsersREADME
<a href="https://github.com/Specifyapp/parsers/graphs/contributors">
<img src="https://img.shields.io/github/contributors/Specifyapp/parsers" alt="Contributors" />
</a>
Specify Parsers
<img width="1440" alt="Repository Header" src="https://user-images.githubusercontent.com/16894359/161260523-376f533e-ec72-46c0-9f87-9cd31befe04f.png"> <p align="center"> <br /> <a href="https://docs.specifyapp.com" rel="dofollow"><strong>Explore the docs »</strong></a> <br /> <br /> <a href="https://github.com/Specifyapp/parsers/issues">Report Bug</a> · <a href="https://specify.canny.io">Request Feature</a> · <a href="https://discord.com/invite/vMkDk4CbG4">Join Our Discord</a> · <a href="https://twitter.com/specifyapp">Twitter</a> </p>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
There are high chances you need to transform those design data to fit your needs. Parsers help you do just that.
What are parsers?
Parsers are functions allowing you to transform design tokens and assets coming from Specify to fit your needs and company standards.
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. | Example |
| convert-font | Convert font files in several formats. | Example |
| filter | Filter tokens and assets by their name using a regular expression. | Example |
| inline-css-variables-in-svg | Replace harcoded design token values in a SVG by their corresponding CSS custom property. | Example |
| kebabcasify | Apply kebabcase function on specific keys from a design token. | Example |
| link-design-tokens | Have design tokens referencing other ones. It replaces absolute values by their potential corresponding design token. | 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. | Example |
| omit | Omit keys from a design token not given in parameters. | Example |
| pascalcasify | Apply pascalcase function on specific keys from a design token. | Example |
| pick | Get only specific keys from a design token given in params. | Example |
| px-to-rem | Convert the value of a measurement design token from pixel to rem. | Example |
| prefix-by | Prefix a string or a whole file by a string. | Example |
| replace-string | Replace any string matched by a regex by a new
