diff --git a/napi/src/lib.rs b/napi/src/lib.rs index 18bbd7e4..dff48805 100644 --- a/napi/src/lib.rs +++ b/napi/src/lib.rs @@ -606,6 +606,7 @@ struct CssModulesConfig { pattern: Option, dashed_idents: Option, animation: Option, + container: Option, grid: Option, custom_idents: Option, pure: Option, @@ -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(), diff --git a/src/css_modules.rs b/src/css_modules.rs index 65e8543a..ce7008df 100644 --- a/src/css_modules.rs +++ b/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, } diff --git a/src/lib.rs b/src/lib.rs index 180f4fdc..3abb7e32 100644 --- a/src/lib.rs +++ b/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( diff --git a/src/rules/container.rs b/src/rules/container.rs index e08a824e..a911d33b 100644 --- a/src/rules/container.rs +++ b/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, + }, + ) } }