diff --git a/.changeset/flat-bulldogs-attend.md b/.changeset/flat-bulldogs-attend.md new file mode 100644 index 00000000..a4526253 --- /dev/null +++ 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 index ba6d54f0..b9becc4e 100644 --- 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

+

+ Nested CSS Prop works + + {" "} + if this is green{" "} + + and this is violet +

diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs index 3e427d3c..38e7adb6 100644 --- 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, is_exported: bool, is_within_jsx_attribute: bool, + generated_class_name: Option, } 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 { 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 new file mode 100644 index 00000000..7fbe509f --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/css-prop-nested/input.tsx @@ -0,0 +1,22 @@ +import { css } from "next-yak"; + +
+

+ + hello + + world +

+
; 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 new file mode 100644 index 00000000..f8678e98 --- /dev/null +++ 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"; +
+

+ + hello + + 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 new file mode 100644 index 00000000..3965b485 --- /dev/null +++ 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"; +
+

+ + hello + + world +

+
;