preprocessors-tokens-parser v0.0.6

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 } = require('preprocessors-tokens-parser');

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

const result = scssParser(fileContent);

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

Run tests

npm run test

TODO

• Support LESS
• 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

Show your support

Give a ⭐️ if this project helped you!