[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?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. If this issue is still affecting you, please leave any comment (for example, "bump"). We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[JSerFeng]

Can you give use a reproduce repo, it will be easier to find the problem

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. If this issue is still affecting you, please leave any comment (for example, "bump"). We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[leookun]

The same problem, but not 100% occurring, after hmr, some styles were missed.

[github-actions[bot]]

Hello @childrentime, sorry we can't investigate the problem further without reproduction demo, please provide a repro demo by forking rspack-repro, or provide a minimal GitHub repository by yourself. Issues labeled by need reproduction will be closed if no activities in 14 days.

[github-actions[bot]]

Since the issue was labeled with need reproduction, but no response in 14 days. This issue will be closed. Feel free to comment and reopen it if you have any further questions.