1.1.1 • Published 4 years ago
design-tokens-parser v1.1.1
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