/design-tokens-parser

Allows you to generate design token from your stylesheet

Primary LanguageTypeScriptMIT LicenseMIT

Welcome to Design Tokens Parser 👋

Version License: MIT Twitter: 11joselu

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