fix: css infinite reload when module chunk enabled (#11536)

* fix: align webpack remove js module check

* test: add test for only css change while single runtime chunk & module chunk setting

Author: stormslowly

crates/rspack_plugin_runtime/src/module_chunk_format.rs

@@ -122,11 +122,6 @@ async fn render_chunk(
   chunk_ukey: &ChunkUkey,
   render_source: &mut RenderSource,
 ) -> Result<()> {
-  // Skip processing if the chunk doesn't have any JavaScript
-  if !chunk_has_js(chunk_ukey, compilation) {
-    return Ok(());
-  }
-
   let hooks = JsPlugin::get_compilation_hooks(compilation.id());
   let chunk = compilation.chunk_by_ukey.expect_get(chunk_ukey);
   let base_chunk_output_name = get_chunk_output_name(chunk, compilation).await?;

packages/rspack-test-tools/tests/hotCases/esm-output/module-chunk-css/__snapshots__/web/0.snap.txt

@@ -0,0 +1,12 @@
+# Case module-chunk-css: Step 0
+
+## Changed Files
+
+
+## Asset Files
+
+
+## Manifest
+
+
+## Update

packages/rspack-test-tools/tests/hotCases/esm-output/module-chunk-css/__snapshots__/web/1.snap.txt

@@ -0,0 +1,12 @@
+# Case module-chunk-css: Step 1
+
+## Changed Files
+- style.module.css
+
+## Asset Files
+
+
+## Manifest
+
+
+## Update

packages/rspack-test-tools/tests/hotCases/esm-output/module-chunk-css/index.js

@@ -0,0 +1,19 @@
+import * as styles from "./style.module.css";
+import update from "../../update.esm";
+
+import.meta.webpackHot.accept(["./style.module.css"])
+
+it("should work", async function (done) {
+	expect(styles).toMatchObject({ class: "_style_module_css-class" });
+	let firstFullHash = __webpack_hash__;
+
+	NEXT(update(done, true, () => {
+		try{
+			// only css change should also trigger changing full hash in runtime
+			expect(__webpack_hash__).not.toBe(firstFullHash);
+			done();
+		}catch(e){
+			done(e)
+		}
+	}));
+});

packages/rspack-test-tools/tests/hotCases/esm-output/module-chunk-css/rspack.config.js

@@ -0,0 +1,19 @@
+/** @type {import("../../../../").Configuration} */
+module.exports = {
+	mode: "development",
+	experiments: {
+		outputModule: true,
+		css: true
+	},
+	output: {
+		module: true,
+		chunkFormat: "module",
+		filename: "[name].mjs",
+		chunkFilename: "[name].chunk.mjs",
+		enabledLibraryTypes: ["module"]
+	},
+	optimization: {
+		minimize: false,
+		runtimeChunk: "single"
+	}
+};

packages/rspack-test-tools/tests/hotCases/esm-output/module-chunk-css/style.module.css

@@ -0,0 +1,7 @@
+.class {
+	color: red;
+}
+---
+.class-other {
+	color: blue;
+}

packages/rspack-test-tools/tests/hotCases/esm-output/module-chunk-css/test.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+	moduleScope(scope) {
+		const link = scope.window.document.createElement("link");
+		link.rel = "stylesheet";
+		link.href = "https://test.cases/path/bundle.css";
+		scope.window.document.head.appendChild(link);
+	},
+	documentType: "fake"
+};

packages/rspack-test-tools/tests/hotCases/update.esm.js

@@ -0,0 +1,16 @@
+export default function update(done, options, callback) {
+	return function (err, stats) {
+		if (err) return done(err);
+		import.meta.webpackHot
+			.check(options || true)
+			.then(updatedModules => {
+				if (!updatedModules) {
+					return done(new Error("No update available"));
+				}
+				if (callback) callback(stats);
+			})
+			.catch(err => {
+				done(err);
+			});
+	};
+};