[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

https://github.com/web-infra-dev/rspack/assets/58261676/62ce0e0c-6180-4aed-b4d5-a0a1468afff9

[childrentime]

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

[childrentime]

Hello, do you have any plans for this issue currently?