[Bug Report]: Tailwindcss can't hmr when use postcss-loader

[zhoushaw]

System Info

System: OS: macOS 13.0 CPU: (10) arm64 Apple M1 Pro Memory: 205.58 MB / 32.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 16.18.0 - ~/Library/Caches/fnm_multishells/94375_1678589443898/bin/node Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/94375_1678589443898/bin/yarn npm: 8.19.2 - ~/Library/Caches/fnm_multishells/94375_1678589443898/bin/npm Browsers: Chrome: 111.0.5563.64 Safari: 16.1 npmPackages: @rspack/cli: latest => 0.0.24

Details

When I use the CDN approach (https://tailwindcss.com/docs/installation/play-cdn) to use Tailwindcss, HMR works. However, when I use the postcss-loader(https://www.rspack.dev/guide/language-support.html#tailwind-css) approach to ensure that only the required CSS content is imported, the Tailwindcss class does not load correctly when I update my content's className. I have to restart the dev server to get it to work correctly.

config

// rspack.config.js
/**
 * @type {import('@rspack/cli').Configuration}
 */
module.exports = {
	context: __dirname,
	entry: {
		main: "./src/main.jsx"
	},
	builtins: {
		html: [
			{
				template: "./index.html"
			}
		]
	},
	module: {
		rules: [
			{
				test: /\.svg$/,
				type: "asset"
			},
			{
				test: /\.css$/,
				use: [
				  {
					loader: 'postcss-loader',
					options: {
					  postcssOptions: {
						plugins: {
						  tailwindcss: {},
						},
					  },
					},
				  },
				],
				type: 'css',
			  },
		]
	}
};

package.json

{
  "name": "rspack-react-starter",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "rspack serve",
    "build": "rspack build"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@rspack/cli": "latest",
    "@types/react": "^18.0.25",
    "@types/react-dom": "^18.0.8",
    "postcss": "^8.4.21",
    "postcss-loader": "^7.0.2",
    "tailwindcss": "^3.2.7"
  }
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
      "./index.html",
      "./src/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
}

Reproduce link

https://github.com/zhoushaw/tailwind-hmr-problem

Reproduce Steps

1. pnpm install
2. pnpm run dev
3. add new Tailwindcss className to App Component
4. HMR can't take effect
5. restart server will see take effect

[bvanjoi]

I can't reproduce this problem:

https://user-images.githubusercontent.com/30187863/224528564-17fc4222-4bfb-48fe-8845-7e5e19fd8d4a.mov

[zhoushaw]

Maybe you could add more className to repeat the question

[bvanjoi]

I have reproduced other similar problems, but this should not be due to Tailwind, even normal css can have problems, I will try to fix it later

[zhoushaw]

You need to start the development server and then modify the className. I think the postcss-loader is invalid in HMR.

[bvanjoi]

This is an issue in the incremental update logic, a temporary solution:

// rspack.config.js
module.exports = {
    // xxxxxx
    experiments: {
        incrementalRebuild: false
     }
}

[zhoushaw]

Repeat issue: #2103

[skywalker512]

I still have a problem. Please help me take a look here. I downloaded the corresponding node file from this Github action Artifacts and modified the @rspack/binding to apply your changes. However, when I add new tailwind atomic CSS, tailwindcss still does not generate the corresponding CSS.

https://github.com/skywalker512/rspack-tailwind-hmr-problem

DEBUG=1 pnpm dev

only first time tailwindcss will create context, under normal circumstances (webpack), tailwindcss seems to receive updates from App.css and create a new context. (tailwind seems to register App.css dependency through postcss loader)

I'm not familiar with webpack and tailwindcss. I don't know why I have such a problem.