Contenthash name pattern not honored when optimizing CSS

[albertfdp]

trafficstars

I am experiencing an issue with webpack that turns out to be quite problematic when combined with a CDN and SRI. I am unsure if the issue is actually on optimize-css-assets-webpack-plugin or on webpack side, but here there are the reproduction steps:

You can find a minimal example in this repo https://github.com/albertfdp/optimize-css-assets-plugin-contenthash

You can see that there are 2 webpack configurations, with the only difference being the options passed to OptimizeCSSAssetsPlugin:

new OptimizeCSSAssetsPlugin({
 cssProcessorOptions: {
  discardComments: { removeAll: true }
-- reduceIdents: false,
-- safe: true,
-- zindex: false
 }
})

Also, bear in mind that I am using:

plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[name].[id].[contenthash].css'
    })
  ]

This results in 2 files being generated, both with the same name, but with different content (contenthash):

• https://github.com/albertfdp/optimize-css-assets-plugin-contenthash/blob/master/dist/A/styles.1.5c30da23589641e4b64a.css
• https://github.com/albertfdp/optimize-css-assets-plugin-contenthash/blob/master/dist/B/styles.1.5c30da23589641e4b64a.css

Therefore, if this happens in 2 consecutive builds, and the first time the assets are uploaded to a CDN, when requesting the CSS file, the SRI hash won't match and 💥.

[albertfdp]

From webpack maintainers I was told that this is actually an issue on this plugin, which should indicate to webpack that content has changed and thus contenthash refreshed https://github.com/webpack/webpack/issues/7483#issuecomment-394744914

[NMFR]

Currently OptimizeCSSAssetsPlugin does not change the file name (it simply transforms the file's content).

You are right the content hash should be honored.

Waiting for https://github.com/webpack/loader-utils/issues/112 to be solved so i can have an idea how to implement this. The problem from the plugins perspective is that the filename is already generated, we need a way to know that a content hash is present in the file name and re calculate it.

[DawidJanczak]

Just in case it went unnoticed: the feature required for this landed in loader-utils 1.2.0 so this might be unblocked now.

[DawidJanczak]

Since there's not much going on with this issue one possible workaround until it's fixed is to add postcss-loader and cssnano and use that to minify the CSS instead of this plugin.

[rightaway]

I'm not seeing this problem anymore in webpack 5 and optimize-css-assets-webpack-plugin 5. Can you see it or is it resolved for you too?