@yak/react 0.0.0-stage → 10.0.0-rc.0

package/loaders/turbo-evaluator.ts

@@ -0,0 +1,134 @@
+/**
+ * Turbopack evaluator adapter.
+ *
+ * Bridges the low-level `Evaluator` (worker-thread module evaluator) and
+ * turbopack's loader lifecycle. A single `Evaluator` instance is kept as a
+ * singleton on `globalThis` because turbopack may create multiple loader
+ * instances that share the same process — `Symbol.for` keys guarantee all
+ * instances converge on the same evaluator and modification time map.
+ *
+ * Invalidation uses synchronous modification time polling rather than `fs.watch` because
+ * turbopack can re-run a loader before a filesystem watcher event fires,
+ * which would cause the evaluator to return stale cached results.
+ */
+import { statSync } from "node:fs";
+import type { Evaluator } from "../isolated-source-eval/index.js";
+
+const EVALUATOR_KEY = Symbol.for("@yak/react-evaluator");
+const MTIMES_KEY = Symbol.for("@yak/react-mtimes");
+
+/**
+ * A shared `Map` of file paths to their last known modification times, used to detect changes on disk
+ *
+ * e.g. bar.ts -> 1680000000000 (Sat Mar 28 2024 12:00:00 GMT+0000)
+ *
+ * fs.fileWatch is not used as it might be out of sync with turbopacks own file watching also turbopack
+ * spawns a loader pool which could cause a lot of file watchers to be created which can cause performance issues and hitting OS limits
+ */
+const getFileModificationTimes = () =>
+  ((globalThis as typeof globalThis & { [MTIMES_KEY]?: Map<string, number> })[MTIMES_KEY] ??=
+    new Map<string, number>());
+
+/**
+ * Returns the shared evaluator, creating it on first call.
+ *
+ * Uses `Symbol.for` keys on `globalThis` so every turbopack loader instance
+ * in the process converges on the same evaluator and modification time map. A
+ * `beforeExit` handler terminates the worker threads when the process winds
+ * down.
+ */
+export const getEvaluatorSingleton = async (): Promise<Evaluator> => {
+  const processGlobal = globalThis as typeof globalThis & {
+    [EVALUATOR_KEY]?: Promise<Evaluator>;
+  };
+  if (!processGlobal[EVALUATOR_KEY]) {
+    processGlobal[EVALUATOR_KEY] = import("../isolated-source-eval/index.js").then(
+      ({ createEvaluator }) => createEvaluator(),
+    );
+    // Kill the worker threads when the process exits
+    process.on("beforeExit", async () => {
+      const evaluator = await processGlobal[EVALUATOR_KEY]!;
+      await evaluator.dispose();
+    });
+  }
+  return processGlobal[EVALUATOR_KEY]!;
+};
+
+/**
+ * Turbopack runs the loader for the same compilation file-by-file, but multiple files can share the
+ * same dependency. This function detects which dependencies actually changed
+ * on disk and invalidates them once — this prevents re-evaluating the same module multiple times in the same compilation
+ */
+function invalidateDependenciesWithDiskModifications(evaluator: Evaluator): void {
+  const modificationTimes = getFileModificationTimes();
+  const modifiedDependencies: string[] = [];
+  for (const [dep, lastModificationTime] of modificationTimes) {
+    try {
+      const currentModificationTime = statSync(dep).mtimeMs;
+      if (currentModificationTime !== lastModificationTime) {
+        modifiedDependencies.push(dep);
+        modificationTimes.set(dep, currentModificationTime);
+      }
+    } catch {
+      modifiedDependencies.push(dep);
+      modificationTimes.delete(dep);
+    }
+  }
+  if (modifiedDependencies.length > 0) {
+    evaluator.invalidate(...modifiedDependencies);
+  }
+}
+
+/** Snapshots the current modification times of `deps` so the next evaluation can detect changes. */
+function recordModificationTimes(deps: string[]): void {
+  const modificationTimes = getFileModificationTimes();
+  for (const dep of deps) {
+    try {
+      modificationTimes.set(dep, statSync(dep).mtimeMs);
+    } catch {
+      /* file may not exist */
+    }
+  }
+}
+
+/**
+ * Creates an evaluator function scoped to a single loader invocation.
+ *
+ * Before evaluation, checks whether any previously recorded dependency has
+ * changed on disk and invalidates the evaluator cache if so. After a
+ * successful evaluation, records fresh modification times and notifies the caller of
+ * every transitive dependency via `onDependency`.
+ *
+ * @returns A function that evaluates a yak module and returns its exports.
+ *   The returned function accepts:
+ *   - `modulePath` — absolute path to the module to evaluate.
+ *   - `onDependency` — called once per transitive dependency so the loader
+ *     can register file watchers with turbopack.
+ * @throws If the evaluated module throws at runtime — the original stack
+ *   trace from the worker thread is preserved.
+ */
+export async function createCompilationEvaluator(): Promise<
+  (modulePath: string, onDependency?: (dep: string) => void) => Promise<Record<string, unknown>>
+> {
+  const evaluator = await getEvaluatorSingleton();
+  invalidateDependenciesWithDiskModifications(evaluator);
+
+  return async (modulePath, onDependency?) => {
+    const result = await evaluator.evaluate(modulePath);
+    if (!result.ok) {
+      const error = new Error(result.error.message);
+      if (result.error.stack) {
+        error.stack = result.error.stack;
+      }
+      throw error;
+    }
+    // Store times of newly discovered dependencies for next compilation
+    recordModificationTimes(result.dependencies);
+    if (onDependency) {
+      for (const dep of result.dependencies) {
+        onDependency(dep);
+      }
+    }
+    return result.value;
+  };
+}

package/loaders/turbo-loader.ts

@@ -0,0 +1,180 @@
+import { transform as swcTransform } from "@swc/core";
+import { createRequire } from "node:module";
+import { dirname } from "node:path";
+import type { LoaderContext } from "webpack";
+import { parseModule } from "yak-internals/cross-file-resolver/parse-module";
+import { resolveCrossFileConstant } from "yak-internals/cross-file-resolver/resolve";
+import type { YakConfigOptions } from "../withYak/index.js";
+import { createDebugLogger } from "yak-internals/debug-logger";
+import { extractCss } from "yak-internals/extract-css";
+import { parseExports } from "yak-internals/parse-exports";
+import { getSwcParserOptions } from "yak-internals/swc-parser-options";
+
+const universalRequire = typeof require === "undefined" ? createRequire(import.meta.url) : require;
+const yakSwcPluginPath = universalRequire.resolve("@yak/swc");
+const dataUrlImportPrefix = 'import "data:text/css;base64,';
+
+/**
+ * This loader transforms styled-components styles to a static data-url import
+ * The compile-time nexy-yak transformation takes javascript/typescript as input,
+ * strips all inline css code and adds the css as static css urls
+ * e.g.: `import "data:text/css;base64,"`
+ */
+export default async function cssExtractLoader(
+  this: LoaderContext<{ yakOptions: YakConfigOptions; yakPluginOptions: any }>,
+  code: string,
+  sourceMap: string | undefined,
+): Promise<string | void> {
+  const callback = this.async();
+
+  // process only files which include @yak/react for maximal compile performance
+  if (!code.includes("@yak/react")) {
+    return callback(null, code, sourceMap);
+  }
+
+  const {
+    yakPluginOptions,
+    yakOptions: { experiments },
+  } = this.getOptions();
+  const debugLog = createDebugLogger(experiments?.debug, this.rootContext);
+  const resolveTurbopack = this.getResolve({});
+  const transform = createTransform(yakPluginOptions, yakSwcPluginPath);
+
+  const resolveFn = (specifier: string, importer: string) => {
+    return new Promise<string>((resolve, reject) => {
+      resolveTurbopack(dirname(importer), specifier, (err, result) => {
+        if (err) return reject(err);
+        if (!result) return reject(new Error(`Could not resolve ${specifier}`));
+        resolve(result);
+      });
+    });
+  };
+
+  const crossFileDeps = new Set<string>();
+  let evaluate:
+    | Awaited<ReturnType<typeof import("./turbo-evaluator.js").createCompilationEvaluator>>
+    | undefined;
+  const fsReadFile = (filePath: string) => {
+    crossFileDeps.add(filePath);
+    return new Promise<string>((resolve, reject) =>
+      this.fs.readFile(filePath, "utf-8", (err, result) => {
+        if (err) return reject(err);
+        if (!result) return reject(new Error(`File not found: ${filePath}`));
+        resolve(result);
+      }),
+    );
+  };
+
+  try {
+    const result = await transform(code, this.resourcePath, this.rootContext, sourceMap);
+    debugLog("ts", result.code, this.resourcePath);
+
+    let css = extractCss(result.code, "Css");
+    debugLog("css", css, this.resourcePath);
+
+    const { resolved } = await resolveCrossFileConstant(
+      {
+        parse: (modulePath) => {
+          return parseModule(
+            {
+              transpilationMode: "Css",
+              extractExports: async (modulePath) => {
+                const sourceContents = await fsReadFile(modulePath);
+                return parseExports(sourceContents);
+              },
+              getTransformed: async (modulePath) => {
+                const sourceContent = await fsReadFile(modulePath);
+                return transform(sourceContent, modulePath, this.rootContext);
+              },
+              evaluateYakModule: async (modulePath: string) => {
+                crossFileDeps.add(modulePath);
+                /*
+                 * Turbopack doesn't let us know when a compilation start so by using a singleton evaluator we
+                 * we can at least ensture that we scan for file modifications only once per loader call
+                 */
+                evaluate ??= await (
+                  await import("./turbo-evaluator.js")
+                ).createCompilationEvaluator();
+                return evaluate(modulePath, (dep) => crossFileDeps.add(dep));
+              },
+            },
+            modulePath,
+          );
+        },
+        resolve: resolveFn,
+      },
+      this.resourcePath,
+      css,
+    );
+
+    // Register cross-file dependencies so turbopack re-runs this loader
+    // when any dependency changes (analogous to webpack's this.addDependency)
+    for (const dep of crossFileDeps) {
+      this.addDependency(dep);
+    }
+
+    const codeWithCrossFileResolved = replaceDataUrlImport(result.code, resolved);
+
+    debugLog("css-resolved", resolved, this.resourcePath);
+    return callback(null, codeWithCrossFileResolved, result.map);
+  } catch (error) {
+    // Register cross-file dependencies even on error so turbopack re-runs
+    // this loader when a broken dependency is fixed.
+    for (const dep of crossFileDeps) {
+      this.addDependency(dep);
+    }
+    return callback(error instanceof Error ? error : new Error(String(error)));
+  }
+}
+
+/**
+ * Swap the data-url import the SWC plugin emitted for one carrying the resolved css.
+ *
+ * Modules which import @yak/react without declaring styles get no such import and are
+ * returned unchanged. The import is matched from the start of the line so that source
+ * code merely mentioning a data url cannot be mistaken for it.
+ */
+function replaceDataUrlImport(code: string, resolvedCss: string): string {
+  const lines = code.split("\n");
+  const lineIndex = lines.findIndex((line) => line.trimStart().startsWith(dataUrlImportPrefix));
+  if (lineIndex === -1) {
+    return code;
+  }
+  lines[lineIndex] = `${dataUrlImportPrefix}${Buffer.from(resolvedCss).toString("base64")}";`;
+  return lines.join("\n");
+}
+
+function createTransform(yakPluginOptions: any, yakSwcPluginPath: string) {
+  return (data: string, modulePath: string, rootPath: string, sourceMap?: any) =>
+    // https://github.com/vercel/next.js/blob/canary/packages/next/src/build/webpack/loaders/next-swc-loader.ts#L143
+    swcTransform(data, {
+      filename: modulePath,
+      inputSourceMap: sourceMap,
+      sourceMaps: true,
+      sourceFileName: modulePath,
+      sourceRoot: rootPath,
+      jsc: {
+        // Derive the parser from the file name the same way Next.js does
+        parser: getSwcParserOptions(modulePath),
+        experimental: {
+          // Keep `import data from "./data.json" with { type: "json" }` intact
+          keepImportAttributes: true,
+          plugins: [[yakSwcPluginPath, yakPluginOptions]],
+        },
+        transform: {
+          react: {
+            runtime: "preserve",
+          },
+        },
+        target: "es2022",
+        loose: false,
+        minify: {
+          compress: false,
+          mangle: false,
+        },
+        preserveAllComments: true,
+      },
+      minify: false,
+      isModule: true,
+    });
+}

package/loaders/vite-plugin.ts

@@ -0,0 +1,28 @@
+import { createViteYakPlugin } from "yak-internals/vite-plugin-core";
+
+export type { ViteYakPluginOptions } from "yak-internals/vite-plugin-core";
+
+/**
+ * Vite plugin for @yak/react: compiles the css``, styled`` and css prop
+ * styles in your source code to plain CSS at build time.
+ *
+ * Add it before the framework's plugin so it sees your original source code.
+ *
+ * @usage
+ * ```ts
+ * // vite.config.ts
+ * import { defineConfig } from "vite";
+ * import react from "@vitejs/plugin-react-swc";
+ * import { viteYak } from "@yak/react/vite";
+ *
+ * export default defineConfig({
+ *   plugins: [viteYak(), react()],
+ * });
+ * ```
+ */
+export const viteYak = createViteYakPlugin({
+  name: "@yak/react",
+  reactRefreshReg: true,
+  excludePattern: /packages\/yak-react/,
+  foldStatic: true,
+});

package/loaders/webpack-loader.ts

@@ -0,0 +1,44 @@
+import type { LoaderContext } from "webpack";
+import type { YakConfigOptions } from "../withYak/index.js";
+import { createDebugLogger } from "yak-internals/debug-logger";
+import { extractCss } from "yak-internals/extract-css";
+import { resolveCrossFileConstant } from "./lib/resolveCrossFileSelectors.js";
+
+/**
+ * Transform typescript to css
+ *
+ * This loader takes the cached result from the yak tsloader
+ * and extracts the css from the generated comments
+ */
+export default async function cssExtractLoader(
+  this: LoaderContext<YakConfigOptions>,
+  // Instead of the source code, we receive the extracted css
+  // from the yak-swc transformation
+  _code: string,
+  sourceMap: string | undefined,
+): Promise<string | void> {
+  const callback = this.async();
+  // Load the module from the original typescript request (without !=! and the query)
+  return this.loadModule(this.resourcePath, (err, source) => {
+    if (err) {
+      return callback(err);
+    }
+    if (!source) {
+      return callback(new Error(`Source code for ${this.resourcePath} is empty`));
+    }
+    const { experiments } = this.getOptions();
+    const debugLog = createDebugLogger(
+      experiments?.debug,
+      this._compiler?.context ?? process.cwd(),
+    );
+
+    debugLog("ts", source, this.resourcePath);
+    const css = extractCss(source, experiments?.transpilationMode);
+    debugLog("css", css, this.resourcePath);
+
+    return resolveCrossFileConstant(this, this.context, css).then((result) => {
+      debugLog("css-resolved", result, this.resourcePath);
+      return callback(null, result, sourceMap);
+    }, callback);
+  });
+}

package/package.json

@@ -1,6 +1,217 @@
 {
   "name": "@yak/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "10.0.0-rc.0",
+  "description": "@yak/react is a CSS-in-JS library for React: styled-components syntax with CSS extracted at build time. Works with Next.js, Vite and Rsbuild.",
+  "keywords": [
+    "css-in-js",
+    "next.js",
+    "react",
+    "styled-components",
+    "typescript"
+  ],
+  "homepage": "https://yak.js.org/",
+  "bugs": {
+    "url": "https://github.com/DigitecGalaxus/next-yak/issues"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Jan Nicklas"
+  },
+  "maintainers": [
+    {
+      "name": "Luca Schneider"
+    }
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/DigitecGalaxus/next-yak.git"
+  },
+  "files": [
+    "dist",
+    "loaders",
+    "runtime",
+    "withYak",
+    "rsbuild",
+    "LICENSE"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "types": "./dist/",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./static": {
+      "import": {
+        "types": "./dist/static/index.d.ts",
+        "default": "./dist/static/index.js"
+      },
+      "require": {
+        "types": "./dist/static/index.d.cts",
+        "default": "./dist/static/index.cjs"
+      }
+    },
+    "./internal": {
+      "import": {
+        "types": "./dist/internal.d.ts",
+        "default": "./dist/internal.js"
+      },
+      "require": {
+        "types": "./dist/internal.d.cts",
+        "default": "./dist/internal.cjs"
+      }
+    },
+    "./withYak": {
+      "import": {
+        "types": "./dist/withYak/index.d.ts",
+        "default": "./dist/withYak/index.js"
+      },
+      "require": {
+        "types": "./dist/withYak/index.d.cts",
+        "default": "./dist/withYak/index.cjs"
+      }
+    },
+    "./context/baseContext": {
+      "import": {
+        "types": "./dist/context/baseContext.d.ts",
+        "default": "./dist/context/baseContext.js"
+      },
+      "require": {
+        "types": "./dist/context/baseContext.d.cts",
+        "default": "./dist/context/baseContext.cjs"
+      }
+    },
+    "./context": {
+      "react-server": {
+        "import": {
+          "types": "./dist/context/index.server.d.ts",
+          "default": "./dist/context/index.server.js"
+        },
+        "require": {
+          "types": "./dist/context/index.server.d.cts",
+          "default": "./dist/context/index.server.cjs"
+        }
+      },
+      "default": {
+        "import": {
+          "types": "./dist/context/index.d.ts",
+          "default": "./dist/context/index.js"
+        },
+        "require": {
+          "types": "./dist/context/index.d.cts",
+          "default": "./dist/context/index.cjs"
+        }
+      }
+    },
+    "./jsx-runtime": {
+      "import": {
+        "types": "./dist/jsx-runtime.d.ts",
+        "default": "./dist/jsx-runtime.js"
+      },
+      "require": {
+        "types": "./dist/jsx-runtime.d.cts",
+        "default": "./dist/jsx-runtime.cjs"
+      }
+    },
+    "./jsx-dev-runtime": {
+      "import": {
+        "types": "./dist/jsx-dev-runtime.d.ts",
+        "default": "./dist/jsx-dev-runtime.js"
+      },
+      "require": {
+        "types": "./dist/jsx-dev-runtime.d.cts",
+        "default": "./dist/jsx-dev-runtime.cjs"
+      }
+    },
+    "./loaders/webpack-loader": "./dist/loaders/webpack-loader.cjs",
+    "./vite": {
+      "import": {
+        "types": "./dist/loaders/vite-plugin.d.ts",
+        "default": "./dist/loaders/vite-plugin.js"
+      }
+    },
+    "./cross-file-resolver": {
+      "import": {
+        "types": "./dist/cross-file-resolver/index.d.ts",
+        "default": "./dist/cross-file-resolver/index.js"
+      }
+    },
+    "./isolated-source-eval": {
+      "import": {
+        "types": "./dist/isolated-source-eval/index.d.ts",
+        "default": "./dist/isolated-source-eval/index.js"
+      }
+    },
+    "./rsbuild": {
+      "import": {
+        "types": "./dist/rsbuild/index.d.ts",
+        "default": "./dist/rsbuild/index.js"
+      }
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@babel/parser": "^8.0.4",
+    "@swc/core": "~1.15.47",
+    "@yak/swc": "10.0.0-rc.0"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "2.2.2",
+    "@testing-library/react": "16.3.3",
+    "@types/jest": "30.0.0",
+    "@types/node": "26.4.1",
+    "@types/react": "19.2.18",
+    "@types/react-dom": "19.2.5",
+    "@types/webpack": "5.28.5",
+    "jsdom": "30.0.1",
+    "next": "16.3.4",
+    "react": "19.2.8",
+    "tsdown": "0.22.14",
+    "typescript": "6.0.3",
+    "vite": "8.2.2",
+    "vitest": "4.1.11",
+    "yak-internals": "0.0.0"
+  },
+  "peerDependencies": {
+    "@rsbuild/core": ">=2.0.0",
+    "@types/react": ">=19",
+    "next": ">=16.1.0",
+    "react": ">=19.0.0",
+    "vite": ">=7.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@rsbuild/core": {
+      "optional": true
+    },
+    "@types/react": {
+      "optional": true
+    },
+    "next": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "tsdown",
+    "watch": "tsdown --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"
+  }
 }