Zero-config scss/postcss/css-modules support

[BPScott]

Is your feature request related to a problem? Please describe.

Storybook v6 has made great strides around simplifying initial setup with its zero-config initiative trying to do the right thing by default with automatic configuration, especially around out-the-box config for typescript.

This tracks with common frameworks like CRA and next.js and redwood (ok, that's not quite as pervasive as the other two), however there's one aspect that these frameworks handle that storybook hasn't yet covered: zero configuration scss, postcss and css-modules integration.

Describe the solution you'd like

For Storybook to provide automatic out-the-box configuration for scss files (through sass-loader), postcss processing (through postcss-loader) and css-modules (through the already included css-loader).

Describe alternatives you've considered

preset-scss exists, and there are docs for defining custom webpack config, however these still put the burden of implementation onto storybook users. Storybook has already decided that telling folks "use the typescript preset" is still too much to teach, so does the same ring true for "use the scss preset"?

"If you use framework X, then use the storybook preset for framework X" is a reasonable argument for app that use a framework, however that doesn't address when you're writing a component library decoupled from an app framework.

Are you able to assist bring the feature to reality?
no

Additional context

Existing frameworks tend say "we'll handle the dependency for sass-loader, but your project will need to add a sass or node-sass dependency", so concerns about adding additional dependency bloat are somewhat mitigated as the loaders on their own don't add too much weight.

• CRA docs for scss config
• next.js docs for scss support
• Redwood docs for scss config

It might be worth running some kind of poll to see how many folks currently add support for scss/postcss/css-modules through configuring their webpack config / adding preset-scss to help understand how many people would be positively impacted by this change.

[BPScott]

Looks like postcss support, including loading from config files is already covered:

storybook/lib/core/src/server/preview/base-webpack.config.js

Line 63 in 7a907cf

loader: require.resolve('postcss-loader'),

css-modules support for .module.css files could be as simple as adding modules: true to css-loader's options per the docs at https://github.com/webpack-contrib/css-loader#modules. auto:true was added in css-loader 3.5.0 and it looks like SB core is currently using ^3.5.3

[shilman]

@BPScott @tmeasday here's another reason not to build this into Storybook: #12668

[shilman]

As of 7.0 we've gone the other way and removed postcss completely from the built-in configuration. However, if you're using a framework that supports it, you might get it out of the box. More on 7.0 frameworks architecture: https://storybook.js.org/blog/framework-api/