Fix css prop handling in exported components

jantimon · Dec 30, 2024 · 7b7ead0 · 7b7ead0
1 parent acdd292
commit 7b7ead0
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 15 deletions.
diff --git a/.changeset/friendly-chefs-heal.md b/.changeset/friendly-chefs-heal.md
@@ -0,0 +1,6 @@
+---
+"next-yak": patch
+"yak-swc": patch
+---
+
+Fix issue with the css prop where it wouldn't be generated when used inside an exported component
diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs
@@ -218,17 +218,6 @@ impl YakTransform for TransformCssMixin {
       );
     }
     let css_prefix = match (self.is_exported, self.is_within_jsx_attribute) {
-      (true, _) => Some(format!(
-        "YAK EXPORTED MIXIN:{}",
-        self
-          .export_name
-          .as_ref()
-          .unwrap()
-          .parts
-          .iter()
-          .map(|atom| encode_percent(atom.as_str()))
-          .join(":")
-      )),
       (_, true) => {
         // Add the class name to the arguments, to be created by the CSS loader
         arguments.push(
@@ -241,6 +230,17 @@ impl YakTransform for TransformCssMixin {
         );
         Some("YAK Extracted CSS:".to_string())
       }
+      (true, _) => Some(format!(
+        "YAK EXPORTED MIXIN:{}",
+        self
+          .export_name
+          .as_ref()
+          .unwrap()
+          .parts
+          .iter()
+          .map(|atom| encode_percent(atom.as_str()))
+          .join(":")
+      )),
       _ => None,
     };
     YakTransformResult {

diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-prop-in-exported-component/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-prop-in-exported-component/output.dev.tsx
@@ -1,10 +1,10 @@
 import { css, __yak_mergeCssProp } from "next-yak/internal";
 import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
-export const YakLogo = ()=><div {.../*YAK EXPORTED MIXIN:YakLogo
+export const YakLogo = ()=><div {.../*YAK Extracted CSS:
 .YakLogo {
   display: flex;
   gap: 6px;
 }
-*/ /*#__PURE__*/ css()({})}>
+*/ /*#__PURE__*/ css(__styleYak.YakLogo)({})}>
     Yak
   </div>;
diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-prop-in-exported-component/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-prop-in-exported-component/output.prod.tsx
@@ -1,10 +1,10 @@
 import { css, __yak_mergeCssProp } from "next-yak/internal";
 import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
-export const YakLogo = ()=><div {.../*YAK EXPORTED MIXIN:YakLogo
+export const YakLogo = ()=><div {.../*YAK Extracted CSS:
 .YakLogo {
   display: flex;
   gap: 6px;
 }
-*/ /*#__PURE__*/ css()({})}>
+*/ /*#__PURE__*/ css(__styleYak.YakLogo)({})}>
     Yak
   </div>;