next-yak 0.0.30 → 0.0.32

package/dist/runtime-internals/index.cjs

@@ -0,0 +1,2 @@
+"use strict";var s=Object.defineProperty;var r=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var e=Object.prototype.hasOwnProperty;var p=(o,t)=>{for(var i in t)s(o,i,{get:t[i],enumerable:!0})},u=(o,t,i,x)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of y(t))!e.call(o,n)&&n!==i&&s(o,n,{get:()=>t[n],enumerable:!(x=r(t,n))||x.enumerable});return o};var F=o=>u(s({},"__esModule",{value:!0}),o);var P={};p(P,{__yak_unitPostFix:()=>a});module.exports=F(P);var a=(o,t)=>typeof o=="function"?(...i)=>o(...i)+t:o+t;0&&(module.exports={__yak_unitPostFix});
+//# sourceMappingURL=index.cjs.map

package/dist/runtime-internals/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../runtime/internals/index.ts","../../runtime/internals/unitPostFix.tsx"],"sourcesContent":["export { unitPostFix as __yak_unitPostFix } from \"./unitPostFix.js\";\n","/**\n * Takes a function and a css unit and returns the result of the function concatenated with the unit\n *\n * @usage\n *\n * ```tsx\n * import { styled, atoms } from \"next-yak\";\n *\n * const Button = styled.button<{ $primary?: boolean }>`\n *  ${atoms(\"text-teal-600\", \"text-base\", \"rounded-md\")}\n *  ${props => props.$primary && atoms(\"shadow-md\")}\n * `;\n * ```\n */\nexport const unitPostFix = (fn: any, unit: string) =>\n  typeof fn === \"function\" ? (...args: any[]) => fn(...args) + unit : fn + unit;\n"],"mappings":"yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,uBAAAE,IAAA,eAAAC,EAAAH,GCcO,IAAMI,EAAc,CAACC,EAASC,IACnC,OAAOD,GAAO,WAAa,IAAIE,IAAgBF,EAAG,GAAGE,CAAI,EAAID,EAAOD,EAAKC","names":["internals_exports","__export","unitPostFix","__toCommonJS","unitPostFix","fn","unit","args"]}

package/dist/runtime-internals/index.js

@@ -0,0 +1,2 @@
+var n=(t,o)=>typeof t=="function"?(...i)=>t(...i)+o:t+o;export{n as __yak_unitPostFix};
+//# sourceMappingURL=index.js.map

package/dist/runtime-internals/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../runtime/internals/unitPostFix.tsx"],"sourcesContent":["/**\n * Takes a function and a css unit and returns the result of the function concatenated with the unit\n *\n * @usage\n *\n * ```tsx\n * import { styled, atoms } from \"next-yak\";\n *\n * const Button = styled.button<{ $primary?: boolean }>`\n *  ${atoms(\"text-teal-600\", \"text-base\", \"rounded-md\")}\n *  ${props => props.$primary && atoms(\"shadow-md\")}\n * `;\n * ```\n */\nexport const unitPostFix = (fn: any, unit: string) =>\n  typeof fn === \"function\" ? (...args: any[]) => fn(...args) + unit : fn + unit;\n"],"mappings":"AAcO,IAAMA,EAAc,CAACC,EAASC,IACnC,OAAOD,GAAO,WAAa,IAAIE,IAAgBF,EAAG,GAAGE,CAAI,EAAID,EAAOD,EAAKC","names":["unitPostFix","fn","unit","args"]}

package/loaders/__tests__/cssloader.test.ts

@@ -649,4 +649,58 @@ const headline = css\`
       }"
     `);
   });
+
+  it("should detect expressions with units automatically in arrow function expressions", async () => {
+    expect(
+      await cssloader.call(
+        loaderContext,
+        `
+     import styles from "./page.module.css";
+     import { css } from "next-yak";
+     const case3 = css\`
+      padding: \${({$indent}) => {
+       if ($indent > 4) return 10;
+       return $indent
+     }}px;
+      transform: translate(-50%, -50%) rotate(\${({ index }) => index * 30}deg);
+       translate(0, -88px) rotate(\${({ index }) => -index * 30}deg);
+    \`
+     `
+      )
+    ).toMatchInlineSnapshot(`
+      ".case3_0 {
+            padding: var(--🦬18fi82j0);
+            transform: translate(-50%, -50%) rotate(var(--🦬18fi82j1));
+             translate(0, -88px) rotate(var(--🦬18fi82j2));
+          }"
+    `);
+  });
+
+  it("should detect expressions with units automatically in edge cases", async () => {
+    expect(
+      await cssloader.call(
+        loaderContext,
+        `
+     import styles from "./page.module.css";
+     import { css } from "next-yak";
+     const value = 10;
+     const case3 = css\`
+        margin: \${size}px;
+        top: \${spacing.xs}px;
+        bottom: \${spacing[0]}PX;
+        left: \${spacing()}px;
+        right: \${value}px;
+    \`
+     `
+      )
+    ).toMatchInlineSnapshot(`
+      ".case3_0 {
+              margin: var(--🦬18fi82j0);
+              top: var(--🦬18fi82j1);
+              bottom: var(--🦬18fi82j2);
+              left: var(--🦬18fi82j3);
+              right: 10px;
+            }"
+    `);
+  });
 });

package/loaders/__tests__/tsloader.test.ts

@@ -271,7 +271,7 @@ const fadeIn = keyframes\`
 \`
 
 const FadeInButton = styled.button\`
-  animation: 1s \${() => fadeIn} ease-out;
+  animation: 1s \${() => fadeIn} ease-out 1s infinite reverse both paused slidein;
 \`
 `
       )
@@ -482,7 +482,7 @@ const headline = css\`
       const red = \\"#E50914\\";
       const zIndex = 14;
       const headline = css(__styleYak.headline_0);"
-    `)
+    `);
   });
 
   it("should show error when using a runtime value from top level", async () => {
@@ -779,4 +779,145 @@ const Button = styled.button\`
       }) => $primary && css(__styleYak.primary_0));"
     `);
   });
+
+  it("should detect expressions with units and correctly append them in the css variable value", async () => {
+    expect(
+      await tsloader.call(
+        loaderContext,
+        `
+     import styles from "./page.module.css";
+     import { styled } from "next-yak";
+     const Button = styled.button\`
+        padding: \${10}rem;
+        margin: \${4 * 2}px;
+        z-index: \${10 + 4};
+        transform: translateX(\${10}px) translateY(\${10 / 2}px);
+        font-family: "Arial", sans-serif;
+     \`;
+
+     `
+      )
+    ).toMatchInlineSnapshot(`
+      "import styles from \\"./page.module.css\\";
+      import { styled } from \\"next-yak\\";
+      import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
+      const Button = styled.button(__styleYak.Button, {
+        \\"style\\": {
+          \\"--\\\\uD83E\\\\uDDAC18fi82j0\\": 10 + \\"rem\\",
+          \\"--\\\\uD83E\\\\uDDAC18fi82j1\\": 4 * 2 + \\"px\\",
+          \\"--\\\\uD83E\\\\uDDAC18fi82j2\\": 10 + 4,
+          \\"--\\\\uD83E\\\\uDDAC18fi82j3\\": 10 + \\"px\\",
+          \\"--\\\\uD83E\\\\uDDAC18fi82j4\\": 10 / 2 + \\"px\\"
+        }
+      });"
+    `);
+  });
+
+  it("should detect expressions with units in simple arrow functions", async () => {
+    expect(
+      await tsloader.call(
+        loaderContext,
+        `
+     import styles from "./page.module.css";
+     import { styled } from "next-yak";
+     const ClockNumber = styled.div<{ index: number; children: ReactNode }>\`
+       transform: translate(-50%, -50%) rotate(\${({ index }) => index * 30}deg)
+          translate(0, -88px) rotate(\${({ index }) => -index * 30}deg);
+     \`;      
+     `
+      )
+    ).toMatchInlineSnapshot(`
+      "import styles from \\"./page.module.css\\";
+      import { styled } from \\"next-yak\\";
+      import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
+      const ClockNumber = styled.div(__styleYak.ClockNumber, {
+        \\"style\\": {
+          \\"--\\\\uD83E\\\\uDDAC18fi82j0\\": ({
+            index
+          }) => (index * 30) + \\"deg\\",
+          \\"--\\\\uD83E\\\\uDDAC18fi82j1\\": ({
+            index
+          }) => (-index * 30) + \\"deg\\"
+        }
+      });"
+    `);
+  });
+
+  it("should detect expressions with units in complex arrow functions and wrap them with __yak_unitPostFix helper", async () => {
+    expect(
+      await tsloader.call(
+        loaderContext,
+        `
+     import styles from "./page.module.css";
+     import { css } from "next-yak";
+     const case1 = css\`
+        padding: \${({$indent}) => {
+          if ($indent > 0) {
+            return $indent * 3;
+          }
+          return 0;
+        }}px;
+     \`;
+     
+     `
+      )
+    ).toMatchInlineSnapshot(`
+      "import styles from \\"./page.module.css\\";
+      import { css } from \\"next-yak\\";
+      import { __yak_unitPostFix } from \\"next-yak/runtime-internals\\";
+      import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
+      const case1 = css(__styleYak.case1_0, {
+        \\"style\\": {
+          \\"--\\\\uD83E\\\\uDDAC18fi82j0\\": __yak_unitPostFix(({
+            $indent
+          }) => {
+            if ($indent > 0) {
+              return $indent * 3;
+            }
+            return 0;
+          }, \\"px\\")
+        }
+      });"
+    `);
+  });
+
+  it("should detect expressions with units in mixins", async () => {
+    expect(
+      await tsloader.call(
+        loaderContext,
+        `
+      import { css } from "next-yak";
+      const mixin1 = css\`
+        padding: \${4}px;
+      \`;
+      const value = 10;
+      const mixin2 = css\`
+        margin: \${size}px;
+        top: \${spacing.xs}px;
+        bottom: \${spacing[0]}PX;
+        left: \${spacing()}px;
+        right: \${value}px;
+      \`
+     `
+      )
+    ).toMatchInlineSnapshot(`
+      "import { css } from \\"next-yak\\";
+      import { __yak_unitPostFix } from \\"next-yak/runtime-internals\\";
+      import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
+      const mixin1 = css(__styleYak.mixin1_0, {
+        \\"style\\": {
+          \\"--\\\\uD83E\\\\uDDAC18fi82j0\\": 4 + \\"px\\"
+        }
+      });
+      const value = 10;
+      const mixin2 = css(__styleYak.mixin2_1, {
+        \\"style\\": {
+          \\"--\\\\uD83E\\\\uDDAC18fi82j1\\": size + \\"px\\",
+          \\"--\\\\uD83E\\\\uDDAC18fi82j2\\": __yak_unitPostFix(spacing.xs, \\"px\\"),
+          \\"--\\\\uD83E\\\\uDDAC18fi82j3\\": __yak_unitPostFix(spacing[0], \\"PX\\"),
+          \\"--\\\\uD83E\\\\uDDAC18fi82j4\\": __yak_unitPostFix(spacing(), \\"px\\")
+        }
+      });"
+    `);
+  });
 });

package/loaders/babel-yak-plugin.cjs

@@ -5,6 +5,7 @@ const murmurhash2_32_gc = require("./lib/hash.cjs");
 const { relative, resolve, basename } = require("path");
 const localIdent = require("./lib/localIdent.cjs");
 const getStyledComponentName = require("./lib/getStyledComponentName.cjs");
+const appendCssUnitToExpressionValue = require("./lib/appendCssUnitToExpressionValue.cjs");
 const getCssName = require("./lib/getCssName.cjs");
 const {
   getConstantName,
@@ -32,6 +33,8 @@ const {
  *     className: string,
  *     astNode: import("@babel/types").CallExpression
  *   }>
+ *  yakImportPath?: import("@babel/core").NodePath<import("@babel/core").types.ImportDeclaration>
+ *  runtimeInternalHelpers: Set<string>
  * }>}
  */
 module.exports = function (babel, options) {
@@ -128,10 +131,24 @@ module.exports = function (babel, options) {
       this.varIndex = 0;
       this.variableNameToStyledCall = new Map();
       this.topLevelConstBindings = new Map();
+      this.runtimeInternalHelpers = new Set();
     },
     visitor: {
-      Program(path) {
-        this.topLevelConstBindings = getConstantValues(path, t);
+      Program: {
+        enter(path, state) {
+          this.topLevelConstBindings = getConstantValues(path, t);
+        },
+        exit(path, state) {
+          if (this.runtimeInternalHelpers.size && this.yakImportPath) {
+            const newImport = t.importDeclaration(
+              [...this.runtimeInternalHelpers].map((helper) =>
+                t.importSpecifier(t.identifier(helper), t.identifier(helper))
+              ),
+              t.stringLiteral("next-yak/runtime-internals")
+            );
+            this.yakImportPath.insertAfter(newImport);
+          }
+        },
       },
       /**
        * Store the name of the imported 'css' and 'styled' variables e.g.:
@@ -164,6 +181,7 @@ module.exports = function (babel, options) {
             )
           )
         );
+        this.yakImportPath = path;
 
         // Process import specifiers
         node.specifiers.forEach((specifier) => {
@@ -327,6 +345,7 @@ module.exports = function (babel, options) {
               this.file
             );
           }
+
           // expressions after a partial css are converted into css variables
           if (
             expression &&
@@ -356,23 +375,34 @@ module.exports = function (babel, options) {
               );
             }
 
-            if (!cssVariablesInlineStyle) {
-              cssVariablesInlineStyle = t.objectExpression([]);
-            }
             if (!cssVariablesInlineStyle) {
               cssVariablesInlineStyle = t.objectExpression([]);
             }
             const cssVariableName = `--🦬${getHashedFilePath(state.file)}${this
               .varIndex++}`;
+
+            // Extracts the css unit from a css string after the current expression
+            const cssUnit = quasis[i + 1]?.value.raw.match(/^([a-z]+|%)/i)?.[0];
+            const transformedExpression = cssUnit
+              ? appendCssUnitToExpressionValue(
+                  cssUnit,
+                  expression,
+                  this.runtimeInternalHelpers,
+                  t
+                )
+              : expression;
+
             // expression: `x`
             // { style: { --v0: x}}
             cssVariablesInlineStyle.properties.push(
               t.objectProperty(
                 t.stringLiteral(cssVariableName),
-                /** @type {babel.types.Expression} */ (expression)
+                /** @type {babel.types.Expression} */ (transformedExpression)
               )
             );
-          } else {
+          }
+          // handle mixins
+          else {
             wasInsideCssValue = false;
             if (expression) {
               if (quasiTypes[i].currentNestingScopes.length > 0) {

package/loaders/cssloader.cjs

@@ -93,7 +93,6 @@ module.exports = async function cssLoader(source) {
   /** @type {Map<string, number | string | null>} */
   let topLevelConstBindings = new Map();
 
-
   babel.traverse(ast, {
     Program(path) {
       topLevelConstBindings = getConstantValues(path, t);
@@ -204,8 +203,9 @@ module.exports = async function cssLoader(source) {
       const variableName =
         isStyledLiteral || isStyledCall || isAttrsCall || isKeyFrameLiteral
           ? getStyledComponentName(path)
-          : isCssLiteral ? getCssName(path)
-          : null
+          : isCssLiteral
+          ? getCssName(path)
+          : null;
 
       const literalSelector = localIdent(
         variableName || "_yak",
@@ -217,14 +217,19 @@ module.exports = async function cssLoader(source) {
       const currentCssParts = {
         quasiCode: [],
         cssPartExpressions: [],
-        selector: !parentLocation ? literalSelector : `&:where(${literalSelector})`,
+        selector: !parentLocation
+          ? literalSelector
+          : `&:where(${literalSelector})`,
         hasParent: Boolean(parentLocation),
       };
-      const parentCssParts = parentLocation && cssParts.get(parentLocation.parent);
+      const parentCssParts =
+        parentLocation && cssParts.get(parentLocation.parent);
       cssParts.set(path, currentCssParts);
       if (parentCssParts) {
         parentCssParts.cssPartExpressions[parentLocation.currentIndex] ||= [];
-        parentCssParts.cssPartExpressions[parentLocation.currentIndex].push(currentCssParts);
+        parentCssParts.cssPartExpressions[parentLocation.currentIndex].push(
+          currentCssParts
+        );
       }
 
       // Replace the tagged template expression with a call to the 'styled' function
@@ -234,11 +239,22 @@ module.exports = async function cssLoader(source) {
       );
 
       let wasInsideCssValue = false;
+      let removeCssUnit = false;
       for (let i = 0; i < quasis.length; i++) {
         const quasi = quasis[i];
         const expression = path.node.quasi.expressions[i];
         // loop over all quasis belonging to the same css block
         const type = quasiTypes[i];
+
+        let code = unEscapeCssCode(quasi.value.raw);
+        if (removeCssUnit) {
+          // a quasi might start with a css unit e.g. css`margin: ${value}px 0;`
+          // the css unit will be part of the typescript runtime code and must
+          // must be removed from the css code as `var(--foo)px` would be invalid css
+          code = code.replace(/^([a-z]+|%)/i, "");
+          removeCssUnit = false;
+        }
+
         // expressions after a partial css are converted into css variables
         if (
           expression &&
@@ -251,20 +267,23 @@ module.exports = async function cssLoader(source) {
             const relativePath = relative(rootContext, resourcePath);
             hashedFile = murmurhash2_32_gc(relativePath);
           }
-          const variableName = t.isExpression(expression) && getConstantName(expression, t);
-          const variableConstValue = variableName && topLevelConstBindings.get(variableName);
+          const variableName =
+            t.isExpression(expression) && getConstantName(expression, t);
+          const variableConstValue =
+            variableName && topLevelConstBindings.get(variableName);
           if (variableConstValue === null || variableConstValue === undefined) {
             currentCssParts.quasiCode.push({
               insideCssValue: true,
               code:
-                unEscapeCssCode(quasi.value.raw) +
+                code +
                 // replace the expression with a css variable
                 `var(--🦬${hashedFile}${varIndex++})`,
             });
+            removeCssUnit = true;
           } else {
             currentCssParts.quasiCode.push({
               insideCssValue: true,
-              code: unEscapeCssCode(quasi.value.raw) + String(variableConstValue),
+              code: code + String(variableConstValue),
             });
           }
         } else {
@@ -273,7 +292,7 @@ module.exports = async function cssLoader(source) {
           // empty quasis are also added to keep spacings
           // e.g. `transition: color ${duration} ${easing};`
           currentCssParts.quasiCode.push({
-            code: unEscapeCssCode(quasi.value.raw),
+            code,
             insideCssValue: false,
           });
         }
@@ -285,10 +304,7 @@ module.exports = async function cssLoader(source) {
       // const Bar = styled.div` ${MyStyledDiv} { color: blue }`
       // "${MyStyledDiv} {" -> ".selector-0 {"
       if (variableName && (isStyledLiteral || isStyledCall || isAttrsCall)) {
-        variableNameToStyledClassName.set(
-          variableName,
-          literalSelector
-        );
+        variableNameToStyledClassName.set(variableName, literalSelector);
       }
     },
   });
@@ -310,7 +326,7 @@ const unEscapeCssCode = (code) => code.replace(/\\\\/gi, "\\");
 /**
  * Searches the closest parent TaggedTemplateExpression using a name from localNames
  * Returns the location inside this parent
- * 
+ *
  * @param {import("@babel/core").NodePath<import("@babel/types").TaggedTemplateExpression>} path
  * @param {{ css?: string , styled?: string }} localNames
  */
@@ -325,7 +341,6 @@ const getClosestTemplateLiteralExpressionParentPath = (
   let parent = path.parentPath;
   const t = babel.types;
   while (parent) {
-
     if (t.isTaggedTemplateExpression(parent.node)) {
       const tag = parent.node.tag;
       const isCssLiteral =
@@ -353,16 +368,20 @@ const getClosestTemplateLiteralExpressionParentPath = (
         /** @type {babel.types.Identifier} */ (tag.callee.property).name ===
           "attrs";
       if (isCssLiteral || isStyledLiteral || isStyledCall || isAttrsCall) {
-        if (!t.isTemplateLiteral(child.node) || !t.isExpression(grandChild.node)) {
+        if (
+          !t.isTemplateLiteral(child.node) ||
+          !t.isExpression(grandChild.node)
+        ) {
           throw new Error("Broken AST");
         }
         const currentIndex = child.node.expressions.indexOf(grandChild.node);
-        return  (
-          { parent: 
-              /** @type {import("@babel/core").NodePath<import("@babel/types").TaggedTemplateExpression>} */(parent), 
-              currentIndex 
-            }
-        );
+        return {
+          parent:
+            /** @type {import("@babel/core").NodePath<import("@babel/types").TaggedTemplateExpression>} */ (
+              parent
+            ),
+          currentIndex,
+        };
       }
     }
     if (!parent.parentPath) {
@@ -397,7 +416,8 @@ const mergeCssPartExpression = (cssPartExpression, level = 0) => {
       }
     }
     // Try to keep the same indentation as the original code
-    const indent = quasiCode[0]?.code.match(/^\n(  |\t)(\s*)/)?.[2] ?? "    ".repeat(level);
+    const indent =
+      quasiCode[0]?.code.match(/^\n(  |\t)(\s*)/)?.[2] ?? "    ".repeat(level);
     const hasCss = Boolean(cssPart.trim());
     css += !hasCss
       ? ""

package/loaders/lib/appendCssUnitToExpressionValue.cjs

@@ -0,0 +1,51 @@
+/**
+ * Extracts the css unit from a css string and checks if it is a valid CSS unit
+ *
+ * @param {string} cssUnit
+ * @param {babel.types.Expression} expression
+ * @param {Set<string>} runtimeInternalHelpers
+ * @param {import("@babel/types")} t
+ */
+const appendCssUnitToExpressionValue = (
+  cssUnit,
+  expression,
+  runtimeInternalHelpers,
+  t
+) => {
+  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 (
+    expression.type === "NumericLiteral" ||
+    expression.type === "BinaryExpression" ||
+    expression.type === "Identifier"
+  ) {
+    const cssUnitLiteral = t.stringLiteral(cssUnit);
+    const binaryExpression = t.binaryExpression(
+      "+",
+      expression,
+      cssUnitLiteral
+    );
+    return binaryExpression;
+  }
+
+  const callExpression = t.callExpression(t.identifier("__yak_unitPostFix"), [
+    expression,
+    t.stringLiteral(cssUnit),
+  ]);
+  runtimeInternalHelpers.add("__yak_unitPostFix");
+  return callExpression;
+};
+
+module.exports = appendCssUnitToExpressionValue;

package/loaders/tsloader.cjs

@@ -1,7 +1,8 @@
 /// @ts-check
 const babel = require("@babel/core");
 const getYakImports = require("./lib/getYakImports.cjs");
-const InvalidPositionError = require("./babel-yak-plugin.cjs").InvalidPositionError;
+const InvalidPositionError =
+  require("./babel-yak-plugin.cjs").InvalidPositionError;
 
 /**
  * Loader for typescript files that use yak, it replaces the css template literal with a call to the 'styled' function
@@ -53,7 +54,7 @@ module.exports = async function tsloader(source) {
           { isTSX: this.resourcePath.endsWith(".tsx") },
         ],
         [
-          require.resolve("./babel-yak-plugin.cjs"),
+          require("./babel-yak-plugin.cjs"),
           {
             replaces,
             rootContext,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-yak",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "type": "module",
   "types": "./dist/",
   "exports": {
@@ -12,6 +12,10 @@
       "import": "./dist/static/index.js",
       "require": "./dist/static/index.cjs"
     },
+    "./runtime-internals": {
+      "import": "./dist/runtime-internals/index.js",
+      "require": "./dist/runtime-internals/index.cjs"
+    },
     "./withYak": {
       "require": "./withYak/index.cjs"
     },
@@ -35,6 +39,7 @@
     "build": "pnpm run --filter . \"/^build:/\"",
     "build:runtime": "tsup runtime/index.ts --target es2022 --clean --external react --external next-yak/context --format cjs,esm --minify --sourcemap --out-dir dist",
     "build:runtime:types": "tsup runtime/index.ts --target es2022 --clean --external react --dts-only --format cjs,esm --minify --sourcemap --out-dir dist",
+    "build:runtimeInternals": "tsup runtime/internals/index.ts --target es2022 --clean --external react --external next-yak/runtime-internals --format cjs,esm --minify --sourcemap --out-dir dist/runtime-internals",
     "build:static": "tsup static/index.ts --target es2022 --clean --external react --external next-yak/context --format cjs,esm --minify --sourcemap --out-dir dist/static",
     "build:static:types": "tsup static/index.ts --target es2022 --clean --external react --dts-only --format cjs,esm --minify --sourcemap --out-dir dist/static",
     "build:baseContext": "tsup runtime/context/baseContext.tsx --target es2022 --external react --dts --format cjs,esm --sourcemap --out-dir dist/context/",

package/runtime/internals/index.ts

@@ -0,0 +1 @@
+export { unitPostFix as __yak_unitPostFix } from "./unitPostFix.js";

package/runtime/internals/unitPostFix.tsx

@@ -0,0 +1,16 @@
+/**
+ * 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;