next-yak 0.0.26 → 0.0.27

package/README.md

@@ -16,7 +16,8 @@
 - **Standard CSS Syntax**: Write styles in familiar, easy-to-use CSS
 - **Integrates with Atomic CSS**: Easily combines with atomic CSS frameworks like Tailwind CSS for more design options
 
-[Preview (Video)](https://github.com/jantimon/next-yak/assets/4113649/5383f60c-3bab-4aba-906c-d66070b6116c)
+[Preview (Video)](https://github.com/jantimon/next-yak/assets/4113649/f5a220fc-2a0f-46be-a8e7-c855f7faa337
+)
 
 ## Installation
 
@@ -263,7 +264,7 @@ const Container = styled.div`
 | Yak Features     | All (`styled`, `css`, ...)                      | 🚫                                             | 
 
 
-[Build time constants (video)](https://github.com/jantimon/next-yak/assets/4113649/6bdc44df-2996-40a3-9255-4b9ed0df464a)
+[Build time constants (video)](https://github.com/jantimon/next-yak/assets/4113649/2c83246c-a03b-4c57-8814-32a7248983ac)
 
 ## Todos:
 

package/loaders/__tests__/tsloader.test.ts

@@ -228,7 +228,7 @@ import { css } from "next-yak";
 import { easing } from "styleguide";
 
 const headline = css\`
-  transition: color \${({i}) => i * 100 + "ms"} \${easing};
+  transition: color \${({i}) => i * 100 + "ms"} \${({easing}) => easing};
   display: block;
   \${css\`color: orange\`}
   \${css\`color: blue\`}
@@ -245,7 +245,9 @@ const headline = css\`
           \\"--\\\\uD83E\\\\uDDAC18fi82j0\\": ({
             i
           }) => i * 100 + \\"ms\\",
-          \\"--\\\\uD83E\\\\uDDAC18fi82j1\\": easing
+          \\"--\\\\uD83E\\\\uDDAC18fi82j1\\": ({
+            easing
+          }) => easing
         }
       });"
     `);
@@ -269,7 +271,7 @@ const fadeIn = keyframes\`
 \`
 
 const FadeInButton = styled.button\`
-  animation: 1s \${fadeIn} ease-out;
+  animation: 1s \${() => fadeIn} ease-out;
 \`
 `
       )
@@ -280,7 +282,7 @@ const FadeInButton = styled.button\`
       const fadeIn = keyframes(__styleYak.fadeIn);
       const FadeInButton = styled.button(__styleYak.FadeInButton, {
         \\"style\\": {
-          \\"--\\\\uD83E\\\\uDDAC18fi82j0\\": fadeIn
+          \\"--\\\\uD83E\\\\uDDAC18fi82j0\\": () => fadeIn
         }
       });"
     `);
@@ -459,6 +461,198 @@ const Icon = styled.div\`
     `);
   });
 
+  it("should show error when using a runtime value from top level", async () => {
+    await expect(() =>
+      tsloader.call(
+        loaderContext,
+        `
+import { styled, css } from "next-yak";
+
+const red = new Token("#E50914");
+const headline = css\`
+  color: \${red};
+\`
+`
+      )
+    ).rejects.toThrowErrorMatchingInlineSnapshot(`
+      "/some/special/path/page.tsx: line 6: Possible constant used as runtime value for a css variable
+      Please move the constant to a .yak import or use an arrow function
+      e.g.:
+      |   import { primaryColor } from './foo.yak'
+      |   const MyStyledDiv = styled.div\`color: \${primaryColor};\`
+      found: \${red}"
+    `);
+  });
+
+  it("should show error when using a runtime value from top level in a nested literal", async () => {
+    await expect(() =>
+      tsloader.call(
+        loaderContext,
+        `
+        import { styled, css } from "next-yak";
+
+        const $red = "#E50914";
+        const Button = styled.button\`
+          \${({ $primary, $digits }) => {
+            return $primary && css\`
+              background-color: #4CAF50;
+              color: \${$red};
+            \`}}
+        \`
+`
+      )
+    ).rejects.toThrowErrorMatchingInlineSnapshot(`
+      "/some/special/path/page.tsx: line 9: Possible constant used as runtime value for a css variable
+      Please move the constant to a .yak import or use an arrow function
+      e.g.:
+      |   import { primaryColor } from './foo.yak'
+      |   const MyStyledDiv = styled.div\`color: \${primaryColor};\`
+      found: \${$red}"
+    `);
+  });
+
+  it("should show error when calling a runtime value from top level in a nested literal", async () => {
+    await expect(() =>
+      tsloader.call(
+        loaderContext,
+        `
+        import { styled, css } from "next-yak";
+        import { red } from "./colors";
+
+        const Button = styled.button\`
+          \${({ $primary, $digits }) => {
+            return $primary && css\`
+              background-color: #4CAF50;
+              color: \${red()};
+            \`}}
+        \`
+`
+      )
+    ).rejects.toThrowErrorMatchingInlineSnapshot(`
+      "/some/special/path/page.tsx: line 9: Possible constant used as runtime value for a css variable
+      Please move the constant to a .yak import or use an arrow function
+      e.g.:
+      |   import { primaryColor } from './foo.yak'
+      |   const MyStyledDiv = styled.div\`color: \${primaryColor};\`
+      found: \${red()}"
+    `);
+  });
+
+  it("should show error when calling a nested runtime value from top level in a nested literal", async () => {
+    await expect(() =>
+      tsloader.call(
+        loaderContext,
+        `
+        import { styled, css } from "next-yak";
+        import { colors } from "./colors";
+
+        const Button = styled.button\`
+          \${({ $primary, $digits }) => {
+            return $primary && css\`
+              background-color: #4CAF50;
+              color: \${colors.red()};
+            \`}}
+        \`
+`
+      )
+    ).rejects.toThrowErrorMatchingInlineSnapshot(`
+      "/some/special/path/page.tsx: line 9: Possible constant used as runtime value for a css variable
+      Please move the constant to a .yak import or use an arrow function
+      e.g.:
+      |   import { primaryColor } from './foo.yak'
+      |   const MyStyledDiv = styled.div\`color: \${primaryColor};\`
+      found: \${colors.red()}"
+    `);
+  });
+
+  it("should show error when using a runtime value from another module in a nested literal", async () => {
+    await expect(() =>
+      tsloader.call(
+        loaderContext,
+        `
+        import { styled, css } from "next-yak";
+        import $red from "./colors";
+        
+        const Button = styled.button\`
+          \${({ $primary, $digits }) => {
+            return $primary && css\`
+              background-color: #4CAF50;
+              color: \${$red};
+            \`}}
+        \`
+`
+      )
+    ).rejects.toThrowErrorMatchingInlineSnapshot(`
+      "/some/special/path/page.tsx: line 9: Possible constant used as runtime value for a css variable
+      Please move the constant to a .yak import or use an arrow function
+      e.g.:
+      |   import { primaryColor } from './foo.yak'
+      |   const MyStyledDiv = styled.div\`color: \${primaryColor};\`
+      found: \${$red}"
+    `);
+  });
+
+  it("should show error when using a runtime object value from top level in a nested literal", async () => {
+    await expect(() =>
+      tsloader.call(
+        loaderContext,
+        `
+        import { styled, css } from "next-yak";
+
+        const colors = { red:  "#E50914" };
+        const Button = styled.button\`
+          \${({ $primary, $digits }) => {
+            return $primary && css\`
+              background-color: #4CAF50;
+              color: \${colors.red};
+            \`}}
+        \`
+`
+      )
+    ).rejects.toThrowErrorMatchingInlineSnapshot(`
+      "/some/special/path/page.tsx: line 9: Possible constant used as runtime value for a css variable
+      Please move the constant to a .yak import or use an arrow function
+      e.g.:
+      |   import { primaryColor } from './foo.yak'
+      |   const MyStyledDiv = styled.div\`color: \${primaryColor};\`
+      found: \${colors.red}"
+    `);
+  });
+
+  it("should show no error when using a scoped value", async () => {
+    await expect(
+      await tsloader.call(
+        loaderContext,
+        `
+import { styled, css } from "next-yak";
+
+const Button = styled.button\`
+  \${({ $primary, $digits }) => {
+    const indent = $digits * 10 + "px";
+    return $primary && css\`
+      background-color: #4CAF50;
+      text-indent: \${indent};
+    \`}}
+\`
+`
+      )
+    ).toMatchInlineSnapshot(`
+      "import { styled, css } from \\"next-yak\\";
+      import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
+      const Button = styled.button(__styleYak.Button, ({
+        $primary,
+        $digits
+      }) => {
+        const indent = $digits * 10 + \\"px\\";
+        return $primary && css(__styleYak.primary_0, {
+          \\"style\\": {
+            \\"--\\\\uD83E\\\\uDDAC18fi82j0\\": indent
+          }
+        });
+      });"
+    `);
+  });
+
   it("should ignores empty chunks if they include only a comment", async () => {
     expect(
       await tsloader.call(

package/loaders/babel-yak-plugin.cjs

@@ -21,6 +21,7 @@ const getCssName = require("./lib/getCssName.cjs");
  *   localVarNames: YakLocalIdentifierNames,
  *   isImportedInCurrentFile: boolean,
  *   classNameCount: number,
+ *   topLevelConstBindings: Set<string>,
  *   varIndex: number,
  *   variableNameToStyledCall: Map<string, {
  *     wasAdded: boolean,
@@ -122,8 +123,33 @@ module.exports = function (babel, options) {
       this.classNameCount = 0;
       this.varIndex = 0;
       this.variableNameToStyledCall = new Map();
+      this.topLevelConstBindings = new Set();
     },
     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);
+        });
+      },
       /**
        * Store the name of the imported 'css' and 'styled' variables e.g.:
        * - `import { css, styled } from 'next-yak'` -> { css: 'css', styled: 'styled' }
@@ -326,6 +352,39 @@ module.exports = function (babel, options) {
               (type.empty && wasInsideCssValue))
           ) {
             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
+                    ))))
+            ) {
+              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" +
+                  "e.g.:\n" +
+                  "|   import { primaryColor } from './foo.yak'\n" +
+                  "|   const MyStyledDiv = styled.div`color: ${primaryColor};`",
+                expression,
+                this.file
+              );
+            }
+
             if (!cssVariablesInlineStyle) {
               cssVariablesInlineStyle = t.objectExpression([]);
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-yak",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "type": "module",
   "types": "./dist/",
   "exports": {
@@ -30,22 +30,6 @@
       }
     }
   },
-  "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",
@@ -74,5 +58,20 @@
     "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"
+  }
+}