[Bug]: Generated CSS is erroneously cached

[Kludgy4]

Describe the bug

I want Cloudflare to cache CSS, JS, and images from the site.

This currently works for JS because of the cache busting contenthash
filename: '[name].[contenthash:8].iframe.bundle.js', in the default storybook webpack settings.

Other resources are similarly cached

{
  test: /\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
  type: 'asset/resource',
  generator: { filename: 'static/media/[name].[contenthash:8][ext]' }
},
{
  test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
  ...
  generator: { filename: 'static/media/[name].[contenthash:8][ext]' }
},

However, CSS does not have the contenthash added into the MiniCssExtractPlugin filename.

MiniCssExtractPlugin {
  ...
  options: {
    filename: '[name].css',
    ...
    chunkFilename: '[name].css'
  },

This means that when I update the CSS used by my storybook - it does not update and instead uses the outdated cached version of main.css.

Please update the default MiniCssExtractPlugin settings to use something like

filename: '[name].[contenthash].css',
...
chunkFilename: '[name].iframe.[contenthash].css'

Reproduction link

Can't reproduce easily due to Cloudflare caching dependency

Reproduction steps

1. Host a storybook behind Cloudflare
2. Enable caching on the CSS resources served by the storybook (I used nginx but do it however you like)
3. Access the Storybook so Cloudflare caches the main.css
4. Update the CSS in some obvious way in the Storybook and deploy that
5. Attempt to access the updated storybook and observe that the old cached CSS is instead used

System

Storybook Environment Info:

  System:
    OS: Linux 6.8 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD Ryzen 7 PRO 5850U with Radeon Graphics
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm
    pnpm: 9.12.2 - ~/.nvm/versions/node/v20.18.0/bin/pnpm <----- active
  Browsers:
    Chrome: 131.0.6778.204
  npmPackages:
    @storybook/addon-essentials: ^8.4.7 => 8.4.7 
    @storybook/addon-interactions: ^8.4.7 => 8.4.7 
    @storybook/addon-onboarding: ^8.4.7 => 8.4.7 
    @storybook/angular: ^8.4.7 => 8.4.7 
    @storybook/blocks: ^8.4.7 => 8.4.7 
    @storybook/test: ^8.4.7 => 8.4.7 
    storybook: ^8.4.7 => 8.4.7

Additional context

I am currently fixing this by manually modifying the webpack config

const miniCssPlugin = config?.plugins?.find(
  (plugin: any) => plugin?.constructor?.name === 'MiniCssExtractPlugin',
) as any;

if (miniCssPlugin && 'options' in miniCssPlugin) {
  miniCssPlugin.options.filename = '[name].[contenthash].css';
  miniCssPlugin.options.chunkFilename = '[name].iframe.[contenthash].css';
}