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

package/rsbuild/index.ts

@@ -0,0 +1,92 @@
+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.cjs are siblings).
+const rspackLoaderPath = fileURLToPath(new URL("../loaders/turbo-loader.cjs", 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,",
+            transpilation: "Css",
+            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);
+  });
+});

package/runtime/__tests__/attrs.test.tsx

@@ -0,0 +1,490 @@
+import React, { FunctionComponent } from "react";
+import { render } from "@testing-library/react";
+import { beforeEach, expect, describe, it, vi } from "vitest";
+import { YakThemeProvider } from "../context";
+import { styled as styledFn } from "../styled";
+
+// This transform is usually done by the SWC plugin.
+// However this `attrs.test.tsx` does not compile
+// the code before testing
+const styled = Object.assign(styledFn, {
+  div: styledFn("div"),
+  h1: styledFn("h1"),
+  button: styledFn("button"),
+  a: styledFn("a"),
+  p: styledFn("p"),
+  span: styledFn("span"),
+}) as typeof styledFn;
+
+beforeEach(() => {
+  vi.spyOn(console, "warn");
+});
+
+type DataAttributes = { [key: `data-${string}`]: any };
+
+const getSnapshot = (element: React.ReactElement) => render(element).container.firstChild;
+
+it("works fine with an empty object", () => {
+  const Comp = styled.div.attrs({})``;
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`<div />`);
+});
+
+it("works fine with a function that returns an empty object", () => {
+  const Comp = styled.div.attrs(() => ({}))``;
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`<div />`);
+});
+
+it("pass a simple attr via object", () => {
+  const Comp = styled.button.attrs({
+    type: "button",
+  })``;
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`
+    <button
+      type="button"
+    />
+  `);
+});
+
+it("pass a simple attr via function with object return", () => {
+  const Comp = styled.button.attrs(() => ({
+    type: "button",
+  }))``;
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`
+    <button
+      type="button"
+    />
+  `);
+});
+
+it("pass a React component", () => {
+  const ReactComponent: FunctionComponent = () => <p>React Component</p>;
+
+  type ButtonProps = {
+    component: FunctionComponent;
+  };
+
+  const Button = ({ component: ChildComponent }: ButtonProps) => (
+    <button>
+      <ChildComponent />
+    </button>
+  );
+
+  const Comp = styled(Button).attrs<Partial<ButtonProps>>(() => ({
+    component: ReactComponent,
+  }))``;
+
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`
+    <button>
+      <p>
+        React Component
+      </p>
+    </button>
+  `);
+});
+
+it("should not call a function passed to attrs as an object value", () => {
+  const stub = vi.fn(() => "div");
+
+  const Comp = styled.button.attrs<{ foo?: typeof stub }>(() => ({
+    foo: stub,
+  }))``;
+
+  render(<Comp />);
+
+  expect(stub).not.toHaveBeenCalled();
+});
+
+it("pass props to the attr function", () => {
+  const Comp = styled.button.attrs<{ $submit?: boolean }>((p) => ({
+    type: p.$submit ? "submit" : "button",
+  }))``;
+
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`
+    <button
+      type="button"
+    />
+  `);
+  expect(getSnapshot(<Comp $submit />)).toMatchInlineSnapshot(`
+    <button
+      type="submit"
+    />
+  `);
+});
+
+it("should replace props with attrs", () => {
+  const Comp = styled.button.attrs<{ $submit?: boolean }>((p) => ({
+    type: p.$submit ? "submit" : "button",
+    tabIndex: 0,
+  }))``;
+
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`
+    <button
+      tabindex="0"
+      type="button"
+    />
+  `);
+  expect(getSnapshot(<Comp type="reset" />)).toMatchInlineSnapshot(`
+    <button
+      tabindex="0"
+      type="button"
+    />
+  `);
+  expect(getSnapshot(<Comp type="reset" tabIndex={-1} />)).toMatchInlineSnapshot(`
+    <button
+      tabindex="0"
+      type="button"
+    />
+  `);
+});
+
+it("should merge className", () => {
+  const Comp = styled.div.attrs(() => ({
+    className: "meow nya",
+  }))``;
+
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`
+    <div
+      class="meow nya"
+    />
+  `);
+});
+
+it("should merge className from folded attrs", () => {
+  const Inner = styled.div.attrs({ className: "foo" })``;
+
+  const Comp = styled(Inner).attrs(() => ({
+    className: "meow nya",
+  }))``;
+
+  expect(getSnapshot(<Comp className="something" />)).toMatchInlineSnapshot(`
+    <div
+      class="something foo meow nya"
+    />
+  `);
+});
+
+it("should merge className even if its a function", () => {
+  const Comp = styled.div.attrs<{ $purr?: boolean }>((p) => ({
+    className: `meow ${p.$purr ? "purr" : "nya"}`,
+  }))``;
+
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`
+    <div
+      class="meow nya"
+    />
+  `);
+  expect(getSnapshot(<Comp $purr />)).toMatchInlineSnapshot(`
+    <div
+      class="meow purr"
+    />
+  `);
+});
+
+it("should merge style", () => {
+  const Comp = styled.div.attrs(() => ({
+    style: { color: "red", background: "blue" },
+  }))``;
+
+  expect(getSnapshot(<Comp style={{ color: "green", borderStyle: "dotted" }} />))
+    .toMatchInlineSnapshot(`
+    <div
+      style="color: red; border-style: dotted; background: blue;"
+    />
+  `);
+});
+
+it("should work with data and aria attributes", () => {
+  const Comp = styled.div.attrs<DataAttributes>(() => ({
+    "data-foo": "bar",
+    "aria-label": "A simple FooBar",
+  }))``;
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`
+    <div
+      aria-label="A simple FooBar"
+      data-foo="bar"
+    />
+  `);
+});
+
+it("merge attrs when inheriting SC", () => {
+  let attrsCallCount = 0;
+  const Parent = styled.button.attrs(() => {
+    // Parent should be called first and only once
+    // to behave exactly like styled-components
+    expect(attrsCallCount).toEqual(0);
+    attrsCallCount++;
+    return {
+      type: "button",
+      tabIndex: 0,
+    };
+  })``;
+  const Child = styled(Parent).attrs(() => {
+    // Child should be called second and only once
+    // to behave exactly like styled-components
+    expect(attrsCallCount).toEqual(1);
+    attrsCallCount++;
+    return {
+      type: "submit",
+    };
+  })``;
+  expect(getSnapshot(<Child />)).toMatchInlineSnapshot(`
+    <button
+      tabindex="0"
+      type="submit"
+    />
+  `);
+});
+
+it("overrides attrs of the wrapped component and appends its style class", () => {
+  // styled(SubmitButton) renders as a single flattened wrapper — this pins
+  // that flattening keeps styled-components semantics: the outer attrs win
+  // and the outer class comes after the inner one
+  // @ts-expect-error calling with a class name string mimics the compiled css form
+  const SubmitButton = styled.button.attrs({ type: "submit" })("submit_btn");
+  // @ts-expect-error calling with a class name string mimics the compiled css form
+  const ResetButton = styled(SubmitButton).attrs({ type: "reset" })("reset_btn");
+
+  expect(getSnapshot(<SubmitButton />)).toMatchInlineSnapshot(`
+    <button
+      class="submit_btn"
+      type="submit"
+    />
+  `);
+  expect(getSnapshot(<ResetButton />)).toMatchInlineSnapshot(`
+    <button
+      class="submit_btn reset_btn"
+      type="reset"
+    />
+  `);
+});
+
+it("pass attrs to style block", () => {
+  /* Would be a React Router Link in real life */
+  const Comp = styled.a.attrs<DataAttributes>(() => ({
+    href: "#",
+    "data-active-class-name": "--is-active",
+    // @ts-expect-error
+  }))("c1", {
+    style: {
+      "--testVar": (props: any) => props["data-active-class-name"] && "c2",
+    },
+  });
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`
+    <a
+      class="c1"
+      data-active-class-name="--is-active"
+      href="#"
+      style="--testVar: c2;"
+    />
+  `);
+});
+
+it("should pass through children as a normal prop", () => {
+  const Comp = styled.div.attrs(() => ({
+    children: "Probably a bad idea",
+  }))``;
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`
+    <div>
+      Probably a bad idea
+    </div>
+  `);
+});
+
+it("should pass through complex children as well", () => {
+  const Comp = styled.div.attrs(() => ({
+    children: <span>Probably a bad idea</span>,
+  }))``;
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`
+    <div>
+      <span>
+        Probably a bad idea
+      </span>
+    </div>
+  `);
+});
+
+it("should override children", () => {
+  const X = styled.div``;
+  type XProps = React.ComponentProps<typeof X>["children"] & React.JSX.Element;
+  const Comp = styled.div.attrs(() => ({
+    children: <span>Amazing</span>,
+  }))``;
+  expect(getSnapshot(<Comp>Something else</Comp>)).toMatchInlineSnapshot(`
+    <div>
+      <span>
+        Amazing
+      </span>
+    </div>
+  `);
+});
+
+it('should shallow merge "style" prop + attr instead of overwriting', () => {
+  const Paragraph = styled.p.attrs<{ $fontScale?: number }>((p) => ({
+    style: {
+      ...p.style,
+      fontSize: `${p.$fontScale}em`,
+    },
+  }))<{ $fontScale: number }>``;
+
+  const Text: FunctionComponent<Partial<React.ComponentProps<typeof Paragraph>>> = (props) => {
+    const fontScale = 4;
+
+    return (
+      <Paragraph $fontScale={fontScale} {...props}>
+        {props.children}
+      </Paragraph>
+    );
+  };
+
+  const BlueText = styled(Text).attrs(() => ({
+    style: {
+      color: "blue",
+    },
+  }))``;
+
+  expect(getSnapshot(<BlueText>Hello</BlueText>)).toMatchInlineSnapshot(`
+    <p
+      style="color: blue; font-size: 4em;"
+    >
+      Hello
+    </p>
+  `);
+});
+
+it("does not pass transient props to HTML element", () => {
+  type CompProps = { $textColor: string };
+
+  const Comp = styled.div<CompProps>`
+    color: ${(props) => props.$textColor};
+  `;
+
+  const StyledComp = styled(Comp).attrs<Partial<CompProps>>(() => ({
+    $textColor: "red",
+  }))``;
+
+  expect(getSnapshot(<StyledComp />)).toMatchInlineSnapshot(`<div />`);
+});
+
+it.skip('should apply given "as" prop to the progressive type', () => {
+  const Comp = styled.div.attrs<{ as?: any }>({ as: "video" as const })``;
+
+  //@ts-expect-error
+  expect(getSnapshot(<Comp loop />)).toMatchInlineSnapshot();
+});
+
+// our own tests
+it("should remap props", () => {
+  const Comp = styled.button.attrs<{ primary?: boolean; $submit?: boolean }>((p) => ({
+    type: p.$submit ? "submit" : "button",
+    $disabled: p.disabled,
+  }))<{ $disabled?: boolean }>``;
+
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`
+    <button
+      type="button"
+    />
+  `);
+  expect(getSnapshot(<Comp disabled />)).toMatchInlineSnapshot(`
+    <button
+      disabled=""
+      type="button"
+    />
+  `);
+  expect(getSnapshot(<Comp $submit />)).toMatchInlineSnapshot(`
+    <button
+      type="submit"
+    />
+  `);
+});
+
+it("should have optional attrs props as component interface", () => {
+  const Comp = styled.h1.attrs<{ $primary?: boolean }>({
+    $primary: true,
+  })``;
+
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`<h1 />`);
+  expect(getSnapshot(<Comp $primary />)).toMatchInlineSnapshot(`<h1 />`);
+});
+
+it("should have access to theme", () => {
+  const ThemePrinter = ({ theme, ...props }: { theme?: unknown }) => (
+    <pre {...props}>{JSON.stringify(theme)}</pre>
+  );
+  const Comp = styled(ThemePrinter).attrs<DataAttributes>((p) => ({
+    "data-color": (p.theme as { color: string }).color,
+  }))``;
+
+  expect(
+    getSnapshot(
+      <YakThemeProvider theme={{ color: "red" }}>
+        <Comp />
+      </YakThemeProvider>,
+    ),
+  ).toMatchInlineSnapshot(`
+    <pre
+      data-color="red"
+    />
+  `);
+});
+
+it("should pass theme if theme is overwritten", () => {
+  const ThemePrinter = ({ theme, ...props }: { theme?: unknown }) => (
+    <pre {...props}>{JSON.stringify(theme)}</pre>
+  );
+  const Comp = styled(ThemePrinter).attrs({
+    theme: { color: "blue" },
+  })``;
+
+  expect(
+    getSnapshot(
+      <YakThemeProvider theme={{ color: "red" }}>
+        <Comp />
+      </YakThemeProvider>,
+    ),
+  ).toMatchInlineSnapshot(`
+    <pre>
+      {"color":"blue"}
+    </pre>
+  `);
+});
+
+describe("attrs bug issue #163", () => {
+  it("should allow to delete a prop", () => {
+    const Comp = styled.h1.attrs<{ primary?: boolean }>({
+      primary: undefined,
+    })``;
+
+    expect(getSnapshot(<Comp primary />)).toMatchInlineSnapshot(`<h1 />`);
+  });
+
+  it("should allow to rename a prop", () => {
+    const Comp = styled.h1.attrs<{ primary?: boolean }>((p) => ({
+      ...p,
+      primary: undefined,
+      $primary: p.primary,
+    }))``;
+
+    expect(getSnapshot(<Comp primary />)).toMatchInlineSnapshot(`<h1 />`);
+  });
+
+  it("should allow to rename a prop in overwritten attrs", () => {
+    const Parent = styled.h1.attrs<{ count: number }>((p) => {
+      expect(p.count).toBe(1);
+      return {
+        count: ++p.count,
+      };
+    })``;
+    const Comp = styled(Parent).attrs<{ count: number }>((p) => {
+      expect(p.count).toBe(2);
+      return {
+        count: ++p.count,
+      };
+    })``;
+
+    expect(getSnapshot(<Comp count={1} />)).toMatchInlineSnapshot(`
+      <h1
+        count="3"
+      />
+    `);
+  });
+});