[Feature Request]: Remove css-loader from @storybook/builder-webpack5

[spdaley]

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

The css-loader folks have archived their repo and deprecated it. See https://github.com/webpack/css-loader.
Their recommendation is to css-loader is deprecated — webpack parses CSS itself and no longer needs it.

According to

storybook/code/builders/builder-webpack5/src/preview/base-webpack.config.ts

Line 23 in 1e132c2

// TODO: Decide if we want to keep style-loader & css-loader in core

there has been a TODO on whether or not to keep css-loader in the core for awhile now.

Some of the dependent css-modules now have CVEs and given everything is deprecated, I'm unsure if they will ever be fixed.

Describe the solution you'd like

It would be nice if css-loader could be removed as a direct dependency.

Describe alternatives you've considered

No response

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

no

Additional context

I started this off as another discussion thread so see #36626 (reply in thread) for more info.

[dgesteves]

A few pointers for whoever picks this up.

The rule is in code/builders/builder-webpack5/src/preview/base-webpack.config.ts: style-loader plus css-loader with modules: { auto: true, namedExport: false, exportLocalsConvention: 'as-is' }, skipped when @storybook/addon-postcss is in the presets.

webpack now covers both loaders:

• exportType: 'style' (webpack 5.106) injects a <style> element, as style-loader does.
• Since 5.109, experiments.css defaults to "auto": built-in CSS applies only to files that have no loader registered. That also addresses the TODO above the rule: a project or addon that registers its own .css loader takes over instead of stacking with webpack's.

So the builder could replace the loader chain with:

module: {
  parser: { 'css/auto': { exportType: 'style', namedExports: false } },
  generator: { 'css/auto': { exportsConvention: 'as-is' } },
},

css/auto treats *.module.css as CSS Modules and other .css files as global, the same split as modules.auto. namedExports: false plus exportsConvention: 'as-is' keep import styles from './x.module.css' returning the same object.

I checked this on webpack 5.111.1 in headless Chrome:

• Both stylesheets are injected, and the default import has the same keys.
• With a css-loader rule added, the loader still handles .css.
• Generated class names differ in format ([path]-[name]-style instead of css-loader's hash), so snapshots that include class names would change.

The builder allows webpack ^5.101.0, so this needs the floor raised to 5.109. With 11.0 in alpha, that looks like the natural place to switch and drop css-loader and style-loader from the builder's dependencies. @storybook/nextjs uses css-loader separately (frameworks/nextjs/src/css/webpack.ts), so that would be its own change.