fix: should not inject css prefetch/preload runtime when only prefetch/preload js chunks (#12112)

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

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

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

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

Author: LingyuCoder

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");