From a7a86885f3585697fd8a580124e5263d6f40cc0d Mon Sep 17 00:00:00 2001 From: Jan Nicklas Date: Fri, 12 Jul 2024 14:27:12 +0200 Subject: [PATCH 1/7] css literal mock --- packages/next-yak/runtime/mocks/cssLiteral.ts | 104 +++++++++++++++++- 1 file changed, 103 insertions(+), 1 deletion(-) diff --git a/packages/next-yak/runtime/mocks/cssLiteral.ts b/packages/next-yak/runtime/mocks/cssLiteral.ts index d7a1c920..3fe838a8 100644 --- a/packages/next-yak/runtime/mocks/cssLiteral.ts +++ b/packages/next-yak/runtime/mocks/cssLiteral.ts @@ -1 +1,103 @@ -export * from "../cssLiteral.js"; +import { CSSProperties } from "react"; +import type { YakTheme } from "../index.d.ts"; + +type ComponentStyles = (props: TProps) => { + className: string; + style?: { + [key: string]: string; + }; +}; + +export type StaticCSSProp = { + className: string; + style?: CSSProperties; +}; + +export type CSSInterpolation = + | string + | number + | undefined + | null + | false + | ComponentStyles + | StaticCSSProp + | { + // type only identifier to allow targeting components + // e.g. styled.svg`${Button}:hover & { fill: red; }` + __yak: true; + } + | ((props: TProps) => CSSInterpolation); + +type CSSStyles = { + style: { [key: string]: string | ((props: TProps) => string) }; +}; + +type CSSFunction = ( + styles: TemplateStringsArray, + ...values: CSSInterpolation[] +) => ComponentStyles; + +type PropsToClassNameFn = (props: unknown) => + | { + className?: string; + style?: Record; + } + | PropsToClassNameFn; + +/** + * Allows to use CSS styles in a styled or css block + * + * e.g. + * + * ```tsx + * const Component = styled.div` + * color: black; + * ${({$active}) => $active && css`color: red;`} + * `; + * ``` + */ +export function css(styles: TemplateStringsArray, ...values: []): StaticCSSProp; +export function css( + styles: TemplateStringsArray, + ...values: CSSInterpolation[] +): ComponentStyles; +export function css( + styles: TemplateStringsArray, + ...args: CSSInterpolation[] +): StaticCSSProp | ComponentStyles { + const dynamicCssFunctions: PropsToClassNameFn[] = []; + for (const arg of args as Array>) { + // Dynamic CSS e.g. + // css`${props => props.active && css`color: red;`}` + // compiled -> css((props: { active: boolean }) => props.active && css("yak31e4")) + if (typeof arg === "function") { + dynamicCssFunctions.push(arg as unknown as PropsToClassNameFn); + } + } + if (dynamicCssFunctions.length === 0) { + return { + className: "css-mixin", + style: undefined + }; + } + return ((props: T) => { + for (let i = 0; i < dynamicCssFunctions.length; i++) { + // run the dynamic expressions and ignore the return value + // the execution is important to ensure that the user code is executed + // the same way as in the real runtime + executeDynamiceExpressionRecursively(props, dynamicCssFunctions[i]); + } + return {}; + }) as ComponentStyles; +} + +function executeDynamiceExpressionRecursively( + props: unknown, + expression: PropsToClassNameFn +) { + let result = expression(props); + while (typeof result === "function") { + result = result(props); + } + return result; +} From f0f2075d37a49b010d0e6f64be43f7b7f3dd0f08 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Fri, 12 Jul 2024 12:29:08 +0000 Subject: [PATCH 2/7] [autofix.ci] apply automated fixes --- packages/next-yak/runtime/mocks/cssLiteral.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/next-yak/runtime/mocks/cssLiteral.ts b/packages/next-yak/runtime/mocks/cssLiteral.ts index 3fe838a8..de0b1f4e 100644 --- a/packages/next-yak/runtime/mocks/cssLiteral.ts +++ b/packages/next-yak/runtime/mocks/cssLiteral.ts @@ -46,12 +46,12 @@ type PropsToClassNameFn = (props: unknown) => /** * Allows to use CSS styles in a styled or css block - * + * * e.g. - * + * * ```tsx * const Component = styled.div` - * color: black; + * color: black; * ${({$active}) => $active && css`color: red;`} * `; * ``` @@ -62,7 +62,7 @@ export function css( ...values: CSSInterpolation[] ): ComponentStyles; export function css( - styles: TemplateStringsArray, + styles: TemplateStringsArray, ...args: CSSInterpolation[] ): StaticCSSProp | ComponentStyles { const dynamicCssFunctions: PropsToClassNameFn[] = []; @@ -77,7 +77,7 @@ export function css( if (dynamicCssFunctions.length === 0) { return { className: "css-mixin", - style: undefined + style: undefined, }; } return ((props: T) => { @@ -93,7 +93,7 @@ export function css( function executeDynamiceExpressionRecursively( props: unknown, - expression: PropsToClassNameFn + expression: PropsToClassNameFn, ) { let result = expression(props); while (typeof result === "function") { From 750f6d2c4abd21268215263ff6e0b1f6b8f92959 Mon Sep 17 00:00:00 2001 From: Jan Nicklas Date: Fri, 12 Jul 2024 14:37:03 +0200 Subject: [PATCH 3/7] Update packages/next-yak/runtime/mocks/cssLiteral.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --- packages/next-yak/runtime/mocks/cssLiteral.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/next-yak/runtime/mocks/cssLiteral.ts b/packages/next-yak/runtime/mocks/cssLiteral.ts index de0b1f4e..d596c643 100644 --- a/packages/next-yak/runtime/mocks/cssLiteral.ts +++ b/packages/next-yak/runtime/mocks/cssLiteral.ts @@ -91,7 +91,7 @@ export function css( }) as ComponentStyles; } -function executeDynamiceExpressionRecursively( +function executeDynamicExpressionRecursively( props: unknown, expression: PropsToClassNameFn, ) { @@ -101,3 +101,4 @@ function executeDynamiceExpressionRecursively( } return result; } +} From 0d7979079a198636b30e5898573ba7c5b7fa911e Mon Sep 17 00:00:00 2001 From: Jan Nicklas Date: Fri, 12 Jul 2024 14:38:33 +0200 Subject: [PATCH 4/7] fix typo --- packages/next-yak/runtime/mocks/cssLiteral.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/next-yak/runtime/mocks/cssLiteral.ts b/packages/next-yak/runtime/mocks/cssLiteral.ts index d596c643..fa983ace 100644 --- a/packages/next-yak/runtime/mocks/cssLiteral.ts +++ b/packages/next-yak/runtime/mocks/cssLiteral.ts @@ -85,7 +85,7 @@ export function css( // run the dynamic expressions and ignore the return value // the execution is important to ensure that the user code is executed // the same way as in the real runtime - executeDynamiceExpressionRecursively(props, dynamicCssFunctions[i]); + executeDynamicExpressionRecursively(props, dynamicCssFunctions[i]); } return {}; }) as ComponentStyles; @@ -100,5 +100,4 @@ function executeDynamicExpressionRecursively( result = result(props); } return result; -} -} +} \ No newline at end of file From 645eb879625dce51f20c3f3781a5a1c93192570c Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Fri, 12 Jul 2024 12:39:27 +0000 Subject: [PATCH 5/7] [autofix.ci] apply automated fixes --- packages/next-yak/runtime/mocks/cssLiteral.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/next-yak/runtime/mocks/cssLiteral.ts b/packages/next-yak/runtime/mocks/cssLiteral.ts index fa983ace..7a9dcb08 100644 --- a/packages/next-yak/runtime/mocks/cssLiteral.ts +++ b/packages/next-yak/runtime/mocks/cssLiteral.ts @@ -100,4 +100,4 @@ function executeDynamicExpressionRecursively( result = result(props); } return result; -} \ No newline at end of file +} From 7e23cd7808760b220fff2dc0ab1801e17646ad93 Mon Sep 17 00:00:00 2001 From: Jan Nicklas Date: Tue, 23 Jul 2024 07:12:58 +0200 Subject: [PATCH 6/7] fix suggestion --- packages/next-yak/runtime/mocks/cssLiteral.ts | 7 +++++-- packages/next-yak/runtime/styled.tsx | 1 + 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/next-yak/runtime/mocks/cssLiteral.ts b/packages/next-yak/runtime/mocks/cssLiteral.ts index 7a9dcb08..eeb8dd17 100644 --- a/packages/next-yak/runtime/mocks/cssLiteral.ts +++ b/packages/next-yak/runtime/mocks/cssLiteral.ts @@ -76,7 +76,7 @@ export function css( } if (dynamicCssFunctions.length === 0) { return { - className: "css-mixin", + className: "", style: undefined, }; } @@ -87,7 +87,10 @@ export function css( // the same way as in the real runtime executeDynamicExpressionRecursively(props, dynamicCssFunctions[i]); } - return {}; + return { + className: "", + style: undefined, + }; }) as ComponentStyles; } diff --git a/packages/next-yak/runtime/styled.tsx b/packages/next-yak/runtime/styled.tsx index 1fa79943..1a24059c 100644 --- a/packages/next-yak/runtime/styled.tsx +++ b/packages/next-yak/runtime/styled.tsx @@ -225,6 +225,7 @@ function removePrefixedProperties>(obj: T) { } const mergeClassNames = (a?: string, b?: string) => { + if (!a && !b) return undefined; if (!a) return b; if (!b) return a; return a + " " + b; From d27b5a6fedb62cbebb3cc98541219173c165a737 Mon Sep 17 00:00:00 2001 From: Jan Nicklas Date: Tue, 23 Jul 2024 07:14:52 +0200 Subject: [PATCH 7/7] revert merge logic --- packages/next-yak/runtime/styled.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/next-yak/runtime/styled.tsx b/packages/next-yak/runtime/styled.tsx index 1a24059c..1fa79943 100644 --- a/packages/next-yak/runtime/styled.tsx +++ b/packages/next-yak/runtime/styled.tsx @@ -225,7 +225,6 @@ function removePrefixedProperties>(obj: T) { } const mergeClassNames = (a?: string, b?: string) => { - if (!a && !b) return undefined; if (!a) return b; if (!b) return a; return a + " " + b;