diff --git a/.changeset/red-rats-double.md b/.changeset/red-rats-double.md index 206f4bda..e1dafcc4 100644 --- a/.changeset/red-rats-double.md +++ b/.changeset/red-rats-double.md @@ -3,4 +3,4 @@ "yak-swc": patch --- -Allow dynamic props in css prop +Enable conditional styling for the css prop diff --git a/packages/example/app/page.tsx b/packages/example/app/page.tsx index 5e67beda..ba6d54f0 100644 --- a/packages/example/app/page.tsx +++ b/packages/example/app/page.tsx @@ -152,7 +152,7 @@ export default function Home() { `} `} > - Dynamic CSS Prop works if this is green + Conditional CSS Prop works if this is green

diff --git a/packages/next-yak/runtime/__tests__/cssPropTest.tsx b/packages/next-yak/runtime/__tests__/cssPropTest.tsx index ade884a4..8b6850fc 100644 --- a/packages/next-yak/runtime/__tests__/cssPropTest.tsx +++ b/packages/next-yak/runtime/__tests__/cssPropTest.tsx @@ -111,6 +111,7 @@ const ComponentWithInterpolatedCSS = () => { ); }; +<<<<<<< HEAD const Text = styled.p` font-size: 20px; font-weight: bold; @@ -129,7 +130,7 @@ const StyledComponentWithCSSProp = () => { ; }; -const ComponentWithDynamicCSSButWithoutOwnProps = () => { +const ComponentWithConditionalCSSButWithoutOwnProps = () => { const x = Math.random() > 0.5; return (
{ ); }; -const ComponentWithDynamicCSSVarsButWithoutOwnProps = () => { +const ComponentWithConditionalCSSVarsButWithoutOwnProps = () => { const x = Math.random() > 0.5; return (
{ ); }; -const ComponentWithDynamicCSSWithOwnPropsShouldGenerateTypeError = () => { +const ComponentWithDynamicCSSShouldGenerateTypeError = () => { return (
` `} `; -const ComponentWithCSSThatUsesDynamicMixinWithOwnPropsShouldGenerateTypeError = - () => { - return ( -
- ); - }; +const ComponentWithCSSThatUsesDynamicMixinShouldGenerateTypeError = () => { + return ( +
+ ); +}; diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-prop-dynamic/input.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-prop-conditional/input.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/css-prop-dynamic/input.tsx rename to packages/yak-swc/yak_swc/tests/fixture/css-prop-conditional/input.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-prop-dynamic/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-prop-conditional/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/css-prop-dynamic/output.dev.tsx rename to packages/yak-swc/yak_swc/tests/fixture/css-prop-conditional/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-prop-dynamic/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-prop-conditional/output.prod.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/css-prop-dynamic/output.prod.tsx rename to packages/yak-swc/yak_swc/tests/fixture/css-prop-conditional/output.prod.tsx