Welcome to Design Tokens Parser 👋

Design tokens are design decisions, represented as data, that ensure systematically unified and cohesive product experiences

This project born from storybook-design-token

Install

npm install --save design-tokens-parser

Usage

Parse the content of your stylesheets in search of specific comment blocks. Only those that have been indicated as @tokens will be parsed.

The block must indicate using the @tokens presenter property. The presenter refers to the example to use in your design tokens.

const { scssParser, lessParser } = require('design-tokens-parser');
// const { lessParser } = require('design-tokens-parser');

const fileContent = `
  /**
   * @tokens Colors
   */
  $myVar: red;
`;

const result = scssParser(fileContent);

// Output
/* [
    {
      declaration: 'myVar',
      value: 'red',
      token: 'Colors',
    },
  ];
*/

Run tests

npm run test

Supported languages

• scss

• less

TODO

• Support CSS
• Allow to use descriptio block
• Allow variable references as a value

Author

Jose Cabrera joselu11cabrera@gmail.com

• Twitter: @11joselu
• Github: @11joselu
• LinkedIn: @Jose Cabrera