Add unique class name to all css props in the same component

jantimon · Dec 20, 2024 · d1efb78 · d1efb78
1 parent 0b0b995
commit d1efb78
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 12 deletions.
diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs
@@ -149,6 +149,7 @@ pub struct TransformCssMixin {
   export_name: Option<ScopedVariableReference>,
   is_exported: bool,
   is_within_jsx_attribute: bool,
+  generated_class_name: Option<String>,
 }
 
 impl TransformCssMixin {
@@ -157,6 +158,7 @@ impl TransformCssMixin {
       export_name: None,
       is_exported,
       is_within_jsx_attribute,
+      generated_class_name: None,
     }
   }
 }
@@ -170,14 +172,14 @@ impl YakTransform for TransformCssMixin {
   ) -> ParserState {
     self.export_name = Some(declaration_name.clone());
     let mut parser_state = ParserState::new();
+    let generated_class_name =
+      naming_convention.generate_unique_name_for_variable(declaration_name);
     // TODO: Remove the unused scope once nested mixins work again
     parser_state.current_scopes = vec![CssScope {
-      name: format!(
-        ".{}",
-        naming_convention.generate_unique_name_for_variable(declaration_name)
-      ),
+      name: format!(".{}", generated_class_name),
       scope_type: ScopeType::AtRule,
     }];
+    self.generated_class_name = Some(generated_class_name);
     parser_state
   }
 
@@ -234,9 +236,7 @@ impl YakTransform for TransformCssMixin {
           Expr::Member(MemberExpr {
             span: DUMMY_SP,
             obj: Box::new(Expr::Ident(css_module_identifier.clone())),
-            prop: create_member_prop_from_string(
-              self.export_name.clone().unwrap().to_readable_string(),
-            ),
+            prop: create_member_prop_from_string(self.generated_class_name.clone().unwrap()),
           })
           .into(),
         );
@@ -267,7 +267,7 @@ impl YakTransform for TransformCssMixin {
 
   fn get_css_reference_name(&self) -> Option<String> {
     if self.is_within_jsx_attribute {
-      return Some(self.export_name.as_ref().unwrap().to_readable_string());
+      return Some(self.generated_class_name.clone().unwrap());
     }
     None
   }

diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-prop-nested/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-prop-nested/output.dev.tsx
@@ -9,12 +9,12 @@ import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"
 .yak-01 {
   color: blue;
 }
-*/ /*#__PURE__*/ css(__styleYak.yak)({})}>
+*/ /*#__PURE__*/ css(__styleYak["yak-01"])({})}>
     <span {.../*YAK Extracted CSS:
 .yak-02 {
   color: green;
 }
-*/ /*#__PURE__*/ css(__styleYak.yak)({})}>
+*/ /*#__PURE__*/ css(__styleYak["yak-02"])({})}>
       hello
     </span>
     world

diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-prop-nested/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-prop-nested/output.prod.tsx
@@ -9,12 +9,12 @@ import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"
 .yak1 {
   color: blue;
 }
-*/ /*#__PURE__*/ css(__styleYak.yak)({})}>
+*/ /*#__PURE__*/ css(__styleYak.yak1)({})}>
     <span {.../*YAK Extracted CSS:
 .yak2 {
   color: green;
 }
-*/ /*#__PURE__*/ css(__styleYak.yak)({})}>
+*/ /*#__PURE__*/ css(__styleYak.yak2)({})}>
       hello
     </span>
     world