feat: support prefetch and preload in css extract plugin (#11)

LingyuCoder · web-flow · commit b91bacefbd71 · 2025-11-20T14:57:54.000+08:00
diff --git a/css-extract/cases/dependOn-multiple-files-per-entry/expected/entry1.js b/css-extract/cases/dependOn-multiple-files-per-entry/expected/entry1.js
@@ -2,14 +2,14 @@
 (self["webpackChunk"] = self["webpackChunk"] || []).push([["entry1"], {
 "./entryA.js": (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 __webpack_require__.r(__webpack_exports__);
-/* ESM import */var _styleA_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./styleA.css");
+/* import */var _styleA_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./styleA.css");
 
 
 
 }),
 "./entryB.js": (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 __webpack_require__.r(__webpack_exports__);
-/* ESM import */var _styleB_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./styleB.css");
+/* import */var _styleB_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./styleB.css");
 
 
 
diff --git a/css-extract/cases/dependOn/expected/entry1.js b/css-extract/cases/dependOn/expected/entry1.js
@@ -2,7 +2,7 @@
 (self["webpackChunk"] = self["webpackChunk"] || []).push([["entry1"], {
 "./entryA.js": (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 __webpack_require__.r(__webpack_exports__);
-/* ESM import */var _styleA_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./styleA.css");
+/* import */var _styleA_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./styleA.css");
 
 
 
diff --git a/css-extract/cases/insert-undefined/test.js b/css-extract/cases/insert-undefined/test.js
@@ -2,9 +2,9 @@ const fs = require("fs");
 const path = require("path");
 module.exports = function (outputDirectory, _stats) {
 	const mainContent = fs.readFileSync(path.resolve(outputDirectory, "main.js"), "utf8");
-	expect(mainContent).toContain(`if (oldTag) {
-  oldTag.parentNode.insertBefore(linkTag, oldTag.nextSibling);
-} else {
-  document.head.appendChild(linkTag);
-}`);
+	expect(mainContent).toContain(`if (oldTag) {`);
+  expect(mainContent).toContain(`oldTag.parentNode.insertBefore(linkTag, oldTag.nextSibling);`);
+  expect(mainContent).toContain(`} else {`);
+  expect(mainContent).toContain(`document.head.appendChild(linkTag);`);
+  expect(mainContent).toContain(`}`);
 };
diff --git a/css-extract/cases/prefetch-preload-hmr/a.css b/css-extract/cases/prefetch-preload-hmr/a.css
@@ -0,0 +1,3 @@
+.a {
+  color: red;
+}
diff --git a/css-extract/cases/prefetch-preload-hmr/b.js b/css-extract/cases/prefetch-preload-hmr/b.js
diff --git a/css-extract/cases/prefetch-preload-hmr/expected/main.css b/css-extract/cases/prefetch-preload-hmr/expected/main.css
@@ -0,0 +1,4 @@
+.a {
+  color: red;
+}
+
diff --git a/css-extract/cases/prefetch-preload-hmr/index.js b/css-extract/cases/prefetch-preload-hmr/index.js
@@ -0,0 +1,3 @@
+import "./a.css";
+
+import(/* webpackPrefetch: true */ "./b");
diff --git a/css-extract/cases/prefetch-preload-hmr/webpack.config.js b/css-extract/cases/prefetch-preload-hmr/webpack.config.js
@@ -0,0 +1,19 @@
+const { CssExtractRspackPlugin, HotModuleReplacementPlugin } = require("@rspack/core");
+
+module.exports = {
+  entry: "./index.js",
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [CssExtractRspackPlugin.loader, "css-loader"],
+      },
+    ],
+  },
+  plugins: [
+    new CssExtractRspackPlugin({
+      filename: "[name].css",
+    }),
+    new HotModuleReplacementPlugin(),
+  ],
+};
diff --git a/css-extract/cases/prefetch-preload/a.css b/css-extract/cases/prefetch-preload/a.css
@@ -0,0 +1,3 @@
+.a {
+  color: red;
+}
diff --git a/css-extract/cases/prefetch-preload/b.js b/css-extract/cases/prefetch-preload/b.js
@@ -0,0 +1,3 @@
+import(/* webpackPrefetch: true, webpackChunkName: "b1" */ "./b1.css");
+import(/* webpackPreload: true, webpackChunkName: "b2" */ "./b2.css");
+import(/* webpackPrefetch: true, webpackChunkName: "b3" */ "./b3");
diff --git a/css-extract/cases/prefetch-preload/b1.css b/css-extract/cases/prefetch-preload/b1.css
@@ -0,0 +1,3 @@
+.b1 {
+  color: red;
+}
diff --git a/css-extract/cases/prefetch-preload/b2.css b/css-extract/cases/prefetch-preload/b2.css
@@ -0,0 +1,3 @@
+.b2 {
+  color: red;
+}
diff --git a/css-extract/cases/prefetch-preload/b3.js b/css-extract/cases/prefetch-preload/b3.js
diff --git a/css-extract/cases/prefetch-preload/c.js b/css-extract/cases/prefetch-preload/c.js
@@ -0,0 +1,2 @@
+import(/* webpackPreload: true, webpackChunkName: "c1" */ "./c1.css");
+import(/* webpackPreload: true, webpackChunkName: "c2" */ "./c2.css");
diff --git a/css-extract/cases/prefetch-preload/c1.css b/css-extract/cases/prefetch-preload/c1.css
@@ -0,0 +1,3 @@
+.c1 {
+  color: red;
+}
diff --git a/css-extract/cases/prefetch-preload/c2.css b/css-extract/cases/prefetch-preload/c2.css
@@ -0,0 +1,3 @@
+.c2 {
+  color: red;
+}
diff --git a/css-extract/cases/prefetch-preload/expected/a.css b/css-extract/cases/prefetch-preload/expected/a.css
@@ -0,0 +1,4 @@
+.a {
+  color: red;
+}
+
diff --git a/css-extract/cases/prefetch-preload/expected/a.js b/css-extract/cases/prefetch-preload/expected/a.js
@@ -0,0 +1,10 @@
+"use strict";
+(self["webpackChunk"] = self["webpackChunk"] || []).push([["a"], {
+"./a.css": (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.r(__webpack_exports__);
+// extracted by css-extract-rspack-plugin
+
+
+}),
+
+}]);
diff --git a/css-extract/cases/prefetch-preload/expected/b.js b/css-extract/cases/prefetch-preload/expected/b.js
@@ -0,0 +1,10 @@
+(self["webpackChunk"] = self["webpackChunk"] || []).push([["b"], {
+"./b.js": (function (__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {
+__webpack_require__.e(/* import() | b1 */ "b1").then(__webpack_require__.bind(__webpack_require__, "./b1.css"));
+__webpack_require__.e(/* import() | b2 */ "b2").then(__webpack_require__.bind(__webpack_require__, "./b2.css"));
+__webpack_require__.e(/* import() | b3 */ "b3").then(__webpack_require__.t.bind(__webpack_require__, "./b3.js", 23));
+
+
+}),
+
+}]);
diff --git a/css-extract/cases/prefetch-preload/expected/b1.css b/css-extract/cases/prefetch-preload/expected/b1.css
@@ -0,0 +1,4 @@
+.b1 {
+  color: red;
+}
+
diff --git a/css-extract/cases/prefetch-preload/expected/b1.js b/css-extract/cases/prefetch-preload/expected/b1.js
@@ -0,0 +1,10 @@
+"use strict";
+(self["webpackChunk"] = self["webpackChunk"] || []).push([["b1"], {
+"./b1.css": (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.r(__webpack_exports__);
+// extracted by css-extract-rspack-plugin
+
+
+}),
+
+}]);
diff --git a/css-extract/cases/prefetch-preload/expected/b2.css b/css-extract/cases/prefetch-preload/expected/b2.css
@@ -0,0 +1,4 @@
+.b2 {
+  color: red;
+}
+
diff --git a/css-extract/cases/prefetch-preload/expected/b2.js b/css-extract/cases/prefetch-preload/expected/b2.js
@@ -0,0 +1,10 @@
+"use strict";
+(self["webpackChunk"] = self["webpackChunk"] || []).push([["b2"], {
+"./b2.css": (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.r(__webpack_exports__);
+// extracted by css-extract-rspack-plugin
+
+
+}),
+
+}]);
diff --git a/css-extract/cases/prefetch-preload/expected/b3.js b/css-extract/cases/prefetch-preload/expected/b3.js
@@ -0,0 +1,7 @@
+(self["webpackChunk"] = self["webpackChunk"] || []).push([["b3"], {
+"./b3.js": (function () {
+
+
+}),
+
+}]);
diff --git a/css-extract/cases/prefetch-preload/expected/c.js b/css-extract/cases/prefetch-preload/expected/c.js
@@ -0,0 +1,9 @@
+(self["webpackChunk"] = self["webpackChunk"] || []).push([["c"], {
+"./c.js": (function (__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {
+__webpack_require__.e(/* import() | c1 */ "c1").then(__webpack_require__.bind(__webpack_require__, "./c1.css"));
+__webpack_require__.e(/* import() | c2 */ "c2").then(__webpack_require__.bind(__webpack_require__, "./c2.css"));
+
+
+}),
+
+}]);
diff --git a/css-extract/cases/prefetch-preload/expected/c1.css b/css-extract/cases/prefetch-preload/expected/c1.css
@@ -0,0 +1,4 @@
+.c1 {
+  color: red;
+}
+
diff --git a/css-extract/cases/prefetch-preload/expected/c1.js b/css-extract/cases/prefetch-preload/expected/c1.js
@@ -0,0 +1,10 @@
+"use strict";
+(self["webpackChunk"] = self["webpackChunk"] || []).push([["c1"], {
+"./c1.css": (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.r(__webpack_exports__);
+// extracted by css-extract-rspack-plugin
+
+
+}),
+
+}]);
diff --git a/css-extract/cases/prefetch-preload/expected/c2.css b/css-extract/cases/prefetch-preload/expected/c2.css
@@ -0,0 +1,4 @@
+.c2 {
+  color: red;
+}
+
diff --git a/css-extract/cases/prefetch-preload/expected/c2.js b/css-extract/cases/prefetch-preload/expected/c2.js
@@ -0,0 +1,10 @@
+"use strict";
+(self["webpackChunk"] = self["webpackChunk"] || []).push([["c2"], {
+"./c2.css": (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.r(__webpack_exports__);
+// extracted by css-extract-rspack-plugin
+
+
+}),
+
+}]);
diff --git a/css-extract/cases/prefetch-preload/expected/main.js b/css-extract/cases/prefetch-preload/expected/main.js
diff --git a/css-extract/cases/prefetch-preload/index.js b/css-extract/cases/prefetch-preload/index.js
diff --git a/css-extract/cases/prefetch-preload/webpack.config.js b/css-extract/cases/prefetch-preload/webpack.config.js
diff --git a/package.json b/package.json
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/sri-plugin/unit.test.ts b/sri-plugin/unit.test.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +.a {
 +  color: red;
 +}
++
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import "./a.css";`
	`2`	`+`
	`3`	`+import(/* webpackPrefetch: true */ "./b");`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import(/* webpackPrefetch: true, webpackChunkName: "b1" */ "./b1.css");`
	`2`	`+import(/* webpackPreload: true, webpackChunkName: "b2" */ "./b2.css");`
	`3`	`+import(/* webpackPrefetch: true, webpackChunkName: "b3" */ "./b3");`