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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Jan Nicklas
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,115 @@
-# Temporary Holding Version
+# @yak/react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+![A yak Riding on a rusty SWC Rocket](https://github.com/user-attachments/assets/72494b1c-db1a-4ff7-bd6f-2ed3535fb126)
+
+[![npm version](https://badge.fury.io/js/@yak%2Freact.svg)](https://www.npmjs.com/package/@yak/react)
+[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/DigitecGalaxus/next-yak/blob/main/LICENSE)
+
+**@yak/react** is a build-time CSS-in-JS library powered by a Rust SWC plugin. Write styled-components syntax, get zero-runtime CSS extraction and full React Server Components compatibility.
+
+Works with **Next.js** (Webpack & Turbopack), **Vite** (7+, including Vite 8 with OXC), and **Storybook**. Any Vite-based framework works out of the box, including react-router, TanStack Start, and more.
+
+> **Production-proven:** @yak/react is sponsored and used in production by [Digitec Galaxus](https://www.galaxus.ch), the largest e-commerce platform in Switzerland, across thousands of styled components, delivering measurable improvements in Core Web Vitals.
+
+## Features
+
+- **Multi-Framework**: First-class support for Next.js (Webpack & Turbopack), Vite 7+ (react-router, TanStack Start, ...), and Storybook
+- **Build-Time CSS**: Extracts CSS at compile time with zero runtime overhead
+- **React Server Components**: Works seamlessly with both Server and Client Components
+- **Cross-File Imports**: Import constants, mixins, and selectors from `.yak` files and other modules, works across all bundlers
+- **Standard CSS Syntax**: Write familiar CSS with full nesting, keyframes, and media query support
+- **Integrates with Atomic CSS**: Combines with utility-first frameworks like Tailwind CSS
+- **TypeScript First**: Fully typed props, theme context, and cross-file selectors
+- **Lightweight Runtime**: Minimal footprint, just swaps CSS class names based on props
+- **Minimal Dependencies**: Only 8 dependencies in total (including transitive ones)
+
+## Documentation
+
+Full documentation, guides, and a live playground are available at **[yak.js.org](https://yak.js.org/)**.
+
+- [Getting Started (Next.js)](https://yak.js.org/docs/getting-started)
+- [Vite Setup](https://yak.js.org/docs/vite)
+- [Storybook Setup](https://yak.js.org/docs/storybook)
+- [Migration from styled-components](https://yak.js.org/docs/migration-from-styled-components)
+- [Features](https://yak.js.org/docs/features)
+- [Playground](https://yak.js.org/playground)
+
+## Compatibility
+
+Versions before 10.x are on npm as [`next-yak`](https://www.npmjs.com/package/next-yak).
+
+| Version | Next.js   | Vite            | react       | swc_core |
+| ------- | --------- | --------------- | ----------- | -------- |
+| 10.x    | >= 16.4.0 | >= 7.0.0        | 19.x        | 79.0.0   |
+| 9.x     | >= 16.1.0 | >= 7.0.0 (9.1+) | 19.x        | 56.0.0   |
+| 8.x     | >= 16.0.0 | -               | 19.x        | 45.0.1   |
+| 7.x     | >= 15.4.4 | -               | 19.x        | 38.0.1   |
+| 6.x     | >= 15.4.1 | -               | 19.x        | 27.0.6   |
+| 5.x     | >= 15.2.1 | -               | 19.x        | 16.0.0   |
+| 4.x     | >= 15.0.4 | -               | 19.x        | 5.0.1    |
+| 3.x     | 15.x      | -               | 18.x / 19.x | 3.0.2    |
+| 2.x     | 14.x      | -               | 18.x / 19.x | 0.279.0  |
+
+## Installation
+
+```bash
+npm install @yak/react
+```
+
+## Quick Start
+
+### Next.js
+
+```js
+// next.config.ts
+import { withYak } from "@yak/react/withYak";
+
+export default withYak({
+  // your next.js config
+});
+```
+
+### Vite
+
+```js
+// 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()],
+});
+```
+
+### Usage
+
+```jsx
+import { styled } from "@yak/react";
+
+const Button = styled.button`
+  background: #bf4f74;
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+`;
+```
+
+### Jest
+
+`@yak/react` is ESM only. With `next/jest`, add it to `transpilePackages` in your Next.js config, so that Jest can load it:
+
+```js
+// next.config.mjs
+const nextConfig = {
+  transpilePackages: ["@yak/react"],
+};
+```
+
+## License
+
+**@yak/react** is licensed under the [MIT License](https://github.com/DigitecGalaxus/next-yak/blob/main/LICENSE).
+
+## Contributing
+
+Contributions are welcome! The [contributing guide](https://github.com/DigitecGalaxus/next-yak/blob/main/CONTRIBUTION.md) helps you get started.

package/dist/context/baseContext.d.ts

@@ -0,0 +1,5 @@
+import { YakTheme } from "@yak/react";
+//#region runtime/context/baseContext.d.ts
+export declare function getYakThemeContext(): YakTheme | undefined;
+//#endregion
+//# sourceMappingURL=baseContext.d.ts.map

package/dist/context/baseContext.js

@@ -0,0 +1,8 @@
+//#region runtime/context/baseContext.tsx
+function getYakThemeContext() {
+	return {};
+}
+
+//#endregion
+export { getYakThemeContext };
+//# sourceMappingURL=baseContext.js.map

package/dist/context/baseContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"baseContext.js","names":[],"sources":["../../runtime/context/baseContext.tsx"],"sourcesContent":["import type { YakTheme } from \"@yak/react\";\n\nexport function getYakThemeContext() {\n  return {} as YakTheme | undefined;\n}\n"],"mappings":";AAEA,SAAgB,qBAAqB;CACnC,OAAO,CAAC;AACV"}

package/dist/context/index.d.ts

@@ -0,0 +1,20 @@
+import React, { ReactNode } from "react";
+//#region runtime/context/index.d.ts
+export interface YakTheme {}
+/**
+ * Returns the current yak theme context
+ *
+ * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/yak-react/runtime/context/README.md
+ */
+export declare const useTheme: () => YakTheme;
+/**
+ * Yak theme context provider
+ *
+ * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/yak-react/runtime/context/README.md
+ */
+export declare const YakThemeProvider: ({ children, theme }: {
+  children: ReactNode;
+  theme?: YakTheme;
+}) => React.JSX.Element;
+//#endregion
+//# sourceMappingURL=index.d.ts.map

package/dist/context/index.js

@@ -0,0 +1,15 @@
+"use client";
+
+import React, { createContext, use } from "react";
+
+//#region runtime/context/index.tsx
+const YakContext = createContext({});
+const useTheme = () => {
+	const context = use(YakContext);
+	return context instanceof Promise ? use(context) : context;
+};
+const YakThemeProvider = ({ children, theme = {} }) => /* @__PURE__ */ React.createElement(YakContext.Provider, { value: theme }, children);
+
+//#endregion
+export { YakThemeProvider, useTheme };
+//# sourceMappingURL=index.js.map

package/dist/context/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../runtime/context/index.tsx"],"sourcesContent":["\"use client\";\n//\n// This file is the client component (browser & ssr) version of index.server.tsx\n//\nimport React, { ReactNode, createContext, use } from \"react\";\n\nexport interface YakTheme {}\n\n/**\n * The yak theme context\n * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/yak-react/runtime/context/README.md\n */\nconst YakContext = createContext<YakTheme>({});\n\n/**\n * Returns the current yak theme context\n *\n * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/yak-react/runtime/context/README.md\n */\nexport const useTheme = (): YakTheme => {\n  const context = use(YakContext);\n  return context instanceof Promise ? use(context) : context;\n};\n\n/**\n * Yak theme context provider\n *\n * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/yak-react/runtime/context/README.md\n */\nexport const YakThemeProvider = ({\n  children,\n  theme = {},\n}: {\n  children: ReactNode;\n  theme?: YakTheme;\n}) => <YakContext.Provider value={theme}>{children}</YakContext.Provider>;\n"],"mappings":";;;;;AAYA,MAAM,aAAa,cAAwB,CAAC,CAAC;AAO7C,MAAa,iBAA2B;CACtC,MAAM,UAAU,IAAI,UAAU;CAC9B,OAAO,mBAAmB,UAAU,IAAI,OAAO,IAAI;AACrD;AAOA,MAAa,oBAAoB,EAC/B,UACA,QAAQ,CAAC,QAIL,oCAAC,WAAW,UAAZ,EAAqB,OAAO,MAAsC,GAA9B,QAA8B"}

package/dist/context/index.server.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from "react";
+import { YakTheme } from "./index.js";
+//#region runtime/context/index.server.d.ts
+export declare const useTheme: () => YakTheme | undefined;
+export declare const YakThemeProvider: ({ children }: {
+  children: ReactNode;
+}) => React.JSX.Element;
+//#endregion
+//# sourceMappingURL=index.server.d.ts.map

package/dist/context/index.server.js

@@ -0,0 +1,17 @@
+import React, { cache, use } from "react";
+import { YakThemeProvider as YakThemeProvider$1 } from "./index.js";
+import { getYakThemeContext } from "@yak/react/context/baseContext";
+
+//#region runtime/context/index.server.tsx
+const getYakContext = cache(() => getYakThemeContext());
+const useTheme = () => {
+	const theme = getYakContext();
+	return theme instanceof Promise ? use(theme) : theme;
+};
+const YakThemeProvider = ({ children }) => {
+	return /* @__PURE__ */ React.createElement(YakThemeProvider$1, { theme: getYakContext() }, children);
+};
+
+//#endregion
+export { YakThemeProvider, useTheme };
+//# sourceMappingURL=index.server.js.map

package/dist/context/index.server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.server.js","names":["YakThemeClientProvider"],"sources":["../../runtime/context/index.server.tsx"],"sourcesContent":["//\n// This file is the react-server component version of index.tsx\n//\n\n// @ts-ignore - in the current @types/react \"cache\" is not typed\nimport React, { ReactNode, cache, use } from \"react\";\nimport { YakTheme, YakThemeProvider as YakThemeClientProvider } from \"./index.js\";\n\n// the following import might be changed by\n// the user config in withYak to point to their own\n// context\nimport { getYakThemeContext } from \"@yak/react/context/baseContext\";\n\n/** Request based RSC YAK Context */\nconst getYakContext = cache(() => getYakThemeContext());\nexport const useTheme = (): YakTheme | undefined => {\n  const theme: YakTheme | undefined | Promise<YakTheme> = getYakContext();\n  return theme instanceof Promise ? use(theme) : theme;\n};\nexport const YakThemeProvider = ({ children }: { children: ReactNode }) => {\n  return <YakThemeClientProvider theme={getYakContext()}>{children}</YakThemeClientProvider>;\n};\n"],"mappings":";;;;;AAcA,MAAM,gBAAgB,YAAY,mBAAmB,CAAC;AACtD,MAAa,iBAAuC;CAClD,MAAM,QAAkD,cAAc;CACtE,OAAO,iBAAiB,UAAU,IAAI,KAAK,IAAI;AACjD;AACA,MAAa,oBAAoB,EAAE,eAAwC;CACzE,OAAO,oCAACA,oBAAD,EAAwB,OAAO,cAAc,EAAqC,GAAjC,QAAiC;AAC3F"}

package/dist/cross-file-resolver/index.d.ts

@@ -0,0 +1,199 @@
+//#region ../yak-internals/cross-file-resolver/types.d.ts
+interface Cache<STORED> {
+  set(key: string, data: STORED): void;
+  get(key: string): STORED | undefined;
+  addDependency?(key: string, filePath: string): void;
+}
+//#endregion
+//#region ../yak-internals/cross-file-resolver/parseModule.d.ts
+export declare function parseModule(context: ParseContext, modulePath: string): Promise<ParsedModule>;
+export declare function uncachedParseModule(context: ParseContext, modulePath: string): Promise<ParsedModule>;
+type ParseContext = {
+  cache?: {
+    parse?: Cache<ParsedModule>;
+  };
+  evaluateYakModule?: (modulePath: string) => Promise<Record<string, unknown>> | Record<string, unknown>;
+  extractExports: (modulePath: string) => Promise<ModuleExports> | ModuleExports;
+  getTransformed: (modulePath: string) => Promise<{
+    code: string;
+    map?: string;
+  }> | {
+    code: string;
+    map?: string;
+  };
+};
+type ModuleExports = {
+  importYak: boolean;
+  named: Record<string, ModuleExport>;
+  all: string[];
+};
+type ConstantExport = {
+  type: "constant";
+  value: string | number;
+};
+type RecordExport = {
+  type: "record";
+  value: Record<string, ModuleExport>;
+};
+type UnsupportedExport = {
+  type: "unsupported";
+  hint?: string;
+  /**
+   * Source location of the offending expression. Populated by the parser
+   * when it has access to source text; left undefined for runtime-evaluated
+   * yak modules. The error formatter is responsible for any rendering.
+   */
+  source?: UnsupportedExportSource;
+};
+type UnsupportedExportSource = {
+  /** 1-based line number, 0-based column — same convention as Babel `loc`. */
+  start: {
+    line: number;
+    column: number;
+  };
+  end: {
+    line: number;
+    column: number;
+  };
+  /** The text of `start.line` from the original source — kept so the
+   * error formatter can render a snippet without re-reading the file. */
+  lineText: string;
+};
+type ReExport = {
+  type: "re-export";
+  name: string;
+  from: string;
+};
+type NamespaceReExport = {
+  type: "namespace-re-export";
+  from: string;
+};
+type TagTemplateExport = {
+  type: "tag-template";
+};
+type ModuleExport = ConstantExport | TagTemplateExport | RecordExport | UnsupportedExport | ReExport | NamespaceReExport;
+type ParsedModule = {
+  path: string;
+  exports: ModuleExports;
+} & ({
+  type: "regular";
+  js?: {
+    code: string;
+    map?: string;
+  };
+  styledComponents?: Record<string, StyledComponent>;
+  mixins?: Record<string, Mixin>;
+} | {
+  type: "yak";
+});
+type StyledComponent = {
+  type: "styled-component";
+  value: string;
+  nameParts: string[];
+};
+type Mixin = {
+  type: "mixin";
+  value: string;
+  nameParts: string[];
+};
+//#endregion
+//#region ../yak-internals/cross-file-resolver/resolveCrossFileConstant.d.ts
+/**
+ * Resolves cross-file selectors in css files
+ *
+ * e.g.:
+ * theme.ts:
+ * ```ts
+ * export const colors = {
+ *   primary: "#ff0000",
+ *   secondary: "#00ff00",
+ * };
+ * ```
+ *
+ * styles.ts:
+ * ```ts
+ * import { colors } from "./theme";
+ * export const button = css`
+ *  background-color: ${colors.primary};
+ * `;
+ */
+export declare function resolveCrossFileConstant(context: ResolveContext, filePath: string, css: string): Promise<{
+  resolved: string;
+  dependencies: string[];
+}>;
+export declare function uncachedResolveCrossFileConstant(context: ResolveContext, filePath: string, css: string): Promise<{
+  resolved: string;
+  dependencies: string[];
+}>;
+type ResolveContext = {
+  parse: (modulePath: string) => Promise<ParsedModule> | ParsedModule;
+  cache?: {
+    resolve?: Cache<Promise<{
+      resolved: ResolvedModule;
+      dependencies: string[];
+    }>>;
+    resolveCrossFileConstant?: Cache<Promise<{
+      resolved: string;
+      dependencies: string[];
+    }>>;
+  };
+  exportAllLimit?: number;
+  resolve: (specifier: string, importer: string) => Promise<string> | string;
+};
+type ExtendedRecordExport = {
+  type: "record";
+  value: Record<string, ResolvedExport>;
+};
+type ResolvedMixin = {
+  type: "mixin";
+  value: string;
+};
+type ResolvedStyledComponent = {
+  type: "styled-component";
+  className: string;
+};
+type ResolvedExport = Exclude<ModuleExport, RecordExport> | ExtendedRecordExport | ResolvedStyledComponent | ResolvedMixin;
+type ResolvedExports = {
+  named: Record<string, ResolvedExport>;
+  all: string[];
+};
+type ResolvedModule = {
+  path: string;
+  exports: ResolvedExports;
+};
+//#endregion
+//#region ../yak-internals/cross-file-resolver/Errors.d.ts
+export declare class CauseError extends Error {
+  circular?: boolean;
+  constructor(message: string, options?: {
+    cause?: unknown;
+  });
+}
+export declare class ResolveError extends CauseError {}
+/**
+ * Thrown for `unsupported` exports. Subclassed so the surrounding
+ * `resolveModuleExport` catch can recognise that the error already
+ * carries its own "Unable to resolve … in module …" wrapper and
+ * doesn't need another one stacked on top.
+ */
+export declare class UnsupportedExportError extends ResolveError {}
+export declare class CircularDependencyError extends CauseError {
+  constructor(message: string, options?: {
+    cause?: unknown;
+  });
+}
+//#endregion
+//#region ../yak-internals/loaders/lib/parseExports.d.ts
+/**
+ * Extracts a module's exports for the cross-file resolver by parsing with babel. Nothing is executed.
+ *
+ * Handles `export const`, export lists (`export { x }`), re-exports with a `from`,
+ * `export *`, and `export default`.
+ * Anything else becomes an `unsupported` entry with its source location, or is skipped.
+ *
+ * Throws if the source doesn't parse.
+ */
+export declare function parseExports(sourceContents: string): Promise<ModuleExports>;
+//#endregion
+export type { Mixin, ModuleExport, ModuleExports, ParseContext, ParsedModule, ResolveContext, ResolvedExport, ResolvedExports, ResolvedModule, StyledComponent, UnsupportedExportSource };
+//# sourceMappingURL=index.d.ts.map