Webpack 5: raw-loader deprecated, require.context approach no longer working about storybook-design-token HOT 14 CLOSED

Hey. Just published v2.0.0-beta.0 with some "experimental" changes. It implements a different way of loading source files and simplifies the addon configuration. I hope it gets rid of the issues with webpack 5.

Would be great if you could check it out.

Migration:

• Bump addon version to v2.0.0-beta.0
• Get rid of the token file loading in your .storybook/preview.js

Before:

const tokenContext = require.context(
  '!!raw-loader!../src',
  true,
  /.\.(css|less|scss|svg)$/
);

const tokenFiles = tokenContext.keys().map(function (filename) {
  return { filename: filename, content: tokenContext(filename).default };
});

export const parameters = {
  designToken: {
    defaultTab: 'Colors',
    files: tokenFiles
  }
};

After:

export const parameters = {
  designToken: {
    defaultTab: 'Colors'
  }
};

from storybook-design-token.

Hi,
I seem to run into a similar problem as we are working on an Angular project with Storybook and Webpack5. I set it up as @Sqrrl suggested. I took the tokens.css and tokens.scss from the demo and put them into out project. The CSS file is read properly, but the SCSS content is just the comments without any values. Is this what you @spaceribs encountered in your project? You said the Angular loader is the probllem. Did you find any workaround to handle SCSS styles?

from storybook-design-token.

Hi @Sqrrl, I checked here and it works like a charm!! Thank you, you saved my day!!! ❤️ 😍 ✨

from storybook-design-token.

Great. I'm closing the issue.

@spaceribs Please re-open, if your issue wasn't resolved.

from storybook-design-token.

Hey, thanks for your research. I created a small demo project here: https://github.com/UX-and-I/storybook-design-token/tree/webpack5-demo/demo-webpack5

Using the raw loader, CSS and SCSS files are loaded correctly. SVG files are not. Not sure, why scss files are affected in your project, but not in the demo.

Tha said, I'll try to come up with a better loading strategy for a future release.

from storybook-design-token.

I published a new version using the new asset modules feature, if webpack5 is used.

@spaceribs Would be great, if you could check if it is working for you.

Installation:
npm add storybook-design-token@webpack5 or yarn add storybook-design-token@webpack5

preview.js adjustments:

const tokenContext = require.context('..?raw', true, /.\.(css|less|scss|svg)$/);

const tokenFiles = tokenContext.keys().map(function (filename) {
  return { filename: filename, content: tokenContext(filename) };
});

Changes: new query syntax ?raw; .default removed after tokenContext call

from storybook-design-token.

Hey @Sqrrl thanks for the reply! Using the changes above, I got svg icons working correctly, but my scss variables are still having trouble. To isolate the problem, I'm just loading your example file via:

const scssTokenContext = require.context('../../../styles?raw', true, /.test.scss$/);
const scssTokenFiles = scssTokenContext.keys().map(function (filename) {
  return { filename: filename, content: scssTokenContext(filename) };
});

addParameters({
  designToken: {
    files: [...scssTokenFiles],
  }
});

I console.log'd scssTokenFiles, and the JSONified output is below:

[{"filename":"./test.scss","content":"/**\n  * @tokens SCSS Colors\n  * @presenter Color\n  */\n/* Token Description Example */\n/**\n    * @tokens SCSS Fonts\n    * @presenter FontFamily\n    */\n/**\n  * @tokens SCSS Z-Index\n  */"},{"filename":"styles/test.scss","content":"/**\n  * @tokens SCSS Colors\n  * @presenter Color\n  */\n/* Token Description Example */\n/**\n    * @tokens SCSS Fonts\n    * @presenter FontFamily\n    */\n/**\n  * @tokens SCSS Z-Index\n  */"}]

Note that it does seem to still be trying to use the style-loader, as the original file did not have $brand defined, and didn't let me load the test file until I defined $brand correctly.

from storybook-design-token.

I tried to exclude all other loaders when using the raw strategy. It worked for css files, as they were passed through the style-loader before I added the following to the webpack config.

Could you check your webpack config for loaders matching scss files? Maybe my lines above don't match.

from storybook-design-token.

@Sqrrl I can validate that it's not Storybook's module loader that's the problem, it's angular's:

ModuleBuildError: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
   ╷
10 │ $sass-function: lighten($brand, 0.5);
   │                         ^^^^^^
   ╵

That said, it does seem to be properly outputting the source above, and fixing things like imports seems like a good idea anyway, so at least in my case it may not even matter.

from storybook-design-token.

@Sqrrl The CSS demo worked, so it's entirely due to angular preprocessing the SCSS files beforehand. I think you can consider this validated with that minor caveat.

from storybook-design-token.

That's what I encountered and I wasn't able to find a solution myself.

from storybook-design-token.

I'm facing the same situation working on a fresh React project (CRA + TS). I put the code from the demo and only the tokens from the CSS file are shown. It seems the SCSS variables are just ignored. I also set it up as @Sqrrl suggested, but it does not fix the problem. Actually, Storybook crashes due to

CssSyntaxError
./src/stories/button.css:1:1: Unknown word

BTW since I am using React, I don't think the Angular loader is the problem.

from storybook-design-token.

CssSyntaxError
./src/stories/button.css:1:1: Unknown word

I get the same error if I update from Storybook 6.4.9. I'm using the web-components framework so it's neither Angular nor React specific.

from storybook-design-token.

Same problem here, SCSS files aren't working with storybook 6.4.19 + webpack 5 😢

from storybook-design-token.