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

package/package.json

@@ -1,6 +1,158 @@
 {
   "name": "@yak/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "10.0.0-rc.1",
+  "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": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./static": {
+      "types": "./dist/static/index.d.ts",
+      "default": "./dist/static/index.js"
+    },
+    "./internal": {
+      "types": "./dist/internal.d.ts",
+      "default": "./dist/internal.js"
+    },
+    "./withYak": {
+      "types": "./dist/withYak/index.d.ts",
+      "default": "./dist/withYak/index.js"
+    },
+    "./context/baseContext": {
+      "types": "./dist/context/baseContext.d.ts",
+      "default": "./dist/context/baseContext.js"
+    },
+    "./context": {
+      "react-server": {
+        "types": "./dist/context/index.server.d.ts",
+        "default": "./dist/context/index.server.js"
+      },
+      "default": {
+        "types": "./dist/context/index.d.ts",
+        "default": "./dist/context/index.js"
+      }
+    },
+    "./jsx-runtime": {
+      "types": "./dist/jsx-runtime.d.ts",
+      "default": "./dist/jsx-runtime.js"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./dist/jsx-dev-runtime.d.ts",
+      "default": "./dist/jsx-dev-runtime.js"
+    },
+    "./loaders/webpack-loader": "./dist/loaders/webpack-loader.js",
+    "./vite": {
+      "types": "./dist/loaders/vite-plugin.d.ts",
+      "default": "./dist/loaders/vite-plugin.js"
+    },
+    "./cross-file-resolver": {
+      "types": "./dist/cross-file-resolver/index.d.ts",
+      "default": "./dist/cross-file-resolver/index.js"
+    },
+    "./isolated-source-eval": {
+      "types": "./dist/isolated-source-eval/index.d.ts",
+      "default": "./dist/isolated-source-eval/index.js"
+    },
+    "./rsbuild": {
+      "types": "./dist/rsbuild/index.d.ts",
+      "default": "./dist/rsbuild/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@babel/parser": "^8.0.7",
+    "@swc/core": "~1.16.18",
+    "@yak/swc": "10.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "2.2.13",
+    "@testing-library/react": "16.3.3",
+    "@types/jest": "30.0.0",
+    "@types/node": "26.6.5",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@types/webpack": "5.28.5",
+    "jsdom": "30.1.3",
+    "next": "16.4.2",
+    "react": "19.3.1",
+    "tsdown": "0.23.1",
+    "typescript": "6.0.3",
+    "vite": "8.3.4",
+    "vitest": "5.0.5",
+    "yak-internals": "0.0.0"
+  },
+  "peerDependencies": {
+    "@rsbuild/core": ">=2.0.0",
+    "@types/react": ">=19",
+    "next": ">=16.4.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
+    }
+  },
+  "engines": {
+    "node": ">=22.18.0"
+  },
+  "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"
+  }
 }

package/rsbuild/index.ts

@@ -0,0 +1,91 @@
+import { fileURLToPath } from "node:url";
+import type { RsbuildPlugin } from "@rsbuild/core";
+import {
+  buildYakPluginOptions,
+  resolveYakContext,
+  type YakConfigOptions,
+} from "../withYak/index.js";
+
+// Rspack's loader context is webpack-compatible but does NOT implement
+// `this.loadModule` (the webpack API the webpack-loader relies on). It does
+// provide `this.fs.readFile`, `this.getResolve` and `this.addDependency` — which
+// is exactly what the turbopack loader uses — so the turbopack loader runs as-is
+// on Rspack. The compiled loader lives next to this file under dist/
+// (dist/rsbuild/index.js and dist/loaders/turbo-loader.js are siblings).
+const rspackLoaderPath = fileURLToPath(new URL("../loaders/turbo-loader.js", import.meta.url));
+
+/**
+ * Rsbuild plugin for @yak/react.
+ *
+ * Wires the yak-swc transform as an Rspack `pre` loader that runs the
+ * compile-time CSS extraction in-loader and inlines the result as a
+ * `data:text/css;base64,` import (the same strategy as the Turbopack loader).
+ * Running it as a `pre` loader keeps yak-swc out of Rsbuild's own
+ * `builtin:swc-loader`, so it composes cleanly with that pass (TS/JSX, React
+ * Fast Refresh, and the React Compiler).
+ *
+ * @example
+ * ```ts
+ * // rsbuild.config.ts
+ * import { defineConfig } from "@rsbuild/core";
+ * import { pluginReact } from "@rsbuild/plugin-react";
+ * import { pluginYak } from "@yak/react/rsbuild";
+ *
+ * export default defineConfig({
+ *   plugins: [pluginReact(), pluginYak()],
+ * });
+ * ```
+ */
+export function pluginYak(yakOptions: YakConfigOptions = {}): RsbuildPlugin {
+  return {
+    name: "@yak/react",
+    setup(api) {
+      api.modifyRspackConfig((config) => {
+        const rootContext = api.context.rootPath;
+        const yakPluginOptions = {
+          ...buildYakPluginOptions(yakOptions, rootContext),
+          importMode: {
+            value: "data:text/css;base64,",
+            encoding: "Base64",
+          },
+        };
+
+        config.module ??= {};
+        config.module.rules ??= [];
+        config.module.rules.push(
+          {
+            test: /\.(c|m)?[jt]sx?$/,
+            exclude: /[\\/]node_modules[\\/]/,
+            enforce: "pre",
+            use: [
+              {
+                loader: rspackLoaderPath,
+                options: { yakOptions, yakPluginOptions },
+              },
+            ],
+          },
+          // The extracted CSS is inlined as a `data:text/css;base64,` import.
+          // Rspack parses unknown data URIs as JavaScript, so tell it these are
+          // CSS modules. `css/auto` keeps Rspack's native CSS handling for them.
+          {
+            mimetype: "text/css",
+            type: "css/auto",
+          },
+        );
+
+        // Custom context file (`yak.context.{ts,tsx,js,jsx}`) for server-aware
+        // theming, mirroring the webpack/turbopack integrations.
+        const yakContext = resolveYakContext(yakOptions.contextPath, rootContext);
+        if (yakContext) {
+          config.resolve ??= {};
+          config.resolve.alias = {
+            ...config.resolve.alias,
+            "@yak/react/context/baseContext": yakContext,
+          };
+        }
+      });
+    },
+  };
+}
+
+export type { YakConfigOptions };

package/runtime/__tests__/atoms.test.tsx

@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest";
+import { atoms } from "../atoms";
+import { ClassNames, css } from "../cssLiteral";
+import type { RuntimeStyleProcessor } from "../publicStyledApi";
+
+const classNamesOf = (processor: unknown, props: Record<string, unknown> = {}) => {
+  const classNames = new ClassNames();
+  (processor as RuntimeStyleProcessor<unknown>)(props, classNames, {});
+  return classNames.value;
+};
+
+describe("atoms", () => {
+  it("collects static classes, however they are grouped", () => {
+    expect(classNamesOf(atoms("a b c"))).toBe("a b c");
+    expect(classNamesOf(atoms("a", "b", "c"))).toBe("a b c");
+    expect(classNamesOf(atoms("a b", "c"))).toBe("a b c");
+  });
+
+  it("skips falsy atoms", () => {
+    expect(classNamesOf(atoms("a", false, "b"))).toBe("a b");
+    expect(classNamesOf(atoms(false))).toBe("");
+    expect(classNamesOf(atoms())).toBe("");
+  });
+
+  it("runs dynamic atoms after the static ones", () => {
+    const processor = atoms<{ $active?: boolean }>("a", (props, classNames) => {
+      if (props.$active) classNames.add("active");
+    });
+    expect(classNamesOf(processor, { $active: true })).toBe("a active");
+    expect(classNamesOf(processor, { $active: false })).toBe("a");
+  });
+
+  it("keeps classes a dynamic atom removes removable", () => {
+    const processor = atoms("a b", (_props, classNames) => {
+      classNames.delete("a");
+    });
+    expect(classNamesOf(processor)).toBe("b");
+  });
+
+  it("is static on its own but dynamic once css() wraps it", () => {
+    // styled`` compiles to css("yak123", atoms(...)) and gates its fast path on
+    // the outer processor, so atoms' own $dynamic is not read today. Pinned to
+    // catch a fold of static atoms that would make the fast path reachable
+    expect((atoms("a") as unknown as { $dynamic: boolean }).$dynamic).toBe(false);
+    // @ts-expect-error calling with a class name string mimics the compiled css form
+    expect((css("yak123", atoms("a")) as unknown as { $dynamic: boolean }).$dynamic).toBe(true);
+  });
+});