diff --git a/package.json b/package.json index 06d35393..88209656 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "example": "pnpm --filter=next-yak-example run dev", "test": "pnpm --filter=next-yak --filter=webpack-tests run \"/test($|:types)/\"", "test:watch": "pnpm --filter=next-yak run test:watch", + "test:snapshots": "pnpm --filter=next-yak run test:snapshots", "package:types": "npx --package=@arethetypeswrong/cli attw --pack packages/next-yak", "prettier": "pnpm run --recursive --if-present prettier" }, diff --git a/packages/next-yak/loaders/__tests__/tsloader.test.ts b/packages/next-yak/loaders/__tests__/tsloader.test.ts index 3823ff57..dfcf7c2e 100644 --- a/packages/next-yak/loaders/__tests__/tsloader.test.ts +++ b/packages/next-yak/loaders/__tests__/tsloader.test.ts @@ -208,7 +208,7 @@ const FancyButton = styled(Button)\` `, ), ).toMatchInlineSnapshot(` - "import { styled, css } from \\"next-yak/internal\\"; + "import { styled, css, __yak_unitPostFix } from \\"next-yak/internal\\"; import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\"; const Button = /*YAK Extracted CSS: @@ -237,9 +237,9 @@ const FancyButton = styled(Button)\` $primary }) => $primary ? /*#__PURE__*/css(__styleYak.Button__$primary) : /*#__PURE__*/css(__styleYak.Button__not_$primary), { \\"style\\": { - \\"--Button__width_18fi82j\\": ({ + \\"--Button__width_18fi82j\\": __yak_unitPostFix(({ $iconWidth - }) => ($iconWidth) + \\"px\\" + }) => $iconWidth, \\"px\\") } }); const FancyButton = @@ -1149,7 +1149,7 @@ const Button = styled.button\` ), ).toMatchInlineSnapshot(` "import styles from \\"./page.module.css\\"; - import { styled } from \\"next-yak/internal\\"; + import { styled, __yak_unitPostFix } from \\"next-yak/internal\\"; import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\"; const Button = /*YAK Extracted CSS: @@ -1163,11 +1163,11 @@ const Button = styled.button\` /*#__PURE__*/ styled.button(__styleYak.Button, { \\"style\\": { - \\"--Button__padding_18fi82j\\": () => (10) + \\"rem\\", - \\"--Button__margin_18fi82j\\": () => (4 * 2) + \\"px\\", + \\"--Button__padding_18fi82j\\": __yak_unitPostFix(() => 10, \\"rem\\"), + \\"--Button__margin_18fi82j\\": __yak_unitPostFix(() => 4 * 2, \\"px\\"), \\"--Button__z-index_18fi82j\\": () => 10 + 4, - \\"--Button__transform_18fi82j\\": () => (10) + \\"px\\", - \\"--Button__transform_18fi82j_1\\": () => (10 / 2) + \\"px\\" + \\"--Button__transform_18fi82j\\": __yak_unitPostFix(() => 10, \\"px\\"), + \\"--Button__transform_18fi82j_1\\": __yak_unitPostFix(() => 10 / 2, \\"px\\") } });" `); @@ -1188,7 +1188,7 @@ const Button = styled.button\` ), ).toMatchInlineSnapshot(` "import styles from \\"./page.module.css\\"; - import { styled } from \\"next-yak/internal\\"; + import { styled, __yak_unitPostFix } from \\"next-yak/internal\\"; import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\"; const ClockNumber = /*YAK Extracted CSS: @@ -1199,12 +1199,12 @@ const Button = styled.button\` /*#__PURE__*/ styled.div(__styleYak.ClockNumber, { \\"style\\": { - \\"--ClockNumber__transform_18fi82j\\": ({ + \\"--ClockNumber__transform_18fi82j\\": __yak_unitPostFix(({ index - }) => (index * 30) + \\"deg\\", - \\"--ClockNumber__transform_18fi82j_1\\": ({ + }) => index * 30, \\"deg\\"), + \\"--ClockNumber__transform_18fi82j_1\\": __yak_unitPostFix(({ index - }) => (-index * 30) + \\"deg\\" + }) => -index * 30, \\"deg\\") } });" `); @@ -1273,7 +1273,7 @@ const Button = styled.button\` `, ), ).toMatchInlineSnapshot(` - "import { css } from \\"next-yak/internal\\"; + "import { css, __yak_unitPostFix } from \\"next-yak/internal\\"; import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\"; const mixin1 = /*YAK Extracted CSS: @@ -1283,7 +1283,7 @@ const Button = styled.button\` /*#__PURE__*/ css(__styleYak.mixin1, { \\"style\\": { - \\"--mixin1__padding_18fi82j\\": () => (4) + \\"px\\" + \\"--mixin1__padding_18fi82j\\": __yak_unitPostFix(() => 4, \\"px\\") } }); const value = 10; @@ -1299,10 +1299,10 @@ const Button = styled.button\` /*#__PURE__*/ css(__styleYak.mixin2, { \\"style\\": { - \\"--mixin2__margin_18fi82j\\": () => (size) + \\"px\\", - \\"--mixin2__top_18fi82j\\": () => (spacing.xs) + \\"px\\", - \\"--mixin2__bottom_18fi82j\\": () => (spacing[0]) + \\"PX\\", - \\"--mixin2__left_18fi82j\\": () => (spacing()) + \\"px\\" + \\"--mixin2__margin_18fi82j\\": __yak_unitPostFix(() => size, \\"px\\"), + \\"--mixin2__top_18fi82j\\": __yak_unitPostFix(() => spacing.xs, \\"px\\"), + \\"--mixin2__bottom_18fi82j\\": __yak_unitPostFix(() => spacing[0], \\"PX\\"), + \\"--mixin2__left_18fi82j\\": __yak_unitPostFix(() => spacing(), \\"px\\") } });" `); @@ -1788,7 +1788,7 @@ describe("css prop", () => { `, ), ).toMatchInlineSnapshot(` - "import { css, styled, __yak_mergeCssProp } from \\"next-yak/internal\\"; + "import { css, styled, __yak_mergeCssProp, __yak_unitPostFix } from \\"next-yak/internal\\"; import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\"; const Elem = props =>
{ /*#__PURE__*/ css(__styleYak.Elem, () => props.active && /*#__PURE__*/css(__styleYak.Elem__propsActive), { \\"style\\": { - \\"--Elem__padding_18fi82j\\": () => (props.dynamicPadding ? '10px' : \\"0\\") + \\"px\\" + \\"--Elem__padding_18fi82j\\": __yak_unitPostFix(() => props.dynamicPadding ? '10px' : \\"0\\", \\"px\\") } })({}))} />;" `); diff --git a/packages/next-yak/loaders/lib/appendCssUnitToExpressionValue.ts b/packages/next-yak/loaders/lib/appendCssUnitToExpressionValue.ts index 9324e8ed..bcd5df09 100644 --- a/packages/next-yak/loaders/lib/appendCssUnitToExpressionValue.ts +++ b/packages/next-yak/loaders/lib/appendCssUnitToExpressionValue.ts @@ -9,24 +9,9 @@ const appendCssUnitToExpressionValue = ( runtimeInternalHelpers: Set, t: typeof babelTypes, ) => { - if (expression.type === "ArrowFunctionExpression") { - if (expression.body.type !== "BlockStatement") { - const newBody = t.binaryExpression( - "+", - t.parenthesizedExpression(expression.body), - t.stringLiteral(cssUnit), - ); - - const newArrowFunction = t.arrowFunctionExpression( - expression.params, - newBody, - ); - return newArrowFunction; - } - } else if ( + if ( expression.type === "NumericLiteral" || - expression.type === "BinaryExpression" || - expression.type === "Identifier" + expression.type === "StringLiteral" ) { const cssUnitLiteral = t.stringLiteral(cssUnit); const binaryExpression = t.binaryExpression( @@ -36,7 +21,6 @@ const appendCssUnitToExpressionValue = ( ); return binaryExpression; } - const callExpression = t.callExpression(t.identifier("__yak_unitPostFix"), [ expression, t.stringLiteral(cssUnit), diff --git a/packages/next-yak/package.json b/packages/next-yak/package.json index 48246517..98b1ae89 100644 --- a/packages/next-yak/package.json +++ b/packages/next-yak/package.json @@ -65,6 +65,7 @@ "build": "tsup", "watch": "tsup --watch", "test": "vitest run", + "test:snapshots": "vitest run -u", "test:types:code": "tsc -p tsconfig.json", "test:types:test": "tsc -p ./runtime/__tests__/tsconfig.json", "test:watch": "vitest --watch", diff --git a/packages/next-yak/runtime/internals/unitPostFix.ts b/packages/next-yak/runtime/internals/unitPostFix.ts new file mode 100644 index 00000000..4d42728a --- /dev/null +++ b/packages/next-yak/runtime/internals/unitPostFix.ts @@ -0,0 +1,34 @@ +/** + * Internal helper called by transformed code - Do not use directly + * + * Takes a function and a css unit and returns the result of the function concatenated with the unit + * + * ```tsx + * import { styled } from "next-yak"; + * + * const Button = styled.button<{ $width?: boolean }>` + * width: ${({ $width }) => $width}px; + * `; + * ``` + * + * Which will be transformed to: + * ```tsx + * import { styled } from "next-yak/internals"; + * + * const Button = styled.button<{ $width?: boolean }>( + * "button", { + * width: unitPostFix({ $width }) => $width, "px") + * }); + */ +export const unitPostFix = (arg: unknown, unit: string) => { + switch (typeof arg) { + case "function": + return (props: any) => unitPostFix(arg(props), unit); + case "number": + case "string": + return `${arg}${unit}`; + // Ignore falsy values + default: + return undefined + } +} diff --git a/packages/next-yak/runtime/internals/unitPostFix.tsx b/packages/next-yak/runtime/internals/unitPostFix.tsx deleted file mode 100644 index de35e097..00000000 --- a/packages/next-yak/runtime/internals/unitPostFix.tsx +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Takes a function and a css unit and returns the result of the function concatenated with the unit - * - * @usage - * - * ```tsx - * import { styled, atoms } from "next-yak"; - * - * const Button = styled.button<{ $primary?: boolean }>` - * ${atoms("text-teal-600", "text-base", "rounded-md")} - * ${props => props.$primary && atoms("shadow-md")} - * `; - * ``` - */ -export const unitPostFix = (fn: any, unit: string) => - typeof fn === "function" ? (...args: any[]) => fn(...args) + unit : fn + unit;