[Bug] Doesn't work with CSS modules

[TeoTN]

Describe the bug

I'm currently using both global CSSes and CSS modules, and can't replace my custom webpack config with this addon.

Another part of the issue is that current implementation of addon-postcss is adding another rule for CSS rather than replacing the default Storybook's one, if I'm correct?

Steps to reproduce the behavior

The following config won't load CSS modules.

    {
      name: '@storybook/addon-postcss',
      options: {
        styleLoaderOptions: {},
        cssLoaderOptions: {
          modules: true,
          sourceMap: true,
        },
        postcssLoaderOptions: {
          implementation: require('postcss'),
          postcssOptions,
        },
      },
    },

However, specifying two separate rules for webpack would work:

function applyCssConfig(config) {
  const cssRuleIdx = config.module.rules.findIndex(({ test }) => test.toString() === '/\\.css$/');
  const cssRule = {
    test: /\.css$/,
    include: path.resolve(__dirname, '../'),
    exclude: /\.module\.css$/,
    use: [
      { loader: 'style-loader' },
      { loader: 'css-loader', options: { importLoaders: 1, sourceMap: true } },
      { loader: 'postcss-loader', options: { postcssOptions }, },
    ],
  };
  const cssModulesRule = {
    test: /\.module.css$/,
    include: path.resolve(__dirname, '../'),
    use: [
      { loader: 'style-loader' },
      { loader: 'css-loader', options: { importLoaders: 1, modules: true, sourceMap: true } },
      { loader: 'postcss-loader', options: { postcssOptions } },
    ],
  };
  config.module.rules.splice(cssRuleIdx, 1, cssModulesRule, cssRule);
  return config;
}

Expected behaviour

Ideally I'd like to see both rules configured when I pass modules: true to css config...

Additional context

It might be related with #23 although I'm not sure if supporting modules should be treated as specifying another file extension...

[davidcalhoun]

For what it's worth, I had a similar problem until I found out my postcss.config.js was conflicting. I removed postcss-modules from the postcss.config.js and ended up with this working Storybook config:

// .storybook/main.js
module.exports = {
...
  addons: [
    '@storybook/addon-docs',
    '@storybook/addon-essentials',
    {
      name: '@storybook/addon-postcss',
      options: {
        styleLoaderOptions: {},
        cssLoaderOptions: {
          modules: true,
          sourceMap: true,
          importLoaders: 1,
        },
        postcssLoaderOptions: {
          implementation: require('postcss')
        },
      },
    }
  ],
...
}

[RodrigoTomeES]

Hi,

We have the same problem. We have seen that there is a pull request that fix this problem #30, but it was opened 2 July 2021 and has never merged.

[alesma]

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

[nico-martin]

I think you don't even need @storybook/addon-postcss.
I had the same problem but I'm now using a workaround using the postcss-loader in my main.js
https://github.com/nico-martin/nextjs-storybook-postcss/blob/main/.storybook/main.js#L16-L23