search

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

node-glob not finding paths on windows #130

Open peterhodges opened 2 years ago

peterhodges commented 2 years ago

Attempting to use the plugin with Storybook 6.5.9 on Windows and it fails silently by not showing any tokens in the panel or via the doc blocks.

On debugging, it's clear that the glob.sync is returning an empty array in plugin.js getTokenFilePaths().

The path is joined onto the context which, on windows, has back slashes: C:\repos\design-tokens and ends up as C:\repos\design-tokens\**\*.css before being passed to glob.sync, which only supports POSIX paths.

If I replace backslashes slashes after joining the strings with path.join(), it works fine.

const paths = glob.sync(path.replace(/\\/g, '/'));

It works fine for me using the webpack5 demo from this repo (earlier version of storybook).

From a quick google, it looks like the node-glob package has always worked like this so I'm not sure why it's breaking now.

peterhodges commented 2 years ago

More info here: https://github.com/isaacs/node-glob/issues/467

Looks like backslashes were never explicitly supported but worked in v7 of node-glob (no longer in v8).

Sqrrl commented 1 year ago

Thanks for reporting and sorry for the delay. I've added your proposed fix with v2.8.1. Would be great if you could check it.