web-infra-dev · ahabhgk · May 15, 2024 · Apr 26, 2024 · Apr 26, 2024 · Apr 26, 2024
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/crates/node_binding/binding.d.ts b/crates/node_binding/binding.d.ts
@@ -772,6 +772,7 @@ export interface RawCssAutoGeneratorOptions {
   exportsConvention?: "as-is" | "camel-case" | "camel-case-only" | "dashes" | "dashes-only"
   exportsOnly?: boolean
   localIdentName?: string
+  esModule?: boolean
 }
 
 export interface RawCssAutoParserOptions {
@@ -792,12 +793,14 @@ export interface RawCssExtractPluginOption {
 export interface RawCssGeneratorOptions {
   exportsConvention?: "as-is" | "camel-case" | "camel-case-only" | "dashes" | "dashes-only"
   exportsOnly?: boolean
+  esModule?: boolean
 }
 
 export interface RawCssModuleGeneratorOptions {
   exportsConvention?: "as-is" | "camel-case" | "camel-case-only" | "dashes" | "dashes-only"
   exportsOnly?: boolean
   localIdentName?: string
+  esModule?: boolean
 }
 
 export interface RawCssModuleParserOptions {

diff --git a/crates/rspack_binding_options/src/options/raw_module/mod.rs b/crates/rspack_binding_options/src/options/raw_module/mod.rs
@@ -622,13 +622,15 @@ pub struct RawCssGeneratorOptions {
   #[napi(ts_type = r#""as-is" | "camel-case" | "camel-case-only" | "dashes" | "dashes-only""#)]
   pub exports_convention: Option<String>,
   pub exports_only: Option<bool>,
+  pub es_module: Option<bool>,
 }
 
 impl From<RawCssGeneratorOptions> for CssGeneratorOptions {
   fn from(value: RawCssGeneratorOptions) -> Self {
     Self {
       exports_convention: value.exports_convention.map(|n| n.into()),
       exports_only: value.exports_only,
+      es_module: value.es_module,
     }
   }
 }
@@ -640,6 +642,7 @@ pub struct RawCssAutoGeneratorOptions {
   pub exports_convention: Option<String>,
   pub exports_only: Option<bool>,
   pub local_ident_name: Option<String>,
+  pub es_module: Option<bool>,
 }
 
 impl From<RawCssAutoGeneratorOptions> for CssAutoGeneratorOptions {
@@ -648,6 +651,7 @@ impl From<RawCssAutoGeneratorOptions> for CssAutoGeneratorOptions {
       exports_convention: value.exports_convention.map(|n| n.into()),
       exports_only: value.exports_only,
       local_ident_name: value.local_ident_name.map(|n| n.into()),
+      es_module: value.es_module,
     }
   }
 }
@@ -659,6 +663,7 @@ pub struct RawCssModuleGeneratorOptions {
   pub exports_convention: Option<String>,
   pub exports_only: Option<bool>,
   pub local_ident_name: Option<String>,
+  pub es_module: Option<bool>,
 }
 
 impl From<RawCssModuleGeneratorOptions> for CssModuleGeneratorOptions {
@@ -667,6 +672,7 @@ impl From<RawCssModuleGeneratorOptions> for CssModuleGeneratorOptions {
       exports_convention: value.exports_convention.map(|n| n.into()),
       exports_only: value.exports_only,
       local_ident_name: value.local_ident_name.map(|n| n.into()),
+      es_module: value.es_module,
     }
   }
 }

diff --git a/crates/rspack_core/src/options/module.rs b/crates/rspack_core/src/options/module.rs
@@ -337,20 +337,23 @@ impl From<String> for DataUrlEncoding {
 pub struct CssGeneratorOptions {
   pub exports_convention: Option<CssExportsConvention>,
   pub exports_only: Option<bool>,
+  pub es_module: Option<bool>,
 }
 
 #[derive(Debug, Clone, MergeFrom)]
 pub struct CssAutoGeneratorOptions {
   pub exports_convention: Option<CssExportsConvention>,
   pub exports_only: Option<bool>,
   pub local_ident_name: Option<LocalIdentName>,
+  pub es_module: Option<bool>,
 }
 
 #[derive(Debug, Clone, MergeFrom)]
 pub struct CssModuleGeneratorOptions {
   pub exports_convention: Option<CssExportsConvention>,
   pub exports_only: Option<bool>,
   pub local_ident_name: Option<LocalIdentName>,
+  pub es_module: Option<bool>,
 }
 
 #[derive(Debug, Clone, MergeFrom)]

diff --git a/crates/rspack_plugin_css/src/parser_and_generator/mod.rs b/crates/rspack_plugin_css/src/parser_and_generator/mod.rs
@@ -60,6 +60,7 @@ pub struct CssParserAndGenerator {
   pub exports_only: bool,
   pub named_exports: bool,
   pub exports: Option<CssExportsType>,
+  pub es_module: bool,
 }
 
 impl ParserAndGenerator for CssParserAndGenerator {
@@ -180,7 +181,6 @@ impl ParserAndGenerator for CssParserAndGenerator {
         exports.insert(key, vec![value]);
       }
 
-      exports.sort_keys();
       let normalized_exports = IndexMap::from_iter(
         exports
           .iter()
@@ -342,30 +342,39 @@ impl ParserAndGenerator for CssParserAndGenerator {
             )?;
           }
           return Ok(concate_source.boxed());
-        } else if let Some(exports) = &self.exports {
-          css_modules_exports_to_string(
-            exports,
-            module,
-            generate_context.compilation,
-            generate_context.runtime_requirements,
-          )?
-        } else if generate_context.compilation.options.dev_server.hot {
-          format!(
-            "module.hot.accept();\n{}(module.exports = {{}});\n",
-            RuntimeGlobals::MAKE_NAMESPACE_OBJECT
-          )
         } else {
-          format!(
-            "{}(module.exports = {{}})\n",
-            RuntimeGlobals::MAKE_NAMESPACE_OBJECT
-          )
+          let (ns_obj, left, right) = if self.es_module {
+            (RuntimeGlobals::MAKE_NAMESPACE_OBJECT.name(), "(", ")")
+          } else {
+            ("", "", "")
+          };
+          if let Some(exports) = &self.exports {
+            css_modules_exports_to_string(
+              exports,
+              module,
+              generate_context.compilation,
+              generate_context.runtime_requirements,
+              ns_obj,
+              left,
+              right,
+            )?
+          } else if generate_context.compilation.options.dev_server.hot {
+            format!(
+              "module.hot.accept();\n{}{}module.exports = {{}}{};\n",
+              ns_obj, left, right
+            )
+          } else {
+            format!("{}{}module.exports = {{}}{};\n", ns_obj, left, right)
+          }
         };
         generate_context
           .runtime_requirements
           .insert(RuntimeGlobals::MODULE);
-        generate_context
-          .runtime_requirements
-          .insert(RuntimeGlobals::MAKE_NAMESPACE_OBJECT);
+        if self.es_module {
+          generate_context
+            .runtime_requirements
+            .insert(RuntimeGlobals::MAKE_NAMESPACE_OBJECT);
+        }
         Ok(RawSource::from(exports).boxed())
       }
       _ => panic!(

diff --git a/crates/rspack_plugin_css/src/plugin/impl_plugin_for_css_plugin.rs b/crates/rspack_plugin_css/src/plugin/impl_plugin_for_css_plugin.rs
@@ -343,6 +343,7 @@ impl Plugin for CssPlugin {
           local_ident_name: None,
           exports_only: g.exports_only.expect("should have exports_only"),
           named_exports: p.named_exports.expect("should have named_exports"),
+          es_module: g.es_module.expect("should have es_module"),
         }) as Box<dyn ParserAndGenerator>
       }),
     );
@@ -367,6 +368,7 @@ impl Plugin for CssPlugin {
           ),
           exports_only: g.exports_only.expect("should have exports_only"),
           named_exports: p.named_exports.expect("should have named_exports"),
+          es_module: g.es_module.expect("should have es_module"),
         }) as Box<dyn ParserAndGenerator>
       }),
     );
@@ -391,6 +393,7 @@ impl Plugin for CssPlugin {
           ),
           exports_only: g.exports_only.expect("should have exports_only"),
           named_exports: p.named_exports.expect("should have named_exports"),
+          es_module: g.es_module.expect("should have es_module"),
         }) as Box<dyn ParserAndGenerator>
       }),
     );

diff --git a/crates/rspack_plugin_css/src/utils.rs b/crates/rspack_plugin_css/src/utils.rs
@@ -177,11 +177,11 @@ pub fn css_modules_exports_to_string(
   module: &dyn rspack_core::Module,
   compilation: &Compilation,
   runtime_requirements: &mut RuntimeGlobals,
+  ns_obj: &str,
+  left: &str,
+  right: &str,
 ) -> Result<String> {
-  let mut code = format!(
-    "{}(module.exports = {{\n",
-    RuntimeGlobals::MAKE_NAMESPACE_OBJECT
-  );
+  let mut code = format!("{}{}module.exports = {{\n", ns_obj, left);
   let module_graph = compilation.get_module_graph();
   for (key, elements) in exports {
     let content = elements
@@ -221,7 +221,9 @@ pub fn css_modules_exports_to_string(
       writeln!(code, "  {}: {},", item, content).map_err(|e| error!(e.to_string()))?;
     }
   }
-  code += "});\n";
+  code += "}";
+  code += right;
+  code += ";\n";
   Ok(code)
 }
 

diff --git a/packages/rspack-test-tools/tests/__snapshots__/Defaults.test.js.snap b/packages/rspack-test-tools/tests/__snapshots__/Defaults.test.js.snap
@@ -147,15 +147,18 @@ Object {
     ],
     "generator": Object {
       "css": Object {
+        "esModule": true,
         "exportsConvention": "as-is",
         "exportsOnly": false,
       },
       "css/auto": Object {
+        "esModule": true,
         "exportsConvention": "as-is",
         "exportsOnly": false,
         "localIdentName": "[uniqueName]-[id]-[local]",
       },
       "css/module": Object {
+        "esModule": true,
         "exportsConvention": "as-is",
         "exportsOnly": false,
         "localIdentName": "[uniqueName]-[id]-[local]",

diff --git a/...est-tools/tests/builtinCases/plugin-css-modules/modules-composes/snapshot/output.snap.txt b/...est-tools/tests/builtinCases/plugin-css-modules/modules-composes/snapshot/output.snap.txt
@@ -34,30 +34,30 @@ __webpack_require__.r(__webpack_exports__);
 "./b.module.css": (function (module, __unused_webpack_exports, __webpack_require__) {
 "use strict";
 __webpack_require__.r(module.exports = {
-  "b": "___b_module____b--___eca6dd2253f6b569_eca" + " " + "___b_module____b-1--___eca6dd2253f6b569_eca",
   "b-1": "___b_module____b-1--___eca6dd2253f6b569_eca",
+  "b": "___b_module____b--___eca6dd2253f6b569_eca" + " " + "___b_module____b-1--___eca6dd2253f6b569_eca",
 });
 }),
 "./d.module.css": (function (module, __unused_webpack_exports, __webpack_require__) {
 "use strict";
 __webpack_require__.r(module.exports = {
-  "d": "___d_module____d--___a41e34edaa1ca3c_a41" + " " + "___d_module____d-1--___a41e34edaa1ca3c_a41",
   "d-1": "___d_module____d-1--___a41e34edaa1ca3c_a41",
+  "d": "___d_module____d--___a41e34edaa1ca3c_a41" + " " + "___d_module____d-1--___a41e34edaa1ca3c_a41",
 });
 }),
 "./f.module.css": (function (module, __unused_webpack_exports, __webpack_require__) {
 "use strict";
 __webpack_require__.r(module.exports = {
-  "f": "___f_module____f--___af10a85c64a6b515_af1" + " " + "___f_module____f-1--___af10a85c64a6b515_af1",
   "f-1": "___f_module____f-1--___af10a85c64a6b515_af1",
+  "f": "___f_module____f--___af10a85c64a6b515_af1" + " " + "___f_module____f-1--___af10a85c64a6b515_af1",
 });
 }),
 "./style.module.css": (function (module, __unused_webpack_exports, __webpack_require__) {
 "use strict";
 __webpack_require__.r(module.exports = {
-  "chain1": "___style_module____chain1--___afc435275e612570_afc" + " " + "___style_module____chain2--___afc435275e612570_afc" + " " + "c" + " " + __webpack_require__("./d.module.css")["d"] + " " + "e" + " " + __webpack_require__("./f.module.css")["f"],
   "chain2": "___style_module____chain2--___afc435275e612570_afc" + " " + "e" + " " + __webpack_require__("./f.module.css")["f"],
-  "root-class": "___style_module____root-class--___afc435275e612570_afc" + " " + "___style_module____chain1--___afc435275e612570_afc" + " " + "a" + " " + __webpack_require__("./b.module.css")["b"] + " " + "___style_module____chain2--___afc435275e612570_afc" + " " + "c" + " " + __webpack_require__("./d.module.css")["d"] + " " + "e" + " " + __webpack_require__("./f.module.css")["f"],
+  "chain1": "___style_module____chain1--___afc435275e612570_afc" + " " + "___style_module____chain2--___afc435275e612570_afc" + " " + "e" + " " + "c" + " " + __webpack_require__("./f.module.css")["f"] + " " + __webpack_require__("./d.module.css")["d"],
+  "root-class": "___style_module____chain2--___afc435275e612570_afc" + " " + "___style_module____root-class--___afc435275e612570_afc" + " " + "___style_module____chain1--___afc435275e612570_afc" + " " + "e" + " " + "c" + " " + "a" + " " + __webpack_require__("./f.module.css")["f"] + " " + __webpack_require__("./d.module.css")["d"] + " " + __webpack_require__("./b.module.css")["b"],
 });
 }),
 

diff --git a/packages/rspack-test-tools/tests/builtinCases/plugin-html/variant/snapshot/output.snap.txt b/packages/rspack-test-tools/tests/builtinCases/plugin-html/variant/snapshot/output.snap.txt
@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <title>Rspack App</title>
-<script src="/runtime.js" crossorigin="anonymous" integrity="sha512-r9JAbyVBCdPQTowSuE23gZIsAL1UyY70qFDRL6XjC7duu7eezZxG0fbii74IixeMcxk34e1Lkhe9UKG4p9M9EQ=="></script><script src="/index.js" crossorigin="anonymous" integrity="sha512-skfk+E/xLjpvZMv7f/aa4RcoP3t1FWVQ7reE8TtePgtWAUx5+GVsBS04B3u7B32zjy6UdN3i/xCYzDUwuKE6aQ=="></script><link href="/index.css" rel="stylesheet" crossorigin="anonymous" integrity="sha512-vjhejkvTX8D8jzzC5Lc9ToCtcEDb0/NqtYmEHOid+ycq64hvW+JTG7Dw/ACFP6rApgiYwVMbEt6Zfb8j4EoZTA==" /></head>
+<script src="/runtime.js" crossorigin="anonymous" integrity="sha512-r9JAbyVBCdPQTowSuE23gZIsAL1UyY70qFDRL6XjC7duu7eezZxG0fbii74IixeMcxk34e1Lkhe9UKG4p9M9EQ=="></script><script src="/index.js" crossorigin="anonymous" integrity="sha512-l6sRQvbktXxqSDLGsWoCN587mmv9w3ZFak5/BxjtTQti+setTVc0ssQwC5jtjKMCW6maYvL8zvl/DhCKRi7S6w=="></script><link href="/index.css" rel="stylesheet" crossorigin="anonymous" integrity="sha512-vjhejkvTX8D8jzzC5Lc9ToCtcEDb0/NqtYmEHOid+ycq64hvW+JTG7Dw/ACFP6rApgiYwVMbEt6Zfb8j4EoZTA==" /></head>
 
 <body>
 

diff --git a/packages/rspack-test-tools/tests/defaultsCases/experiments/future-defaults-with-css.js b/packages/rspack-test-tools/tests/defaultsCases/experiments/future-defaults-with-css.js
@@ -25,7 +25,8 @@ module.exports = {
 		-         },
 		-         "test": /\\.css$/i,
 		-         "type": "css/auto",
-		@@ ... @@
+		-       },
+		-       Object {
 		-         "mimetype": "text/css+module",
 		-         "resolve": Object {
 		-           "fullySpecified": true,
@@ -38,39 +39,40 @@ module.exports = {
 		-         "resolve": Object {
 		-           "fullySpecified": true,
 		-           "preferRelative": true,
-		-         },
+		@@ ... @@
 		-         "type": "css",
 		-       },
-		-       Object {
 		@@ ... @@
 		-     "generator": Object {
 		-       "css": Object {
+		-         "esModule": true,
 		-         "exportsConvention": "as-is",
 		-         "exportsOnly": false,
 		-       },
 		-       "css/auto": Object {
+		-         "esModule": true,
 		-         "exportsConvention": "as-is",
 		-         "exportsOnly": false,
 		-         "localIdentName": "[uniqueName]-[id]-[local]",
 		-       },
 		-       "css/module": Object {
+		-         "esModule": true,
 		-         "exportsConvention": "as-is",
 		-         "exportsOnly": false,
 		-         "localIdentName": "[uniqueName]-[id]-[local]",
 		-       },
 		-     },
 		+     "generator": Object {},
 		@@ ... @@
-		-         },
-		-       },
 		-       "css": Object {
 		-         "namedExports": true,
-		@@ ... @@
+		-       },
 		-       "css/auto": Object {
 		-         "namedExports": true,
 		-       },
 		-       "css/module": Object {
 		-         "namedExports": true,
+		-       },
 		@@ ... @@
 		-         "css",
 		@@ ... @@
@@ -79,21 +81,21 @@ module.exports = {
 		+     "hashDigestLength": 16,
 		+     "hashFunction": "xxhash64",
 		@@ ... @@
+		-           "...",
 		-         ],
 		-       },
 		-       "css-import": Object {
 		-         "conditionNames": Array [
 		-           "webpack",
 		-           "production",
 		-           "style",
-		@@ ... @@
+		-         ],
 		-         "extensions": Array [
 		-           ".css",
 		-         ],
 		-         "mainFields": Array [
 		-           "style",
-		-           "...",
-		-         ],
+		@@ ... @@
 		-         "mainFiles": Array [],
 		-         "preferRelative": true,
 	`)