[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';
}

[valentinpalkovic]

Hi @Kludgy4

Thank you for opening this issue.

I am not sure whether we can do much about it. Storybook itself doesn't use the MiniCssExtractPlugin. I think it is coming from https://github.com/angular/angular-cli/blob/4f803083fc8940aed2aa30f46970273175ad6b37/packages/angular_devkit/build_angular/src/tools/webpack/configs/styles.ts#L184 and it seems that it is not configurable.

What happens if you build your Angular application. Do you also see that css files don't have hashes in the file names?

[Kludgy4]

My CSS output has a hash when built normally with the angular cli.

The main difference here I suppose is that storybook angular still uses the old Webpack build system as opposed to the new Angular 17+ es-build and vite build system.

[valentinpalkovic]

I see. I think it makes a ton of sense for Storybook to apply your workaround internally in our code so that users don’t have to do it. I will prepare a PR this week. Thanks again for opening up the issue and letting us know about your workaround.

[Kludgy4]

Brilliant, thank you @valentinpalkovic

[Kludgy4]

On this, I assume that updating storybook to use the new build system would fix this problem. The storybook v8 announcement post hints that this will come in the next major version of storybook

We’re also working with the Angular core team to support new high-performance build options in a future version.