Fix nested css prop (#245)

DigitecGalaxus · Dec 21, 2024 · 154da2f · 154da2f
1 parent 11261b7
commit 154da2f
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 8 deletions.
diff --git a/.changeset/flat-bulldogs-attend.md b/.changeset/flat-bulldogs-attend.md
@@ -0,0 +1,6 @@
+---
+"next-yak": patch
+"yak-swc": patch
+---
+
+fix css prop class name access in nested jsx
diff --git a/packages/example/app/page.tsx b/packages/example/app/page.tsx
@@ -154,6 +154,22 @@ export default function Home() {
         >
           Conditional CSS Prop works if this is green
         </p>
+        <p
+          css={css`
+            color: violet;
+          `}
+        >
+          Nested CSS Prop works
+          <span
+            css={css`
+              color: green;
+            `}
+          >
+            {" "}
+            if this is green{" "}
+          </span>
+          and this is violet
+        </p>
         <Inputs />
       </main>
     </YakThemeProvider>

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
   }
 
@@ -233,9 +235,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(),
         );
@@ -266,7 +266,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/input.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-prop-nested/input.tsx
@@ -0,0 +1,22 @@
+import { css } from "next-yak";
+
+<div
+  css={css`
+    color: red;
+  `}
+>
+  <p
+    css={css`
+      color: blue;
+    `}
+  >
+    <span
+      css={css`
+        color: green;
+      }`}
+    >
+      hello
+    </span>
+    world
+  </p>
+</div>;
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
@@ -0,0 +1,22 @@
+import { css, __yak_mergeCssProp } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+<div {.../*YAK Extracted CSS:
+.yak {
+  color: red;
+}
+*/ /*#__PURE__*/ css(__styleYak.yak)({})}>
+  <p {.../*YAK Extracted CSS:
+.yak-01 {
+  color: blue;
+}
+*/ /*#__PURE__*/ css(__styleYak["yak-01"])({})}>
+    <span {.../*YAK Extracted CSS:
+.yak-02 {
+  color: green;
+}
+*/ /*#__PURE__*/ css(__styleYak["yak-02"])({})}>
+      hello
+    </span>
+    world
+  </p>
+</div>;
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
@@ -0,0 +1,22 @@
+import { css, __yak_mergeCssProp } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+<div {.../*YAK Extracted CSS:
+.yak {
+  color: red;
+}
+*/ /*#__PURE__*/ css(__styleYak.yak)({})}>
+  <p {.../*YAK Extracted CSS:
+.yak1 {
+  color: blue;
+}
+*/ /*#__PURE__*/ css(__styleYak.yak1)({})}>
+    <span {.../*YAK Extracted CSS:
+.yak2 {
+  color: green;
+}
+*/ /*#__PURE__*/ css(__styleYak.yak2)({})}>
+      hello
+    </span>
+    world
+  </p>
+</div>;