feat: port css-extract latest features

Author: shulaoda

packages/rspack/src/builtin-plugin/css-extract/loader.ts

@@ -1,9 +1,9 @@
 import path from "node:path";
 
-import schema from "./loader-options.json";
+import type { Filename, LoaderContext, LoaderDefinition } from "../..";
 import { CssExtractRspackPlugin } from "./index";
+import schema from "./loader-options.json";
 import { stringifyLocal, stringifyRequest } from "./utils";
-import type { Filename, LoaderContext, LoaderDefinition } from "../..";
 
 export const BASE_URI = "webpack://";
 export const MODULE_TYPE = "css/mini-extract";
@@ -36,12 +36,12 @@ export interface CssExtractRspackLoaderOptions {
 	defaultExport?: boolean;
 }
 
-function hotLoader(
+export function hotLoader(
 	content: string,
 	context: {
 		loaderContext: LoaderContext;
-		options: CssExtractRspackLoaderOptions;
-		locals: Record<string, string>;
+		options?: CssExtractRspackLoaderOptions;
+		locals?: Record<string, string>;
 	}
 ): string {
 	const localsJsonString = JSON.stringify(JSON.stringify(context.locals));
@@ -53,7 +53,7 @@ function hotLoader(
         var cssReload = require(${stringifyRequest(
 					context.loaderContext,
 					path.join(__dirname, "hmr/hotModuleReplacement.js")
-				)})(module.id, ${JSON.stringify(context.options)});
+				)}).cssReload(module.id, ${JSON.stringify(context.options ?? {})});
         // only invalidate when locals change
         if (
           module.hot.data &&

tests/plugin-test/css-extract/HMR.test.js

@@ -5,6 +5,7 @@
 /* eslint-disable no-console */
 
 const hotModuleReplacement = require("../../../packages/rspack/dist/builtin-plugin/css-extract/hmr/hotModuleReplacement").cssReload;
+const hotLoader = require("../../../packages/rspack/dist/builtin-plugin/css-extract/loader").hotLoader;
 
 function getLoadEvent() {
 	const event = document.createEvent("Event");
@@ -361,4 +362,29 @@ describe("HMR", () => {
 			done();
 		}, 100);
 	});
+
+	it("hotLoader works for non-locals", () => {
+    const o = Date.now;
+    Date.now = () => 1;
+    const code = hotLoader("//content;", {
+      loaderContext: {
+        context: __dirname,
+      },
+    });
+    Date.now = o;
+    expect(code).toMatchSnapshot();
+  });
+
+  it("hotLoader works for locals", () => {
+    const o = Date.now;
+    Date.now = () => 1;
+    const code = hotLoader("//content;", {
+      loaderContext: {
+        context: __dirname,
+      },
+      locals: { foo: "bar" },
+    });
+    Date.now = o;
+    expect(code).toMatchSnapshot();
+  });
 });

tests/plugin-test/css-extract/__snapshots__/HMR.test.js.snap

@@ -1,5 +1,57 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`HMR hotLoader works for locals 1`] = `
+"//content;
+    if(module.hot) {
+      (function() {
+        var localsJsonString = \\"{\\\\\\"foo\\\\\\":\\\\\\"bar\\\\\\"}\\";
+        // 1
+        var cssReload = require(\\"../../../packages/rspack/dist/builtin-plugin/css-extract/hmr/hotModuleReplacement.js\\").cssReload(module.id, {});
+        // only invalidate when locals change
+        if (
+          module.hot.data &&
+          module.hot.data.value &&
+          module.hot.data.value !== localsJsonString
+        ) {
+          module.hot.invalidate();
+        } else {
+          module.hot.accept();
+        }
+        module.hot.dispose(function(data) {
+          data.value = localsJsonString;
+          cssReload();
+        });
+      })();
+    }
+  "
+`;
+
+exports[`HMR hotLoader works for non-locals 1`] = `
+"//content;
+    if(module.hot) {
+      (function() {
+        var localsJsonString = undefined;
+        // 1
+        var cssReload = require(\\"../../../packages/rspack/dist/builtin-plugin/css-extract/hmr/hotModuleReplacement.js\\").cssReload(module.id, {});
+        // only invalidate when locals change
+        if (
+          module.hot.data &&
+          module.hot.data.value &&
+          module.hot.data.value !== localsJsonString
+        ) {
+          module.hot.invalidate();
+        } else {
+          module.hot.accept();
+        }
+        module.hot.dispose(function(data) {
+          data.value = localsJsonString;
+          cssReload();
+        });
+      })();
+    }
+  "
+`;
+
 exports[`HMR should handle error event 1`] = `"[HMR] css reload %s"`;
 
 exports[`HMR should handle error event 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;

tests/plugin-test/css-extract/cases/hmr-locals/expected/main.css

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