[Bug] Unable to configure @storybook/addon-styling-webpack with css modules and Tailwind

[FranRom]

Describe the bug

I have the same issue even after running npx @storybook/auto-config styling
Before I had:
{ name: '@storybook/addon-styling', options: { postCss: true } }
And it's actually working well if I currently use it after the migration to Storybook v8.4.7

Then I run manually npx @storybook/auto-config styling and this is the config I got (it seems detects Tailwind but not css module config as I can see in the README)

{
name: '@storybook/addon-styling-webpack',
  options: {
    rules: [
      {
        test: /\.css$/,
        sideEffects: true,
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1
            }
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              implementation: require.resolve('postcss')
            }
          }
        ]
      }
    ]
  }
}

The css modules are not loaded.
I try all the configs in the addon doc without luck...

I also added this config but still not working, the custom class is undefined:

    {
      name: '@storybook/addon-styling-webpack',
      options: {
        rules: [
          {
            test: /\.css$/,
            sideEffects: true,
            use: [
              require.resolve('style-loader'),
              {
                loader: 'css-loader',
                options: {
                  modules: {
                    auto: true,
                    localIdentName: '[name]__[local]--[hash:base64:5]'
                  }
                }
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  implementation: require.resolve('postcss')
                }
              }
            ]
          }
        ]
      }
    }

And If I don't add any extra rule css modules are loading well, but I still missed the tailwind css, so any help is very appreciated at this stage.
Thanks in advance

[FranRom]

[hanwenbo]

This is a very serious bug

[hanwenbo]

https://github.com/Negan1911/storybook-css-modules-preset/blob/master/index.js

this will solve your problem

[tomavic]

Is there is a way to use this with tailwind 4 ?

[FranRom]

I tried using the library @hanwenbo sent with no luck, I'm still having issues loading css module, any other workaround?

[FranRom]

I've also tried this, not working, the css module import is not recognized:

      name: '@storybook/addon-styling-webpack',
      options: {
        rules: [
          {
            test: /\.css$/,
            sideEffects: true,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1
                }
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  implementation: require.resolve('postcss')
                }
              },
              {
                loader: 'css-loader',
                options: {
                  modules: {
                    auto: true,
                    localIdentName: '[name]__[local]--[hash:base64:5]'
                  }
                }
              }
            ]
          }
        ]
      }
    }```

[FranRom]

After several tries, I migrated to Vite builder instead of Webpack and everything works without any config.

[tomavic]

can we migrate to use vite with storybook for angular? did anyone tried this cause I've tried and getting lots of errors 🗡