fix(css-modules): Do not transform the container name in CSS Modules (parcel-bundler#835)

Author: kdy1

napi/src/lib.rs

@@ -606,6 +606,7 @@ struct CssModulesConfig {
   pattern: Option<String>,
   dashed_idents: Option<bool>,
   animation: Option<bool>,
+  container: Option<bool>,
   grid: Option<bool>,
   custom_idents: Option<bool>,
   pure: Option<bool>,
@@ -718,6 +719,7 @@ fn compile<'i>(
               },
               dashed_idents: c.dashed_idents.unwrap_or_default(),
               animation: c.animation.unwrap_or(true),
+              container: c.container.unwrap_or(true),
               grid: c.grid.unwrap_or(true),
               custom_idents: c.custom_idents.unwrap_or(true),
               pure: c.pure.unwrap_or_default(),
@@ -849,6 +851,7 @@ fn compile_bundle<
             },
             dashed_idents: c.dashed_idents.unwrap_or_default(),
             animation: c.animation.unwrap_or(true),
+            container: c.container.unwrap_or(true),
             grid: c.grid.unwrap_or(true),
             custom_idents: c.custom_idents.unwrap_or(true),
             pure: c.pure.unwrap_or_default(),

src/css_modules.rs

@@ -41,6 +41,9 @@ pub struct Config<'i> {
   /// Whether to scope custom identifiers
   /// Default is `true`.
   pub custom_idents: bool,
+  /// Whether to scope container names.
+  /// Default is `true`.
+  pub container: bool,
   /// Whether to check for pure CSS modules.
   pub pure: bool,
 }
@@ -52,6 +55,7 @@ impl<'i> Default for Config<'i> {
       dashed_idents: Default::default(),
       animation: true,
       grid: true,
+      container: true,
       custom_idents: true,
       pure: false,
     }

src/lib.rs

@@ -24415,6 +24415,58 @@ mod tests {
       },
     );
 
+    css_modules_test(
+      r#"
+      .box2 {
+        @container main (width >= 0) {
+          background-color: #90ee90;
+        }
+      }
+    "#,
+      indoc! {r#"
+      .EgL3uq_box2 {
+        @container EgL3uq_main (width >= 0) {
+          & {
+            background-color: #90ee90;
+          }
+        }
+      }
+    "#},
+      map! {
+        "main" => "EgL3uq_main",
+        "box2" => "EgL3uq_box2"
+      },
+      HashMap::new(),
+      crate::css_modules::Config { ..Default::default() },
+    );
+
+    css_modules_test(
+      r#"
+      .box2 {
+        @container main (width >= 0) {
+          background-color: #90ee90;
+        }
+      }
+    "#,
+      indoc! {r#"
+      .EgL3uq_box2 {
+        @container main (width >= 0) {
+          & {
+            background-color: #90ee90;
+          }
+        }
+      }
+    "#},
+      map! {
+        "box2" => "EgL3uq_box2"
+      },
+      HashMap::new(),
+      crate::css_modules::Config {
+        container: false,
+        ..Default::default()
+      },
+    );
+
     // Stable hashes between project roots.
     fn test_project_root(project_root: &str, filename: &str, hash: &str) {
       let stylesheet = StyleSheet::parse(

src/rules/container.rs

@@ -268,7 +268,15 @@ impl<'i> ToCss for ContainerName<'i> {
   where
     W: std::fmt::Write,
   {
-    self.0.to_css(dest)
+    // Container name should not be hashed
+    // https://github.com/vercel/next.js/issues/71233
+    self.0.to_css_with_options(
+      dest,
+      match &dest.css_module {
+        Some(css_module) => css_module.config.container,
+        None => false,
+      },
+    )
   }
 }