fix: use match resource first when generating css local ident name

crates/rspack_core/src/normal_module.rs

@@ -613,6 +613,7 @@ impl Module for NormalModule {
         module_type: &inner.module_type,
         module_layer: inner.layer.as_ref(),
         module_user_request: &inner.user_request,
+        module_match_resource: inner.match_resource.as_ref(),
         module_source_map_kind: inner.source_map_kind,
         loaders: &inner.loaders,
         resource_data: &inner.resource_data,

crates/rspack_core/src/parser_and_generator.rs

@@ -31,6 +31,7 @@ pub struct ParseContext<'a> {
   pub module_user_request: &'a str,
   pub module_parser_options: Option<&'a ParserOptions>,
   pub module_source_map_kind: SourceMapKind,
+  pub module_match_resource: Option<&'a ResourceData>,
   #[debug(skip)]
   pub loaders: &'a [BoxLoader],
   pub resource_data: &'a ResourceData,

crates/rspack_plugin_css/src/parser_and_generator/mod.rs

@@ -117,6 +117,7 @@ impl ParserAndGenerator for CssParserAndGenerator {
       build_info,
       build_meta,
       loaders,
+      module_match_resource,
       ..
     } = parse_context;
 
@@ -134,6 +135,7 @@ impl ParserAndGenerator for CssParserAndGenerator {
 
     let source = remove_bom(source);
     let source_code = source.source().into_string_lossy();
+    let resource_data = module_match_resource.unwrap_or(resource_data);
     let resource_path = resource_data.path();
     let cached_source_code = OnceCell::new();
     let get_source_code = || {

crates/rspack_plugin_css/src/runtime/css_loading_with_loading.ejs

@@ -48,7 +48,9 @@
 						}
 					}
 				};
-				var link = loadStylesheet(chunkId, url, loadingEnded, undefined, fetchPriority);
+				if (typeof document !== 'undefined') {
+					loadStylesheet(chunkId, url, loadingEnded, undefined, fetchPriority);
+				} else { loadingEnded({ type: 'load' }); }
 			} else installedChunks[chunkId] = 0;
 		}
 	}

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

@@ -11,8 +11,11 @@ it("should correctly compile css/auto", () => {
 	expect(style.getPropertyValue("background")).toBe("rgb(255, 0, 0)");
 	expect(style1.class).toBe("_style1_module_less-class");
 	expect(style2.class).toBe("_style2_modules_less-class");
-	// DIFF: rspack not generate loader path in ident name
-	expect(style3.class).toBe("_style3_module_js-class");
-	expect(style4.class).toBe("_style4_module_less_loader_js_style4_js-class");
-	expect(style5.class).toBe("_style5_module_css_loader_js_style4_js-class");
+	// DIFF: should use module id instead of relative path
+	// expect(style3.class).toBe("_style3_module_less_loader_js_style3_module_js-class");
+	// expect(style4.class).toBe("_style4_module_less_loader_js_style4_js-class");
+	// expect(style5.class).toBe("_style5_module_css_loader_js_style4_js-class");
+	expect(style3.class).toBe("_style3_module_less-class");
+	expect(style4.class).toBe("_style4_module_less-class");
+	expect(style5.class).toBe("_style5_module_css-class");
 });

tests/rspack-test/configCases/css/css-order-concatenate-modules/__snapshot__/main.css.txt

@@ -0,0 +1 @@
+.c{    color: black;}.b{    color: green;}.a {    color: red;}

tests/rspack-test/configCases/css/css-order-concatenate-modules/index.js

@@ -4,10 +4,11 @@ c()
 b()
 a()
 
-it("keep consistent css order", function() {
+it("keep consistent css order", function () {
 	const fs = __non_webpack_require__("fs");
+	const path = __non_webpack_require__("path");
 	let source = fs.readFileSync(__dirname + "/main.css", "utf-8");
-	expect(removeComments(source)).toMatchSnapshot()
+	expect(removeComments(source)).toMatchFileSnapshot(path.join(__SNAPSHOT__, 'main.css.txt'))
 });
 
 function removeComments(source) {

tests/rspack-test/configCases/css/css-order-concatenate-modules/rspack.config.js

@@ -11,6 +11,9 @@ module.exports = {
 	optimization: {
 		concatenateModules: true
 	},
+	experiments: {
+		css: false
+	},
 	module: {
 		rules: [
 			{

tests/rspack-test/configCases/css/css-order-reexport/__snapshot__/main.css.txt

@@ -0,0 +1 @@
+.dependency::before {	content: "dependency";}.dependency2::before {	content: "dependency2";}

tests/rspack-test/configCases/css/css-order-reexport/index.js

@@ -3,10 +3,11 @@ component(dependency, dependency2);
 
 // https://github.com/webpack/webpack/issues/18961
 // https://github.com/jantimon/reproduction-webpack-css-order
-it("keep consistent css order", function() {
+it("keep consistent css order", function () {
 	const fs = __non_webpack_require__("fs");
+	const path = __non_webpack_require__("path");
 	let source = fs.readFileSync(__dirname + "/main.css", "utf-8");
-	expect(removeComments(source)).toMatchSnapshot()
+	expect(removeComments(source)).toMatchFileSnapshot(path.join(__SNAPSHOT__, 'main.css.txt'))
 });
 
 function removeComments(source) {

tests/rspack-test/configCases/css/css-order-reexport/rspack.config.js

@@ -11,6 +11,9 @@ module.exports = {
 	optimization: {
 		concatenateModules: false
 	},
+	experiments: {
+		css: false
+	},
 	module: {
 		rules: [
 			{

tests/rspack-test/configCases/css/css-order/__snapshot__/main.css.txt

@@ -0,0 +1 @@
+.teaser-module {  padding: 20px;  border: 1px solid #ddd;  border-radius: 8px;  margin: 16px;}.teaser-module {  background-color: orange;}.button-module {  padding: 8px 16px;  background-color: #007bff;  color: white;  border: none;  border-radius: 4px;}

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

@@ -4,10 +4,11 @@ document.body.innerHTML = Teaser();
 
 // https://github.com/webpack/webpack/issues/18961
 // https://github.com/jantimon/reproduction-webpack-css-order
-it("keep consistent css order", function() {
+it("keep consistent css order", function () {
 	const fs = __non_webpack_require__("fs");
+	const path = __non_webpack_require__("path");
 	let source = fs.readFileSync(__dirname + "/main.css", "utf-8");
-	expect(removeComments(source)).toMatchSnapshot()
+	expect(removeComments(source)).toMatchFileSnapshot(path.join(__SNAPSHOT__, 'main.css.txt'))
 });
 
 function removeComments(source) {

tests/rspack-test/configCases/css/css-order/package.json

@@ -2,7 +2,5 @@
   "name": "css-order",
   "version": "1.0.0",
   "sideEffects": false,
-  "devDependencies": {
-    "mini-css-extract-plugin": "^2.9.4"
-  }
-}
+  "devDependencies": {}
+}

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

@@ -11,13 +11,16 @@ module.exports = {
 	optimization: {
 		concatenateModules: false
 	},
+	experiments: {
+		css: false
+	},
 	module: {
 		rules: [
 			{
 				test: /\.module\.css$/,
 				use: [
 					{
-						loader: MiniCssExtractPlugin.loader
+						loader: MiniCssExtractPlugin.loader,
 					},
 					{
 						loader: "css-loader",

tests/rspack-test/configCases/css/css-order2/__snapshot__/main.css.txt

@@ -0,0 +1 @@
+.dependency::before {	content: "dependency";}.dependency2::before {	content: "dependency2";}

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

@@ -3,10 +3,11 @@ component()
 
 // https://github.com/webpack/webpack/issues/18961
 // https://github.com/jantimon/reproduction-webpack-css-order
-it("keep consistent css order", function() {
+it("keep consistent css order", function () {
 	const fs = __non_webpack_require__("fs");
+	const path = __non_webpack_require__("path");
 	let source = fs.readFileSync(__dirname + "/main.css", "utf-8");
-	expect(removeComments(source)).toMatchSnapshot()
+	expect(removeComments(source)).toMatchFileSnapshot(path.join(__SNAPSHOT__, 'main.css.txt'))
 });
 
 function removeComments(source) {

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

@@ -11,6 +11,9 @@ module.exports = {
 	optimization: {
 		concatenateModules: false
 	},
+	experiments: {
+		css: false
+	},
 	module: {
 		rules: [
 			{

tests/rspack-test/configCases/css/css-order3/__snapshot__/main.css.txt

@@ -0,0 +1 @@
+.dependency3::before {	content: "dependency3";}.dependency::before {	content: "dependency";}.dependency2::before {	content: "dependency2";}

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

@@ -3,10 +3,11 @@ component()
 
 // https://github.com/webpack/webpack/issues/18961
 // https://github.com/jantimon/reproduction-webpack-css-order
-it("keep consistent css order", function() {
+it("keep consistent css order", function () {
 	const fs = __non_webpack_require__("fs");
+	const path = __non_webpack_require__("path");
 	let source = fs.readFileSync(__dirname + "/main.css", "utf-8");
-	expect(removeComments(source)).toMatchSnapshot()
+	expect(removeComments(source)).toMatchFileSnapshot(path.join(__SNAPSHOT__, 'main.css.txt'))
 });
 
 function removeComments(source) {

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

@@ -11,6 +11,9 @@ module.exports = {
 	optimization: {
 		concatenateModules: false
 	},
+	experiments: {
+		css: false
+	},
 	module: {
 		rules: [
 			{

tests/rspack-test/configCases/css/external-in-web/dynamic.css

@@ -1,2 +1,2 @@
 @import "style2.css";
-@import "https://test.cases/path/@rspack/coreconfigCases/css/external-in-web/dynamic-external.css";
+@import "https://test.cases/root/configCases/css/external-in-web/dynamic-external.css";

tests/rspack-test/configCases/css/external-in-web/index.js

@@ -1,29 +1,29 @@
 import * as style from "./style.css";
 
-it("should import an external CSS inside CSS", () => {
-	const bodyStyle = getComputedStyle(document.body);
+it("should import an external CSS inside CSS", async () => {
+	const links = Array.from(Object.values(window["__LINK_SHEET__"]));
+	const css = links.join("\n");
 
-	expect(bodyStyle.getPropertyValue("color")).toBe(" green");
-	expect(bodyStyle.getPropertyValue("padding")).toBe(" 10px");
+	expect(css).toContain("color: green");
+	expect(css).toContain("padding: 10px");
 });
 
 // import * as style1 from "http://test.com/import.css";
 
 it("should work with an external URL", () => {
-	const url = new URL("https://test.cases/url-external.css", import.meta.url);
+	const url = new URL("https://test.cases/path/url-external.css", import.meta.url);
 
 	expect(url.toString().endsWith("url-external.css")).toBe(true);
 });
 
 it("should import an external css dynamically", async () => {
 	const x = await import("./dynamic.css");
-	expect(x).toEqual({});
-	const bodyStyle = getComputedStyle(document.body);
-	expect(bodyStyle.getPropertyValue("color")).toBe(" red");
-	expect(bodyStyle.getPropertyValue("background")).toBe(
-		" url(//example.com/image.png) url(https://example.com/image.png)"
-	);
-	expect(bodyStyle.getPropertyValue("background-image")).toBe(
-		" url(http://example.com/image.png)"
-	);
+	expect(Object.keys(x)).toEqual([]);
+
+	const links = Array.from(Object.values(window["__LINK_SHEET__"]));
+	const css = links.join("\n");
+
+	expect(css).toContain("color: red");
+	expect(css).toContain("background: url(//example.com/image.png) url(https://example.com/image.png)");
+	expect(css).toContain("background-image: url(http://example.com/image.png)");
 });

tests/rspack-test/configCases/css/external-in-web/rspack.config.js

@@ -11,14 +11,14 @@ module.exports = [
 			css: true
 		}
 	},
-	{
-		target: "web",
-		optimization: {
-			chunkIds: "named"
-		},
-		experiments: {
-			css: true,
-			outputModule: true
-		}
-	}
+	// {
+	// 	target: "web",
+	// 	optimization: {
+	// 		chunkIds: "named"
+	// 	},
+	// 	experiments: {
+	// 		css: true,
+	// 		outputModule: true
+	// 	}
+	// }
 ];

tests/rspack-test/configCases/css/external-in-web/style.css

@@ -1,4 +1,4 @@
-@import "https://test.cases/path/@rspack/coreconfigCases/css/external-in-web/external.css";
+@import "https://test.cases/root/configCases/css/external-in-web/external.css";
 
 body {
 	padding: 10px;

tests/rspack-test/configCases/css/external-in-web/test.config.js

@@ -2,12 +2,15 @@
 
 module.exports = {
 	moduleScope(scope, stats, options) {
-		const link = scope.window.document.createElement("link");
-		link.rel = "stylesheet";
-		link.href = options.experiments.outputModule ? "bundle1.css" : "bundle0.css";
-		scope.window.document.head.appendChild(link);
 	},
 	findBundle(i) {
-		return i === 0 ? ["dynamic_css.bundle0.js", "bundle0.js"] : ["bundle1.mjs"];
+		return i === 0 ? [
+			// "dynamic_css.bundle0.js",
+			"bundle0.css",
+			"bundle0.js"
+		] : [
+			"bundle1.css",
+			"bundle1.mjs"
+		];
 	}
 };

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

@@ -1,4 +1,5 @@
 import "./style.css";
+import path from "path";
 
 it("should compile", () => {
 	const links = document.getElementsByTagName("link");
@@ -9,5 +10,5 @@ it("should compile", () => {
 		css.push(link.sheet.css);
 	}
 
-	expect(css).toMatchSnapshot();
+	expect(css).toMatchFileSnapshot(path.join(__SNAPSHOT__, 'bundle0.css.txt'));
 });

tests/rspack-test/configCases/css/import/style.css

@@ -61,8 +61,8 @@
 @import url(style2.css) screen and (orientation:landscape);
 @import url(style2.css) screen and (orientation:landscape);
 @import url(style2.css) (min-width: 100px);
-@import url(https://test.cases/path/@rspack/coreconfigCases/css/import/external.css);
-@import url(https://test.cases/path/@rspack/coreconfigCases/css/import/external.css) screen and (orientation:landscape);
+@import url(https://test.cases/root/configCases/css/import/external.css);
+@import url(https://test.cases/root/configCases/css/import/external.css) screen and (orientation:landscape);
 @import "//example.com/style.css";
 @import url('test.css?foo=1&bar=1');
 @import url('style2.css?foo=1&bar=1#hash');

tests/rspack-test/configCases/css/import/style10.css

@@ -1,5 +1,5 @@
 @import url(./style11.css);
-@import url(https://test.cases/path/@rspack/coreconfigCases/css/import/external1.css);
+@import url(https://test.cases/root/configCases/css/import/external1.css);
 @import url(./style12.css);
 @import url(./style13.css);
 

tests/rspack-test/configCases/css/import/style12.css

@@ -1,4 +1,4 @@
-@import url(https://test.cases/path/@rspack/coreconfigCases/css/import/external2.css);
+@import url(https://test.cases/root/configCases/css/import/external2.css);
 
 .style12 {
 	color: red;

tests/rspack-test/configCases/css/import/style13.css

@@ -1,4 +1,4 @@
-@import url(https://test.cases/path/@rspack/coreconfigCases/css/import/external2.css);
+@import url(https://test.cases/root/configCases/css/import/external2.css);
 
 div {
   color: red;