[Bug]: TailwindCSS HMR not work with rspack.CssExtractRspackPlugin.loader

[childrentime]

System Info

System:
OS: macOS 14.1
CPU: (8) arm64 Apple M3
Memory: 97.64 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
Yarn: 1.22.21 - ~/.nvm/versions/node/v18.12.1/bin/yarn
npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
pnpm: 8.15.5 - ~/.nvm/versions/node/v18.12.1/bin/pnpm
Watchman: 2024.04.15.00 - /opt/homebrew/bin/watchman
Browsers:
Chrome: 124.0.6367.92
Edge: 124.0.2478.67
Safari: 17.1
npmPackages:
@rspack/cli: 0.6.3 => 0.6.3
@rspack/core: 0.6.3 => 0.6.3
@rspack/plugin-react-refresh: 0.6.3 => 0.6.3

Details

I am trying to use the extract loader instead of raw CSS to use Tailwind because I have a related migration that requires this loader. I have created a minimal reproduction, and there are no issues at startup. However, when you try to add a text-red-600 to the className, Hot Module Replacement (HMR) does not take effect. You have to use ctrl+c to restart the rspack dev server for it to take effect.

Reproduce link

https://github.com/childrentime/rspack-tailwindcss

Reproduce Steps

npm i
npm run dev

add text-red-600 in src/App.tsx

[chenjiahan]

@JSerFeng can you share some progress for this issue~

[childrentime]

Do you have any test cases for SSR tailwind HMR? I tried using the 0.70 test version and it seems to have some issues under SSR.

[JSerFeng]

Can you give use a minimal repro ?

[childrentime]

Well, it's really difficult to find a SSR template with webpack + tailwind. I might as well directly compare their differences in my project.

https://github.com/childrentime/pareto/tree/issue/tailwind/examples/tailwind

output.mp4

[childrentime]

The strange point is that when rspack tailwind is hot updated, it seems to make the browser refresh once, instead of hot updating.