Fix css prop in exported component (#253)

Author: Mad-Kat

.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

packages/yak-swc/yak_swc/src/yak_transforms.rs

@@ -217,8 +217,19 @@ impl YakTransform for TransformCssMixin {
         .into(),
       );
     }
-    let css_prefix = match (self.is_exported, self.is_within_jsx_attribute) {
-      (true, _) => Some(format!(
+    let css_prefix = if self.is_within_jsx_attribute {
+      // Add the class name to the arguments, to be created by the CSS loader
+      arguments.push(
+        Expr::Member(MemberExpr {
+          span: DUMMY_SP,
+          obj: Box::new(Expr::Ident(css_module_identifier.clone())),
+          prop: create_member_prop_from_string(self.generated_class_name.clone().unwrap()),
+        })
+        .into(),
+      );
+      Some("YAK Extracted CSS:".to_string())
+    } else if self.is_exported {
+      Some(format!(
         "YAK EXPORTED MIXIN:{}",
         self
           .export_name
@@ -228,21 +239,11 @@ impl YakTransform for TransformCssMixin {
           .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(
-          Expr::Member(MemberExpr {
-            span: DUMMY_SP,
-            obj: Box::new(Expr::Ident(css_module_identifier.clone())),
-            prop: create_member_prop_from_string(self.generated_class_name.clone().unwrap()),
-          })
-          .into(),
-        );
-        Some("YAK Extracted CSS:".to_string())
-      }
-      _ => None,
+      ))
+    } else {
+      None
     };
+
     YakTransformResult {
       css: YakCss {
         comment_prefix: css_prefix,

packages/yak-swc/yak_swc/tests/fixture/css-prop-in-exported-component/input.tsx

@@ -0,0 +1,12 @@
+import { css } from "next-yak";
+
+export const YakLogo = () => (
+  <div
+    css={css`
+      display: flex;
+      gap: 6px;
+    `}
+  >
+    Yak
+  </div>
+);

packages/yak-swc/yak_swc/tests/fixture/css-prop-in-exported-component/output.dev.tsx

@@ -0,0 +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 Extracted CSS:
+.YakLogo {
+  display: flex;
+  gap: 6px;
+}
+*/ /*#__PURE__*/ css(__styleYak.YakLogo)({})}>
+    Yak
+  </div>;

packages/yak-swc/yak_swc/tests/fixture/css-prop-in-exported-component/output.prod.tsx

@@ -0,0 +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 Extracted CSS:
+.YakLogo {
+  display: flex;
+  gap: 6px;
+}
+*/ /*#__PURE__*/ css(__styleYak.YakLogo)({})}>
+    Yak
+  </div>;