UX-and-I / storybook-design-token

Display design token documentation generated from your stylesheets and icon files. Preview design token changes in the browser. Add your design tokens to your Storybook Docs pages using the custom Doc Blocks.
https://dev.to/psqrrl/managing-design-tokens-using-storybook-5975
MIT License
648 stars 123 forks source link

Can't parse tokens if there is only one @tokens comment in a file #131

Open ilyamore88 opened 2 years ago

ilyamore88 commented 2 years ago

File for example:

.hds-root-colors-dark {
  /**
  * @tokens Colors Dark
  * @presenter Color
  */
  --color-bg-primary: #2f3341;
  --color-bg-secondary: #252732;
  --color-bg-tertiary: #1b1d26;
  --color-accent-brand: #4979e4;
  --color-bg-main-transparent: rgba(36, 39, 50, 0);
  --color-bg-placeholder: #505b74;
}

Output in design-tokens.source.json:

{"cssTokens":{"categories":[{"name":"Colors Dark","presenter":"Color","range":{"from":{"column":3,"line":2},"to":{"column":3,"line":2}},"source":"/Users/ilyamore88/Documents/codex-team/hawk.garage.react/src/commons/themes/root-colors-dark.css","tokens":[]},{"name":"Colors Light", ...

How did I fix it:

I've added /* @tokens End */ at the end of my file:

.hds-root-colors-dark {
  /**
  * @tokens Colors Dark
  * @presenter Color
  */
  --color-bg-primary: #2f3341;
  --color-bg-secondary: #252732;
  --color-bg-tertiary: #1b1d26;
  --color-accent-brand: #4979e4;
  --color-bg-main-transparent: rgba(36, 39, 50, 0);
  --color-bg-placeholder: #505b74;
  /* @tokens End */
}

Output in design-tokens.source.json:

{"cssTokens":{"categories":[{"name":"Colors Dark","presenter":"Color","range":{"from":{"column":3,"line":2},"to":{"column":34,"line":11}},"source":"/Users/ilyamore88/Documents/codex-team/hawk.garage.react/src/commons/themes/root-colors-dark.css","tokens":[{"isAlias":false,"name":"--color-bg-primary","presenter":"Color","rawValue":"#2f3341","sourceType":"CSS","value":"#2f3341"},{"isAlias":false,"name":"--color-bg-secondary","presenter":"Color","rawValue":"#252732","sourceType":"CSS","value":"#252732"},{"isAlias":false,"name":"--color-bg-tertiary","presenter":"Color","rawValue":"#1b1d26","sourceType":"CSS","value":"#1b1d26"},{"isAlias":false,"name":"--color-accent-brand","presenter":"Color","rawValue":"#4979e4","sourceType":"CSS","value":"#4979e4"},{"isAlias":false,"name":"--color-bg-main-transparent","presenter":"Color","rawValue":"rgba(36, 39, 50, 0)","sourceType":"CSS","value":"rgba(36, 39, 50, 0)"},{"isAlias":false,"name":"--color-bg-placeholder","presenter":"Color","rawValue":"#505b74","sourceType":"CSS","value":"#505b74"}]},{"name":"Colors Light", ...

The version is 2.7.1

Sqrrl commented 1 year ago

Thanks for reporting. In some cases detecting the end of the block fails. I'll try to fix your case in a future release.