feat: support prefetch and preload in css extract plugin

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

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

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(`}`);
 };

css-extract/cases/prefetch-preload-hmr/a.css

@@ -0,0 +1,3 @@
+.a {
+  color: red;
+}

css-extract/cases/prefetch-preload-hmr/expected/main.css

@@ -0,0 +1,4 @@
+.a {
+  color: red;
+}
+

css-extract/cases/prefetch-preload-hmr/index.js

@@ -0,0 +1,3 @@
+import "./a.css";
+
+import(/* webpackPrefetch: true */ "./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(),
+  ],
+};

css-extract/cases/prefetch-preload/a.css

@@ -0,0 +1,3 @@
+.a {
+  color: red;
+}

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

css-extract/cases/prefetch-preload/b1.css

@@ -0,0 +1,3 @@
+.b1 {
+  color: red;
+}

css-extract/cases/prefetch-preload/b2.css

@@ -0,0 +1,3 @@
+.b2 {
+  color: red;
+}

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

css-extract/cases/prefetch-preload/c1.css

@@ -0,0 +1,3 @@
+.c1 {
+  color: red;
+}

css-extract/cases/prefetch-preload/c2.css

@@ -0,0 +1,3 @@
+.c2 {
+  color: red;
+}

css-extract/cases/prefetch-preload/expected/a.css

@@ -0,0 +1,4 @@
+.a {
+  color: red;
+}
+

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
+
+
+}),
+
+}]);

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));
+
+
+}),
+
+}]);

css-extract/cases/prefetch-preload/expected/b1.css

@@ -0,0 +1,4 @@
+.b1 {
+  color: red;
+}
+

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
+
+
+}),
+
+}]);

css-extract/cases/prefetch-preload/expected/b2.css

@@ -0,0 +1,4 @@
+.b2 {
+  color: red;
+}
+

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
+
+
+}),
+
+}]);

css-extract/cases/prefetch-preload/expected/b3.js

@@ -0,0 +1,7 @@
+(self["webpackChunk"] = self["webpackChunk"] || []).push([["b3"], {
+"./b3.js": (function () {
+
+
+}),
+
+}]);

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"));
+
+
+}),
+
+}]);

css-extract/cases/prefetch-preload/expected/c1.css

@@ -0,0 +1,4 @@
+.c1 {
+  color: red;
+}
+

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
+
+
+}),
+
+}]);

css-extract/cases/prefetch-preload/expected/c2.css

@@ -0,0 +1,4 @@
+.c2 {
+  color: red;
+}
+

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
+
+
+}),
+
+}]);