fix: sort css by sourceorder, esm import comes first (#12778)

* fix(core): correct dependency sorting by source_order

Ensure dependencies with None source_order are placed after Some, preserving their relative order.

* test: add test case for css source order with mixed import and require

Author: JSerFeng

crates/rspack_core/src/compilation/build_chunk_graph/code_splitter.rs

@@ -2046,7 +2046,7 @@ Or do you want to use the entrypoints '{name}' and '{runtime}' independently on
           })
           .filter(|dep| !matches!(dep.as_module_dependency().map(|d| d.weak()), Some(true)))
           .collect::<Vec<_>>();
-        deps.sort_by_key(|a| a.source_order());
+        deps.sort_by_key(|a| (a.source_order().is_none(), a.source_order()));
 
         for dep in deps {
           let dep_id = dep.id();

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

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

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

@@ -0,0 +1,8 @@
+import "./style1.css"; // red
+require("./style2.css"); // blue
+
+it("should place style2 before style1", () => {
+	const style = getComputedStyle(document.body);
+	// should be blue
+	expect(style.getPropertyValue("color")).toBe("rgb(0, 0, 255)");
+});

tests/rspack-test/configCases/css/mixed-import-require/rspack.config.js

@@ -0,0 +1,9 @@
+/** @type {import("@rspack/core").Configuration} */
+module.exports = {
+	mode: "development",
+	entry: "./index.js",
+	experiments: {
+		css: true
+	},
+  target: "web"
+};

tests/rspack-test/configCases/css/mixed-import-require/style1.css

@@ -0,0 +1 @@
+body { color: red; }

tests/rspack-test/configCases/css/mixed-import-require/style2.css

@@ -0,0 +1 @@
+body { color: blue; }