fix: should not inject css prefetch/preload runtime when only prefetch/preload js chunks

crates/rspack_core/src/chunk.rs

@@ -809,30 +809,63 @@ impl Chunk {
 
   pub fn get_child_ids_by_order<F: Fn(&ChunkUkey, &Compilation) -> bool>(
     &self,
-    order: &ChunkGroupOrderKey,
+    order_key: &ChunkGroupOrderKey,
     compilation: &Compilation,
     filter_fn: &F,
   ) -> Option<Vec<ChunkId>> {
-    self
-      .get_children_of_type_in_order(order, compilation, true)
-      .map(|order_children| {
-        order_children
-          .iter()
-          .flat_map(|(_, child_chunks)| {
-            child_chunks.iter().filter_map(|chunk_ukey| {
-              if filter_fn(chunk_ukey, compilation) {
-                compilation
-                  .chunk_by_ukey
-                  .expect_get(chunk_ukey)
-                  .id(&compilation.chunk_ids_artifact)
-                  .cloned()
-              } else {
-                None
-              }
+    let mut list = vec![];
+    for group_ukey in self.get_sorted_groups_iter(&compilation.chunk_group_by_ukey) {
+      let group = compilation.chunk_group_by_ukey.expect_get(group_ukey);
+      if group
+        .chunks
+        .last()
+        .is_some_and(|chunk_ukey| chunk_ukey.eq(&self.ukey))
+      {
+        for child_group_ukey in group.children_iterable() {
+          let child_group = compilation.chunk_group_by_ukey.expect_get(child_group_ukey);
+          if let Some(order) = child_group
+            .kind
+            .get_normal_options()
+            .and_then(|o| match order_key {
+              ChunkGroupOrderKey::Prefetch => o.prefetch_order,
+              ChunkGroupOrderKey::Preload => o.preload_order,
             })
-          })
-          .collect_vec()
-      })
+          {
+            list.push((order, *child_group_ukey));
+          }
+        }
+      }
+    }
+
+    list.sort_by(|a, b| {
+      let order = b.0.cmp(&a.0);
+      match order {
+        Ordering::Equal => compare_chunk_group(&a.1, &b.1, compilation),
+        _ => order,
+      }
+    });
+
+    let mut chunk_ids = vec![];
+    for (_, child_group_ukey) in list.iter() {
+      let child_group = compilation.chunk_group_by_ukey.expect_get(child_group_ukey);
+      for chunk_ukey in child_group.chunks.iter() {
+        if filter_fn(chunk_ukey, compilation)
+          && let Some(chunk_id) = compilation
+            .chunk_by_ukey
+            .expect_get(chunk_ukey)
+            .id(&compilation.chunk_ids_artifact)
+            .cloned()
+        {
+          chunk_ids.push(chunk_id);
+        }
+      }
+    }
+
+    if chunk_ids.is_empty() {
+      return None;
+    }
+
+    Some(chunk_ids)
   }
 
   pub fn get_child_ids_by_orders_map<F: Fn(&ChunkUkey, &Compilation) -> bool + Sync>(

packages/rspack-test-tools/src/case/hot-step.ts

@@ -150,8 +150,9 @@ function createHotStepProcessor(
 			}, str);
 		};
 
-		const fileList = stats
-			.assets!.map(i => {
+		const assets = stats.assets!.sort((a, b) => a.name.localeCompare(b.name));
+		const fileList = assets
+			.map(i => {
 				const fileName = i.name;
 				const renderName = replaceFileName(fileName);
 				const content = replaceContent(

tests/rspack-test/HotSnapshot.hottest.js

@@ -6,5 +6,6 @@ describeByWalk(__filename, (name, src, dist) => {
 	createHotStepCase(name, src, dist, path.join(tempDir, name), "web");
 }, {
 	source: path.resolve(__dirname, "./hotCases"),
-	dist: path.resolve(__dirname, `./js/hot-snapshot`)
+	dist: path.resolve(__dirname, `./js/hot-snapshot`),
+	exclude: [/remove-add-worker/]
 });

tests/rspack-test/configCases/asset-modules/errored/test.filter.js

@@ -1 +1 @@
-module.exports = () => "FIXME: can not find the css folder"
+module.exports = () => "TODO: generate empty css asset when loader throws error"

tests/rspack-test/configCases/css/import/index.js

@@ -1,13 +1,13 @@
 import "./style.css";
-import path from "path";
 
 it("should compile", () => {
-	const links = document.getElementsByTagName("link");
+	const links = Array.from(document.getElementsByTagName("link"));
+	const path = __non_webpack_require__("path");
 	const css = [];
 
 	// Skip first because import it by default
 	for (const link of links.slice(1)) {
-		css.push(link.sheet.css);
+		css.push(getLinkSheet(link));
 	}
 
 	expect(css).toMatchFileSnapshot(path.join(__SNAPSHOT__, 'bundle0.css.txt'));

tests/rspack-test/configCases/css/import/test.config.js

@@ -1,10 +1,11 @@
 "use strict";
 
 module.exports = {
-	moduleScope(scope) {
+	moduleScope(scope, stats) {
+		const __STATS_I__ = stats().__index__;
 		const link = scope.window.document.createElement("link");
 		link.rel = "stylesheet";
-		link.href = `bundle${scope.__STATS_I__}.css`;
+		link.href = `bundle${__STATS_I__}.css`;
 		scope.window.document.head.appendChild(link);
 	}
 };

tests/rspack-test/configCases/css/import/test.filter.js

@@ -1 +1 @@
-module.exports = () => "FIXME: can not resolve errors";
+module.exports = () => "TODO: support css/global";

tests/rspack-test/configCases/css/prefetch-preload-module/index.mjs

@@ -36,21 +36,19 @@ it("should prefetch and preload child chunks on chunk load", () => {
 	// Test normal script loading
 	link = document.head._children[3];
 	expect(link._type).toBe("link");
-	expect(link.rel).toBe("modulepreload");
-	expect(link.href).toBe("https://example.com/public/path/chunk1-b.mjs");
-
-	link = document.head._children[4];
-	expect(link._type).toBe("link");
 	expect(link.rel).toBe("preload");
 	expect(link.as).toBe("style");
 	expect(link.href).toBe("https://example.com/public/path/chunk1-a-css.css");
 
-	link = document.head._children[5];
+	link = document.head._children[4];
 	expect(link._type).toBe("link");
 	expect(link.rel).toBe("modulepreload");
 	expect(link.href).toBe("https://example.com/public/path/chunk1-a-css.mjs");
 
-
+	link = document.head._children[5];
+	expect(link._type).toBe("link");
+	expect(link.rel).toBe("modulepreload");
+	expect(link.href).toBe("https://example.com/public/path/chunk1-b.mjs");
 
 	return promise.then(() => {
 		expect(document.head._children).toHaveLength(8);

tests/rspack-test/configCases/web/prefetch-preload-module-only-js/index.mjs

@@ -25,7 +25,6 @@ it("should prefetch and preload child chunks on chunk load", () => {
 	expect(link._type).toBe("link");
 	expect(link.rel).toBe("modulepreload");
 	expect(link.href).toBe("https://example.com/public/path/chunk1-b.mjs");
-	expect(link.charset).toBe("utf-8");
 	expect(link.getAttribute("nonce")).toBe("nonce");
 	expect(link.crossOrigin).toBe("anonymous");
 

tests/rspack-test/configCases/web/prefetch-preload-module/index.mjs

@@ -33,30 +33,29 @@ it("should prefetch and preload child chunks on chunk load", () => {
 	expect(document.head._children).toHaveLength(6);
 
 	// Test normal script loading
-	// Test preload of chunk1-b
 	link = document.head._children[3];
 	expect(link._type).toBe("link");
-	expect(link.rel).toBe("modulepreload");
-	expect(link.href).toBe("https://example.com/public/path/chunk1-b.mjs");
+	expect(link.rel).toBe("preload");
+	expect(link.as).toBe("style");
+	expect(link.href).toBe("https://example.com/public/path/chunk1-a-css.css");
 	expect(link.getAttribute("nonce")).toBe("nonce");
 	expect(link.crossOrigin).toBe("anonymous");
 
 	link = document.head._children[4];
 	expect(link._type).toBe("link");
-	expect(link.rel).toBe("preload");
-	expect(link.as).toBe("style");
-	expect(link.href).toBe("https://example.com/public/path/chunk1-a-css.css");
+	expect(link.rel).toBe("modulepreload");
+	expect(link.href).toBe("https://example.com/public/path/chunk1-a-css.mjs");
 	expect(link.getAttribute("nonce")).toBe("nonce");
 	expect(link.crossOrigin).toBe("anonymous");
 
+	// Test preload of chunk1-b
 	link = document.head._children[5];
 	expect(link._type).toBe("link");
 	expect(link.rel).toBe("modulepreload");
-	expect(link.href).toBe("https://example.com/public/path/chunk1-a-css.mjs");
+	expect(link.href).toBe("https://example.com/public/path/chunk1-b.mjs");
 	expect(link.getAttribute("nonce")).toBe("nonce");
 	expect(link.crossOrigin).toBe("anonymous");
 
-
 	return promise.then(() => {
 		expect(document.head._children).toHaveLength(8);
 

tests/rspack-test/hotCases/loader-import-module/css/__snapshots__/web/0.snap.txt

@@ -0,0 +1,12 @@
+# Case css: Step 0
+
+## Changed Files
+
+
+## Asset Files
+- Bundle: bundle.js
+
+## Manifest
+
+
+## Update

tests/rspack-test/hotCases/loader-import-module/css/__snapshots__/web/1.snap.txt

@@ -0,0 +1,53 @@
+# Case css: Step 1
+
+## Changed Files
+- colors.js
+- stylesheet.css.js
+
+## Asset Files
+- Bundle: bundle.js
+- Manifest: main.LAST_HASH.hot-update.json, size: 28
+- Update: main.LAST_HASH.hot-update.js, size: 436
+
+## Manifest
+
+### main.LAST_HASH.hot-update.json
+
+```json
+{"c":["main"],"r":[],"m":[]}
+```
+
+
+## Update
+
+
+### main.LAST_HASH.hot-update.js
+
+#### Changed Modules
+- ./stylesheet.css.js
+
+#### Changed Runtime Modules
+- webpack/runtime/get_full_hash
+
+#### Changed Content
+```js
+"use strict";
+self["webpackHotUpdate"]("main", {
+"./stylesheet.css.js": 
+/*!***************************!*\
+  !*** ./stylesheet.css.js ***!
+  \***************************/
+(function (module) {
+module.exports = "body { background: url(\"https://test.cases/path/assets/file.png\"); color: #0f0; }";
+
+}),
+
+},function(__webpack_require__) {
+// webpack/runtime/get_full_hash
+(() => {
+__webpack_require__.h = () => ("CURRENT_HASH")
+})();
+
+}
+);
+```

tests/rspack-test/hotCases/loader-import-module/css/__snapshots__/web/2.snap.txt

@@ -0,0 +1,98 @@
+# Case css: Step 2
+
+## Changed Files
+- colors.js
+- stylesheet.css.js
+
+## Asset Files
+- Bundle: bundle.js
+- Manifest: main.LAST_HASH.hot-update.json, size: 28
+- Update: main.LAST_HASH.hot-update.js, size: 436
+
+## Manifest
+
+### main.LAST_HASH.hot-update.json
+
+```json
+{"c":["main"],"r":[],"m":[]}
+```
+
+
+## Update
+
+
+### main.LAST_HASH.hot-update.js
+
+#### Changed Modules
+- ./stylesheet.css.js
+
+#### Changed Runtime Modules
+- webpack/runtime/get_full_hash
+
+#### Changed Content
+```js
+"use strict";
+self["webpackHotUpdate"]("main", {
+"./stylesheet.css.js": 
+/*!***************************!*\
+  !*** ./stylesheet.css.js ***!
+  \***************************/
+(function (module) {
+module.exports = "body { background: url(\"https://test.cases/path/assets/file.jpg\"); color: #00f; }";
+
+}),
+
+},function(__webpack_require__) {
+// webpack/runtime/get_full_hash
+(() => {
+__webpack_require__.h = () => ("CURRENT_HASH")
+})();
+
+}
+);
+```
+
+
+
+
+## Runtime
+### Status
+
+```txt
+check => prepare => dispose => apply => idle
+```
+
+
+
+### JavaScript
+
+#### Outdated
+
+Outdated Modules:
+- ./stylesheet.css.js
+
+
+Outdated Dependencies:
+```json
+{
+  "./index.js": [
+    "./stylesheet.css.js"
+  ]
+}
+```
+
+#### Updated
+
+Updated Modules:
+- ./stylesheet.css.js
+
+Updated Runtime:
+- `__webpack_require__.h`
+
+
+#### Callback
+
+Accepted Callback:
+- ./stylesheet.css.js
+
+Disposed Callback: