next-yak 0.0.1

package/loaders/__tests__/cssloader.test.ts

@@ -0,0 +1,210 @@
+import {describe, it, expect} from "vitest";
+import cssloader from "../cssloader.cjs";
+
+const loaderContext = {
+  resourcePath: "/some/special/path/page.tsx",
+  rootContext: "/some",
+  importModule: () => {
+    return {
+      replaces: {
+        queries: {
+          sm: "@media (min-width: 640px)",
+          md: "@media (min-width: 768px)",
+          lg: "@media (min-width: 1024px)",
+          xl: "@media (min-width: 1280px)",
+          xxl: "@media (min-width: 1536px)",
+        },
+      },
+    };
+  },
+  getOptions: () => ({
+    configPath: "/some/special/path/config",
+  }),
+};
+
+describe("cssloader", () => {
+  // snapshot
+  it("should return the correct value", async () => {
+    expect(
+      await cssloader.call(
+        loaderContext,
+        `
+import styles from "./page.module.css";
+import { css } from "next-yak";
+
+const headline = css\`
+  font-size: 2rem;
+  font-weight: bold;
+  color: red;
+  &:hover {
+    color: red;
+  }
+      \`;
+`
+      )
+    ).toMatchInlineSnapshot(`
+".style0 { 
+  font-size: 2rem;
+  font-weight: bold;
+  color: red;
+  &:hover {
+    color: red;
+  }
+       }"
+`);
+  });
+
+  it("should support nested css code", async () => {
+    expect(
+  await cssloader.call(
+    loaderContext,
+    `
+import styles from "./page.module.css";
+import { css } from "next-yak";
+
+const x = Math.random();
+const headline = css\`
+  font-size: 2rem;
+  font-weight: bold;
+  color: red;
+  \${x > 0.5 && css\`
+    color: blue;
+  \`}
+  \${x > 0.5 && css\`
+    color: blue;
+  \`}
+  &:hover {
+    color: \${x ? "red" : "blue"\};
+  }
+\`;
+`
+  )
+).toMatchInlineSnapshot(`
+".style0 { 
+  font-size: 2rem;
+  font-weight: bold;
+  color: red;
+   }
+
+.style1 { 
+    color: blue;
+   }
+
+.style2 { 
+    color: blue;
+   }
+
+.style0 { 
+  &:hover {
+    color: var(--🦬18fi82j0);
+  }
+ }"
+`);
+  });
+
+  it("should ignores empty chunks if they include only a comment", async () => {
+    expect(
+      await cssloader.call(
+        loaderContext,
+        `
+import styles from "./page.module.css";
+import { css } from "next-yak";
+
+const x = Math.random();
+const headline = css\`
+  /* comment */
+  \${x > 0.5 && css\`
+    color: blue;
+  \`}
+\`;
+`
+      )
+    ).toMatchInlineSnapshot(`
+".style1 { 
+    color: blue;
+   }"
+`);
+  });
+});
+
+it("should support css variables", async () => {
+  expect(
+  await cssloader.call(
+    loaderContext,
+    `
+import styles from "./page.module.css";
+import { css } from "next-yak";
+
+const headline = css\`
+  &:hover {
+    color: \${x ? "red" : "blue"\};
+  }
+  \`;
+`
+  )
+).toMatchInlineSnapshot(`
+".style0 { 
+  &:hover {
+    color: var(--🦬18fi82j0);
+  }
+   }"
+`);
+});
+
+it("should support css variables with spaces", async () => {
+  expect(
+  await cssloader.call(
+    loaderContext,
+    `
+import styles from "./page.module.css";
+import { css } from "next-yak";
+
+const headline = css\`
+  transition: color \${duration} \${easing};
+  display: block;
+  \${css\`color: orange\`}
+  \`;
+`
+  )
+).toMatchInlineSnapshot(`
+".style0 { 
+  transition: color var(--🦬18fi82j0) var(--🦬18fi82j1);
+  display: block;
+   }
+
+.style1 { color: orange }"
+`);
+});
+
+it("should replace breakpoint references with actual media queries", async () => {
+  expect(
+  await cssloader.call(
+    loaderContext,
+    `
+import { css } from "next-yak";
+import { queries } from "@/theme";
+
+const headline = css\`
+  color: blue;
+  \${queries.sm} {
+    color: red;
+  }
+  transition: color \${duration} \${easing};
+  display: block;
+  \${css\`color: orange\`}
+  \`;
+`
+  )
+).toMatchInlineSnapshot(`
+".style0 { 
+  color: blue;
+  @media (min-width: 640px) {
+    color: red;
+  }
+  transition: color var(--🦬18fi82j0) var(--🦬18fi82j1);
+  display: block;
+   }
+
+.style1 { color: orange }"
+`);
+});

package/loaders/__tests__/tsloader.test.ts

@@ -0,0 +1,159 @@
+import tsloader from "../tsloader.cjs";
+import {describe, it, expect} from "vitest";
+
+const loaderContext = {
+  resourcePath: "/some/special/path/page.tsx",
+  rootContext: "/some",
+  importModule: () => {
+    return {
+      replaces: {
+        queries: {
+          sm: "@media (min-width: 640px)",
+          md: "@media (min-width: 768px)",
+          lg: "@media (min-width: 1024px)",
+          xl: "@media (min-width: 1280px)",
+          xxl: "@media (min-width: 1536px)",
+        },
+      },
+    };
+  },
+  getOptions: () => ({
+    configPath: "/some/special/path/config",
+  }),
+};
+
+describe("tsloader", () => {
+  // snapshot
+  it("should return the correct value", async () => {
+    expect(
+      await tsloader.call(
+        loaderContext,
+        `
+    "use client";
+    import styles from "./page.module.css";
+    import { css } from "next-yak";
+
+    type x = number;
+
+const headline = css\`
+  font-size: 2rem;
+  font-weight: bold;
+  color: blue;
+  &:hover {
+    color: red;
+  }
+        \`;
+
+export const Main = () => <h1 className={headline({}).className}>Hello World</h1>;
+`
+      )
+    ).toMatchInlineSnapshot(`
+      "\\"use client\\";
+
+      import styles from \\"./page.module.css\\";
+      import { css } from \\"next-yak\\";
+      import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
+      type x = number;
+      const headline = css(__styleYak.style0);
+      export const Main = () => <h1 className={headline({}).className}>Hello World</h1>;"
+    `);
+  });
+  it("should support nested css code", async () => {
+    expect(
+      await tsloader.call(
+        loaderContext,
+        `
+import styles from "./page.module.css";
+import { css } from "next-yak";
+
+const x = Math.random();
+const headline = css\`
+  font-size: 2rem;
+  font-weight: bold;
+  color: red;
+  \${x > 0.5 && css\`
+    color: blue;
+  \`}
+  &:hover {
+    color: red;
+  }
+\`;
+`
+      )
+    ).toMatchInlineSnapshot(`
+      "import styles from \\"./page.module.css\\";
+      import { css } from \\"next-yak\\";
+      import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
+      const x = Math.random();
+      const headline = css(__styleYak.style0, x > 0.5 && css(__styleYak.style1));"
+    `);
+  });
+
+  it("should support styled api", async () => {
+    expect(
+      await tsloader.call(
+        loaderContext,
+        `
+import styles from "./page.module.css";
+import { styled, css } from "next-yak";
+
+const x = Math.random();
+const Button = styled.button\`
+  font-size: 2rem;
+  font-weight: bold;
+  color: red;
+  \${x > 0.5 && css\`
+    color: blue;
+  \`}
+  &:hover {
+    color: red;
+  }
+\`;
+const FancyButton = styled(Button)\`
+  background-color: green;
+\`;
+`
+      )
+    ).toMatchInlineSnapshot(`
+      "import styles from \\"./page.module.css\\";
+      import { styled, css } from \\"next-yak\\";
+      import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
+      const x = Math.random();
+      const Button = styled.button(__styleYak.style0, x > 0.5 && css(__styleYak.style1));
+      const FancyButton = styled(Button)(__styleYak.style2);"
+    `);
+  });
+});
+
+it("should support css variables with spaces", async () => {
+  expect(
+  await tsloader.call(
+    loaderContext,
+    `
+import styles from "./page.module.css";
+import { css } from "next-yak";
+import { easing } from "styleguide";
+
+const headline = css\`
+  transition: color \${({i}) => i * 100 + "ms"} \${easing};
+  display: block;
+  \${css\`color: orange\`}
+  \${css\`color: blue\`}
+  \`;
+`
+  )
+).toMatchInlineSnapshot(`
+  "import styles from \\"./page.module.css\\";
+  import { css } from \\"next-yak\\";
+  import __styleYak from \\"./page.yak.module.css!=!./page?./page.yak.module.css\\";
+  import { easing } from \\"styleguide\\";
+  const headline = css(__styleYak.style0, css(__styleYak.style1), css(__styleYak.style2), {
+    \\"style\\": {
+      \\"--\\\\uD83E\\\\uDDAC18fi82j0\\": ({
+        i
+      }) => i * 100 + \\"ms\\",
+      \\"--\\\\uD83E\\\\uDDAC18fi82j1\\": easing
+    }
+  });"
+`);
+});

package/loaders/cssloader.cjs

@@ -0,0 +1,183 @@
+/// @ts-check
+const babel = require("@babel/core");
+const quasiClassifier = require("./lib/quasiClassifier.cjs");
+const replaceQuasiExpressionTokens = require("./lib/replaceQuasiExpressionTokens.cjs");
+const loadConfigOnce = require("./lib/loadConfigOnce.cjs");
+const murmurhash2_32_gc = require("./lib/hash.cjs");
+const { relative, resolve } = require("path");
+
+/**
+ * @param {string} source
+ * @this {any}
+ * @returns {Promise<string>}
+ */
+module.exports = async function cssLoader(source) {
+  // Config for replacing tokens in css template literals
+  // can be based on a typescript file
+  const options = this.getOptions();
+  const config = options.configPath ? await loadConfigOnce(
+    async () => await this.importModule(resolve(this.rootContext, options.configPath))
+  ) : {};
+  const replaces = config.replaces || {};
+
+  // parse source with babel
+  const ast = babel.parseSync(source, {
+    filename: this.resourcePath,
+    plugins: [
+      [
+        "@babel/plugin-syntax-typescript",
+        { isTSX: this.resourcePath.endsWith(".tsx") },
+      ],
+    ],
+  });
+
+  if (ast === null) {
+    return "";
+  }
+
+  const { types: t } = babel;
+
+  /** @type {{css?: string, styled?: string}} */
+  const localVarNames = {
+    css: undefined,
+    styled: undefined,
+  };
+
+  let index = 0;
+  let varIndex = 0;
+  /** @type {string | null} */
+  let hashedFile = null;
+  const { rootContext, resourcePath } = this;
+
+  /**
+   * find all css template literals in ast
+   * @type {{ code: string, loc: number }[]}
+   */
+  const cssCode = [];
+  babel.traverse(ast, {
+    /**
+     * @param {import("@babel/traverse").NodePath<import("@babel/types").ImportDeclaration>} path
+     */
+    ImportDeclaration(path) {
+      const node = path.node;
+      if (
+        node.source.value !== "next-yak"
+      ) {
+        return;
+      }
+      // Process import specifiers
+      node.specifiers.forEach((specifier) => {
+        if (
+          !("imported" in specifier) ||
+          !specifier.imported ||
+          !t.isIdentifier(specifier.imported)
+        ) {
+          return;
+        }
+
+        const importSpecifier = /** @type {babel.types.Identifier} */ (
+          specifier.imported
+        );
+        const localSpecifier = specifier.local || importSpecifier;
+        if (
+          importSpecifier.name === "styled" ||
+          importSpecifier.name === "css"
+        ) {
+          localVarNames[importSpecifier.name] = localSpecifier.name;
+        }
+      });
+    },
+    /**
+     * @param {import("@babel/traverse").NodePath<import("@babel/types").TaggedTemplateExpression>} path
+     */
+    TaggedTemplateExpression(path) {
+      // Check if the tag name matches the imported 'css' or 'styled' variable
+      const tag = path.node.tag;
+
+      const isCssLiteral =
+        t.isIdentifier(tag) &&
+        /** @type {babel.types.Identifier} */ (tag).name === localVarNames.css;
+      const isStyledLiteral =
+        t.isMemberExpression(tag) &&
+        t.isIdentifier(
+          /** @type {babel.types.MemberExpression} */ (tag).object
+        ) &&
+        /** @type {babel.types.Identifier} */ (
+          /** @type {babel.types.MemberExpression} */ (tag).object
+        ).name === localVarNames.styled;
+
+      const isStyledCall =
+        t.isCallExpression(tag) &&
+        t.isIdentifier(
+          /** @type {babel.types.CallExpression} */ (tag).callee
+        ) &&
+        /** @type {babel.types.Identifier} */ (
+          /** @type {babel.types.CallExpression} */ (tag).callee
+        ).name === localVarNames.styled;
+
+      if (!isCssLiteral && !isStyledLiteral && !isStyledCall) {
+        return;
+      }
+
+      replaceQuasiExpressionTokens(path.node.quasi, replaces, t);
+
+      // Keep the same selector for all quasis belonging to the same css block
+      const literalSelector = `.style${index++}`;
+
+      // Replace the tagged template expression with a call to the 'styled' function
+      const quasis = path.node.quasi.quasis;
+      const quasiTypes = quasis.map((quasi) =>
+        quasiClassifier(quasi.value.raw)
+      );
+
+      for (let i = 0; i < quasis.length; i++) {
+        const quasi = quasis[i];
+        // skip empty quasis
+        if (quasiTypes[i].empty) {
+          continue;
+        }
+        let code = quasi.value.raw;
+        let isMerging = false;
+        // loop over all quasis belonging to the same css block
+        while (i < quasis.length - 1) {
+          const type = quasiTypes[i];
+          // expressions after a partial css are converted into css variables
+          if (
+            type.partialStart ||
+            type.partialEnd ||
+            (isMerging && type.empty)
+          ) {
+            isMerging = true;
+            if (!hashedFile) {
+              const relativePath = relative(rootContext, resourcePath);
+              hashedFile = murmurhash2_32_gc(relativePath);
+            }
+            // replace the expression with a css variable
+            code += `var(--🦬${hashedFile}${varIndex++})`;
+            // as we are after the css block, we need to increment i
+            // to get the very next quasi
+            i++;
+            code += quasis[i].value.raw;
+          } else if (type.empty) {
+            // empty quasis are also added to keep spacings
+            // e.g. `transition: color ${duration} ${easing};`
+            i++;
+            code += quasis[i].value.raw;
+          } else {
+            break;
+          }
+        }
+
+        cssCode.push({
+          code: `${literalSelector} { ${code} }`,
+          loc: quasi.loc?.start.line || 0,
+        });
+      }
+    },
+  });
+
+  // sort by loc
+  cssCode.sort((a, b) => a.loc - b.loc);
+
+  return cssCode.map((code) => code.code).join("\n\n");
+};

package/loaders/lib/hash.cjs

@@ -0,0 +1,60 @@
+/**
+ * JS Implementation of MurmurHash2
+ *
+ * @author <a href="mailto:gary.court@gmail.com">Gary Court</a>
+ * @see http://github.com/garycourt/murmurhash-js
+ * @author <a href="mailto:aappleby@gmail.com">Austin Appleby</a>
+ * @see http://sites.google.com/site/murmurhash/
+ *
+ * @param {string} str ASCII only
+ * @return {string} Base 36 encoded hash result
+ */
+function murmurhash2_32_gc(str) {
+  let l = str.length;
+  let h = l;
+  let i = 0;
+  let k;
+
+  while (l >= 4) {
+    k =
+      (str.charCodeAt(i) & 0xff) |
+      ((str.charCodeAt(++i) & 0xff) << 8) |
+      ((str.charCodeAt(++i) & 0xff) << 16) |
+      ((str.charCodeAt(++i) & 0xff) << 24);
+
+    k =
+      (k & 0xffff) * 0x5bd1e995 + ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16);
+    k ^= k >>> 24;
+    k =
+      (k & 0xffff) * 0x5bd1e995 + ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16);
+
+    h =
+      ((h & 0xffff) * 0x5bd1e995 +
+        ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16)) ^
+      k;
+
+    l -= 4;
+    ++i;
+  } // forgive existing code
+
+  /* eslint-disable no-fallthrough */ switch (l) {
+    case 3:
+      h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
+    case 2:
+      h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
+    case 1:
+      h ^= str.charCodeAt(i) & 0xff;
+      h =
+        (h & 0xffff) * 0x5bd1e995 +
+        ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16);
+  }
+  /* eslint-enable no-fallthrough */
+
+  h ^= h >>> 13;
+  h = (h & 0xffff) * 0x5bd1e995 + ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16);
+  h ^= h >>> 15;
+
+  return (h >>> 0).toString(36);
+}
+
+module.exports = murmurhash2_32_gc;

package/loaders/lib/loadConfigOnce.cjs

@@ -0,0 +1,17 @@
+/// @ts-check
+
+/**
+ * @type {Promise<{ replaces?: Record<string, Record<string, string>> }>}
+ */
+let cache;
+module.exports = function loadConfigOnce(loader) {
+  const config = cache || loader().catch((e) => {
+    console.error("Failed to load yak config:", e);
+    return {};
+  })
+
+  if (!cache) {
+    cache = config;
+  }
+  return config;
+};

package/loaders/lib/quasiClassifier.cjs

@@ -0,0 +1,33 @@
+/// @ts-check
+const stripCssComments = require("./stripCssComments.cjs");
+
+/**
+ * Checks a quasiValue and returns its type
+ * 
+ * - empty: no expressions, no text
+ * - partialStart: starts with a `{`
+ * - partialEnd: does not end with a `}` or `;`
+ * 
+ * @param {string} quasiValue 
+ * @returns {{
+ *  empty: boolean,
+ *  partialStart: boolean,
+ *  partialEnd: boolean,
+ * }}
+ */
+module.exports = function quasiClassifier(quasiValue) {
+    const trimmed = stripCssComments(quasiValue).trim();
+    if (trimmed === "") {
+        return {
+            empty: true,
+            partialStart: false,
+            partialEnd: false,
+        }
+    }
+
+    return {
+        empty: false,
+        partialStart: trimmed.startsWith("{"),
+        partialEnd: !trimmed.endsWith("}") && !trimmed.endsWith(";"),
+    }
+}