Skip to content

feat: Support CSS Modules#30

Open
TeoTN wants to merge 1 commit intostorybook-eol:masterfrom
TeoTN:master
Open

feat: Support CSS Modules#30
TeoTN wants to merge 1 commit intostorybook-eol:masterfrom
TeoTN:master

Conversation

@TeoTN
Copy link
Copy Markdown

@TeoTN TeoTN commented Jul 2, 2021

Issue

Resolves: #29

Description

Added additional rule that handles CSS modules when they have .module.css extension. The rule is mutually exclusive with .css rule.
Also using different lifecycle method - webpackFinal instead of webpack. Otherwise, a CSS rule is added implicitly by Storybook afterwards, causing it to parse CSS files twice, and in consequence it'd fail. This implementation replaces that rule.

@unpunnyfuns
Copy link
Copy Markdown

This works as intended for my purposes!

...wrapLoader(require.resolve('style-loader'), styleLoaderOptions),
...wrapLoader(require.resolve('css-loader'), {
...cssLoaderOptions,
modules: true,
Copy link
Copy Markdown

@unpunnyfuns unpunnyfuns Nov 16, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would be nice if there was a way to configure the localIdentName, like so

[
  {
    name: "@storybook/addon-postcss",
    options: {
      postcssLoaderOptions: {
        implementation: require("postcss"),
      },
      cssLoaderOptions: {
        modules: {
          localIdentName: "[path][name]__[local]",
        },
      },
    },
  },
]

@alesma
Copy link
Copy Markdown

alesma commented Jul 19, 2022

This works well in my case too, i have built your branch and used https://www.npmjs.com/package/patch-package to start using it, but would be good to have this merged

@ryanzec
Copy link
Copy Markdown

ryanzec commented Oct 31, 2022

Is there a reason this is not being merge, not being able to support css modules seems like a pretty big deal?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] Doesn't work with CSS modules

4 participants