ignore falsy units for css variables

DigitecGalaxus · Jul 14, 2024 · a5f6a6f · a5f6a6f
1 parent fc03370
commit a5f6a6f
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 55 deletions.
diff --git 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
@@ -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 => <div {...__yak_mergeCssProp(props,
         /*YAK Extracted CSS:
@@ -1801,7 +1801,7 @@ describe("css prop", () => {
         /*#__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
@@ -9,24 +9,9 @@ const appendCssUnitToExpressionValue = (
   runtimeInternalHelpers: Set<string>,
   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
@@ -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
@@ -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