design-tokens-parser
v1.1.1
Published
Design tokens are design decisions, represented as data, that ensure systematically unified and cohesive product experiences.
Downloads
43
Readme
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 [email protected]
- Twitter: @11joselu
- Github: @11joselu
- LinkedIn: @Jose Cabrera