next-yak 0.0.27 → 0.0.28

package/loaders/__tests__/cssloader.test.ts

@@ -503,6 +503,29 @@ const Component2 = styled.div\`
     `);
   });
 
+  it("should inline constants", async () => {
+    expect(
+      await cssloader.call(
+        loaderContext,
+        `
+import { styled, css } from "next-yak";
+
+const red = "#E50914";
+const zIndex = 14;
+const headline = css\`
+  color: \${red};
+  z-index: \${zIndex};
+\`
+`
+      )
+    ).toMatchInlineSnapshot(`
+      ".headline_0 {
+        color: #E50914;
+        z-index: 14;
+      }"
+    `);
+  });
+
   it("should support conditional nested expressions", async () => {
     expect(
       await cssloader.call(
@@ -510,9 +533,9 @@ const Component2 = styled.div\`
         `
 import { styled, keyframes, css } from "next-yak";
 
-const color = "green";
-const duration = "1s";
-const easing = "ease-out";
+const color = new Token("green");
+const duration = new Token("1s");
+const easing = new Token("ease-out");
 
 const Component = styled.div\`
     background-color: red;

package/loaders/__tests__/tsloader.test.ts

@@ -461,6 +461,30 @@ const Icon = styled.div\`
     `);
   });
 
+  it("should remove string and number constants from the ts code", async () => {
+    expect(
+      await tsloader.call(
+        loaderContext,
+        `
+import { styled, css } from "next-yak";
+
+const red = "#E50914";
+const zIndex = 14;
+const headline = css\`
+  color: \${red};
+  z-index: \${zIndex};
+\`
+`
+      )
+    ).toMatchInlineSnapshot(`
+      "import { styled, css } from \\"next-yak\\";
+      import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.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 () => {
     await expect(() =>
       tsloader.call(
@@ -491,7 +515,7 @@ const headline = css\`
         `
         import { styled, css } from "next-yak";
 
-        const $red = "#E50914";
+        const $red = new Token("#E50914");
         const Button = styled.button\`
           \${({ $primary, $digits }) => {
             return $primary && css\`

package/loaders/babel-yak-plugin.cjs

@@ -6,6 +6,10 @@ const { relative, resolve, basename } = require("path");
 const localIdent = require("./lib/localIdent.cjs");
 const getStyledComponentName = require("./lib/getStyledComponentName.cjs");
 const getCssName = require("./lib/getCssName.cjs");
+const {
+  getConstantName,
+  getConstantValues,
+} = require("./lib/getConstantValues.cjs");
 
 /** @typedef {{replaces: Record<string, unknown>, rootContext?: string}} YakBabelPluginOptions */
 /** @typedef {{ css: string | undefined, styled: string | undefined, keyframes: string | undefined }} YakLocalIdentifierNames */
@@ -21,7 +25,7 @@ const getCssName = require("./lib/getCssName.cjs");
  *   localVarNames: YakLocalIdentifierNames,
  *   isImportedInCurrentFile: boolean,
  *   classNameCount: number,
- *   topLevelConstBindings: Set<string>,
+ *   topLevelConstBindings: Map<string, number | string | null>,
  *   varIndex: number,
  *   variableNameToStyledCall: Map<string, {
  *     wasAdded: boolean,
@@ -123,32 +127,11 @@ module.exports = function (babel, options) {
       this.classNameCount = 0;
       this.varIndex = 0;
       this.variableNameToStyledCall = new Map();
-      this.topLevelConstBindings = new Set();
+      this.topLevelConstBindings = new Map();
     },
     visitor: {
-      Program(path, state) {
-        const bindings = Object.entries(path.scope.bindings);
-        const constBindings = bindings.filter(([_name, binding]) => {
-          if (binding.kind === "module") {
-            // it is unclear if this is a const binding
-            // however to be safe, all module bindings are considered consts
-            return true;
-          }
-          return (
-            // let and var might change but this would be very strange react code
-            // as states must use useState or useExternalStore
-            (binding.kind === "let" ||
-              binding.kind === "var" ||
-              binding.kind === "const") &&
-            // don't consider functions or arrow functions as constants
-            (!("init" in binding.path.node) ||
-              (!t.isFunctionDeclaration(binding.path.node.init) &&
-                !t.isArrowFunctionExpression(binding.path.node.init)))
-          );
-        });
-        constBindings.forEach(([name]) => {
-          this.topLevelConstBindings.add(name);
-        });
+      Program(path) {
+        this.topLevelConstBindings = getConstantValues(path, t);
       },
       /**
        * Store the name of the imported 'css' and 'styled' variables e.g.:
@@ -354,26 +337,14 @@ module.exports = function (babel, options) {
             wasInsideCssValue = true;
             // to prevent overuse of css variables, we only allow expressions
             // for css variables for arrow function expressions
-            if (
-              // e.g. styled.div`color: ${x};`
-              (t.isIdentifier(expression) &&
-                this.topLevelConstBindings.has(expression.name)) ||
-              // e.g. styled.div`color: ${x.y};`
-              (t.isMemberExpression(expression) &&
-                t.isIdentifier(expression.object) &&
-                this.topLevelConstBindings.has(expression.object.name)) ||
-              // e.g. styled.div`color: ${x()};`
-              (t.isCallExpression(expression) &&
-                // x()
-                ((t.isIdentifier(expression.callee) &&
-                  this.topLevelConstBindings.has(expression.callee.name)) ||
-                  // x.y()
-                  (t.isMemberExpression(expression.callee) &&
-                    t.isIdentifier(expression.callee.object) &&
-                    this.topLevelConstBindings.has(
-                      expression.callee.object.name
-                    ))))
-            ) {
+            const variableName = getConstantName(expression, t);
+            if (variableName && this.topLevelConstBindings.has(variableName)) {
+              // Ignore constants that have a static string or number value
+              const value = this.topLevelConstBindings.get(variableName);
+              if (value !== null) {
+                continue;
+              }
+
               throw new InvalidPositionError(
                 "Possible constant used as runtime value for a css variable\n" +
                   "Please move the constant to a .yak import or use an arrow function\n" +

package/loaders/cssloader.cjs

@@ -8,6 +8,10 @@ const getStyledComponentName = require("./lib/getStyledComponentName.cjs");
 const getCssName = require("./lib/getCssName.cjs");
 const murmurhash2_32_gc = require("./lib/hash.cjs");
 const { relative } = require("path");
+const {
+  getConstantName,
+  getConstantValues,
+} = require("./lib/getConstantValues.cjs");
 
 /**
  * @typedef {{ selector: string, hasParent: boolean, quasiCode: Array<{ insideCssValue: boolean, code: string }>, cssPartExpressions: { [key: number]: CssPartExpression[]} }} CssPartExpression
@@ -86,7 +90,14 @@ module.exports = async function cssLoader(source) {
   /** @type {Map<string, string>} */
   const variableNameToStyledClassName = new Map();
 
+  /** @type {Map<string, number | string | null>} */
+  let topLevelConstBindings = new Map();
+
+
   babel.traverse(ast, {
+    Program(path) {
+      topLevelConstBindings = getConstantValues(path, t);
+    },
     /**
      * @param {import("@babel/core").NodePath<import("@babel/types").ImportDeclaration>} path
      */
@@ -240,13 +251,22 @@ module.exports = async function cssLoader(source) {
             const relativePath = relative(rootContext, resourcePath);
             hashedFile = murmurhash2_32_gc(relativePath);
           }
-          currentCssParts.quasiCode.push({
-            insideCssValue: true,
-            code:
-              unEscapeCssCode(quasi.value.raw) +
-              // replace the expression with a css variable
-              `var(--🦬${hashedFile}${varIndex++})`,
-          });
+          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) +
+                // replace the expression with a css variable
+                `var(--🦬${hashedFile}${varIndex++})`,
+            });
+          } else {
+            currentCssParts.quasiCode.push({
+              insideCssValue: true,
+              code: unEscapeCssCode(quasi.value.raw) + String(variableConstValue),
+            });
+          }
         } else {
           wasInsideCssValue = false;
           // code is added

package/loaders/lib/getConstantValues.cjs

@@ -0,0 +1,83 @@
+// @ts-check
+
+/** @typedef {import("@babel/types")} babel */
+
+/**
+ * Returns the name of the expression
+ * @param {babel.types.Expression} expression
+ * @param {import("@babel/types")} t
+ */
+const getConstantName = (expression, t) => {
+  // e.g. styled.div`color: ${x};`
+  if (t.isIdentifier(expression)) {
+    // e.g. x
+    return expression.name;
+  } else if (
+    t.isMemberExpression(expression) &&
+    t.isIdentifier(expression.object)
+  ) {
+    // e.g. x for x.y
+    return expression.object.name;
+  } else if (
+    t.isCallExpression(expression) &&
+    t.isIdentifier(expression.callee)
+  ) {
+    // e.g. x for x()
+    return expression.callee.name;
+  } else if (
+    t.isCallExpression(expression) &&
+    t.isMemberExpression(expression.callee) &&
+    t.isIdentifier(expression.callee.object)
+  ) {
+    // e.g. x for x.y()
+    return expression.callee.object.name;
+  } else {
+    return null;
+  }
+};
+
+/**
+ * Extracts all top level constant values from a program path
+ *
+ * @param {babel.NodePath<babel.types.Program>} path
+ * @param {import("@babel/types")} t
+ */
+function getConstantValues(path, t) {
+  /** @type {Map<string, string | number | null>} */
+  const topLevelConstBindings = new Map();
+  const bindings = Object.entries(path.scope.bindings);
+  for (const [name, binding] of bindings) {
+    if (binding.kind === "module") {
+      topLevelConstBindings.set(name, null);
+      continue;
+    }
+    if (
+      binding.kind === "let" ||
+      binding.kind === "var" ||
+      binding.kind === "const"
+    ) {
+      // don't consider function declarations or arrow functions as constants
+      if (
+        !("init" in binding.path.node) ||
+        t.isFunctionDeclaration(binding.path.node.init) ||
+        t.isArrowFunctionExpression(binding.path.node.init)
+      ) {
+        topLevelConstBindings.set(name, null);
+        continue;
+      }
+      const value = binding.path.node.init;
+      topLevelConstBindings.set(
+        name,
+        t.isStringLiteral(value) || t.isNumericLiteral(value)
+          ? value.value
+          : null
+      );
+    }
+  }
+  return topLevelConstBindings;
+}
+
+module.exports = {
+  getConstantValues,
+  getConstantName,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-yak",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "type": "module",
   "types": "./dist/",
   "exports": {
@@ -30,6 +30,22 @@
       }
     }
   },
+  "scripts": {
+    "prepublishOnly": "npm run build && npm run test && npm run test:types:code && npm run test:types:test",
+    "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: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/",
+    "build:context:client": "tsup runtime/context/index.tsx --target es2022 --external react --external next-yak/context/baseContext --dts --format cjs,esm --sourcemap --out-dir dist/context/",
+    "build:context:server": "tsup runtime/context/index.server.tsx --target es2022 --external react --external next-yak/context/baseContext --external ./index.js --format cjs,esm --sourcemap --out-dir dist/context/",
+    "build:withYak": "tsup withYak/index.ts --target es2022 --dts --format cjs --sourcemap --out-dir withYak --external ../loaders/tsloader.cjs --external ../loaders/cssloader.cjs",
+    "test": "vitest run",
+    "test:types:code": "tsc -p tsconfig.json",
+    "test:types:test": "tsc -p ./runtime/__tests__/tsconfig.json",
+    "test:watch": "vitest --watch"
+  },
   "dependencies": {
     "@babel/core": "7.23.2",
     "@babel/plugin-syntax-typescript": "7.22.5",
@@ -58,20 +74,5 @@
     "loaders",
     "runtime",
     "withYak"
-  ],
-  "scripts": {
-    "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: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/",
-    "build:context:client": "tsup runtime/context/index.tsx --target es2022 --external react --external next-yak/context/baseContext --dts --format cjs,esm --sourcemap --out-dir dist/context/",
-    "build:context:server": "tsup runtime/context/index.server.tsx --target es2022 --external react --external next-yak/context/baseContext --external ./index.js --format cjs,esm --sourcemap --out-dir dist/context/",
-    "build:withYak": "tsup withYak/index.ts --target es2022 --dts --format cjs --sourcemap --out-dir withYak --external ../loaders/tsloader.cjs --external ../loaders/cssloader.cjs",
-    "test": "vitest run",
-    "test:types:code": "tsc -p tsconfig.json",
-    "test:types:test": "tsc -p ./runtime/__tests__/tsconfig.json",
-    "test:watch": "vitest --watch"
-  }
-}
+  ]
+}