css HMR not working when css file name has contenthash

[hoivee]

System Info

System:
OS: Linux 4.4 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900HX
Memory: 33.14 GB / 63.74 GB
Container: Yes
Shell: 5.8.1 - /usr/bin/zsh
Binaries:
Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v18.16.0/bin/yarn
npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
npmPackages:
@rspack/cli: 0.2.3 => 0.2.3

Details

if set output filename or cssFilename cause css filename include contenthash, css HMR just not working

Reproduce link

No response

Reproduce Steps

set output.finename like 'static/js/[name].[contenthash].js' or set output.cssFilename like 'static/css/chunk.[name].[contenthash].css'

[hyf0]

It's a known limitation of Rspack CSS supporting. Webpack has the same behavior as Rspack with enabling experiments.css: true.

You could use this config as a workaround:

cssFilename: isDev ? '[name].css' : '[name][contenthash].css'.

[hyf0]

Related Webpack issue: webpack-contrib/mini-css-extract-plugin#444.