Enable css props on styled components (#243)

jantimon · Dec 19, 2024 · 5ce7f16 · 5ce7f16
1 parent 2870ab2
commit 5ce7f16
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 6 deletions.
diff --git a/.changeset/angry-dingos-remain.md b/.changeset/angry-dingos-remain.md
@@ -0,0 +1,6 @@
+---
+"next-yak": patch
+"yak-swc": patch
+---
+
+Enable css prop support for styled components, not just native HTML elements by fixing a bug in the types
diff --git a/packages/next-yak/runtime/__tests__/cssPropTest.tsx b/packages/next-yak/runtime/__tests__/cssPropTest.tsx
@@ -1,7 +1,7 @@
 /** @jsxImportSource next-yak */
 // this is only a type check file and should not be executed
 
-import { css } from "next-yak";
+import { css, styled } from "next-yak";
 import { CSSProperties } from "react";
 
 declare module "next-yak" {
@@ -110,3 +110,21 @@ const ComponentWithInterpolatedCSS = () => {
     />
   );
 };
+
+const Text = styled.p`
+  font-size: 20px;
+  font-weight: bold;
+  font-family: "Inter";
+`;
+
+const StyledComponentWithCSSProp = () => {
+  <div>
+    <Text
+      css={css`
+        color: red;
+      `}
+    >
+      test
+    </Text>
+  </div>;
+};
diff --git a/packages/next-yak/runtime/styled.tsx b/packages/next-yak/runtime/styled.tsx
@@ -1,4 +1,9 @@
-import { CSSInterpolation, css, yakComponentSymbol } from "./cssLiteral.js";
+import {
+  CSSInterpolation,
+  StaticCSSProp,
+  css,
+  yakComponentSymbol,
+} from "./cssLiteral.js";
 import React from "react";
 
 // the following export is not relative as "next-yak/context"
@@ -84,7 +89,11 @@ type YakComponent<
   T,
   TAttrsIn extends object = {},
   TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,
-> = FunctionComponent<T> & {
+> = FunctionComponent<
+  T & {
+    css?: StaticCSSProp;
+  }
+> & {
   [yakComponentSymbol]: [
     FunctionComponent<T>,
     AttrsFunction<T, TAttrsIn, TAttrsOut>,

diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-prop/input.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-prop/input.tsx
@@ -1,4 +1,4 @@
-import { css } from "next-yak";
+import { css, styled } from "next-yak";
 
 const Elem = () => (
   <div
@@ -58,3 +58,17 @@ const Elem6 = () => (
 const Elem7 = () => <div className="no-css" />;
 
 const Elem8 = () => <div css={css``} className="empty-css" />;
+
+const Text = styled.p`
+  font-size: 20px;
+`;
+
+const StyledComponentWithCSSProp = () => (
+  <Text
+    css={css`
+      color: red;
+    `}
+  >
+    test
+  </Text>
+);
diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-prop/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-prop/output.dev.tsx
@@ -1,4 +1,4 @@
-import { css, __yak_mergeCssProp } from "next-yak/internal";
+import { css, styled, __yak_mergeCssProp } from "next-yak/internal";
 import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
 const Elem = ()=><div {.../*YAK Extracted CSS:
 .Elem {
@@ -50,3 +50,15 @@ const Elem7 = ()=><div className="no-css"/>;
 const Elem8 = ()=><div {...__yak_mergeCssProp({
         className: "empty-css"
     }, /*#__PURE__*/ css(__styleYak.Elem8)({}))}/>;
+const Text = /*YAK Extracted CSS:
+.Text {
+  font-size: 20px;
+}
+*/ /*#__PURE__*/ styled.p(__styleYak.Text);
+const StyledComponentWithCSSProp = ()=><Text {.../*YAK Extracted CSS:
+.StyledComponentWithCSSProp {
+  color: red;
+}
+*/ /*#__PURE__*/ css(__styleYak.StyledComponentWithCSSProp)({})}>
+    test
+  </Text>;
diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-prop/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-prop/output.prod.tsx
@@ -1,4 +1,4 @@
-import { css, __yak_mergeCssProp } from "next-yak/internal";
+import { css, styled, __yak_mergeCssProp } from "next-yak/internal";
 import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
 const Elem = ()=><div {.../*YAK Extracted CSS:
 .Elem {
@@ -50,3 +50,15 @@ const Elem7 = ()=><div className="no-css"/>;
 const Elem8 = ()=><div {...__yak_mergeCssProp({
         className: "empty-css"
     }, /*#__PURE__*/ css(__styleYak.Elem8)({}))}/>;
+const Text = /*YAK Extracted CSS:
+.Text {
+  font-size: 20px;
+}
+*/ /*#__PURE__*/ styled.p(__styleYak.Text);
+const StyledComponentWithCSSProp = ()=><Text {.../*YAK Extracted CSS:
+.StyledComponentWithCSSProp {
+  color: red;
+}
+*/ /*#__PURE__*/ css(__styleYak.StyledComponentWithCSSProp)({})}>
+    test
+  </Text>;