@yak/solid 0.0.0

package/runtime/__tests__/styled.test.tsx

@@ -0,0 +1,270 @@
+// @ts-nocheck
+// We are testing internal functionality which does not match
+// 1:1 the API exposed to the user before compilation.
+// Therefore types are not matching and need to be ignored.
+import { expect, it, vi } from "vitest";
+import { YakThemeProvider } from "../context/index.ts";
+import { css } from "../cssLiteral.ts";
+import { mergeCssProp } from "../internals/mergeCssProp.ts";
+import { styled as styledFn } from "../styled.ts";
+import { renderInto } from "./testUtils.tsx";
+
+// This transform is usually done by the SWC plugin.
+// However this `styled.test.tsx` does not compile
+// the code before testing
+const styled = Object.assign(styledFn, {
+  div: styledFn("div"),
+  input: styledFn("input"),
+  button: styledFn("button"),
+}) as typeof styledFn;
+
+it("should render a literal element", () => {
+  const Component = styled.input``;
+  const container = renderInto(() => <Component />);
+  expect(container.innerHTML).toBe("<input>");
+});
+
+it("should render a literal element with styles", () => {
+  const Component = styled.input("cssClass");
+  const container = renderInto(() => <Component />);
+  expect(container.querySelector("input")?.className).toBe("cssClass");
+});
+
+it("should forward properties", () => {
+  const Component = styled.input("cssClass");
+  const container = renderInto(() => <Component type="text" />);
+  const input = container.querySelector("input")!;
+  expect(input.className).toBe("cssClass");
+  expect(input.getAttribute("type")).toBe("text");
+});
+
+it("should forward children", () => {
+  const Component = styled.div``;
+  const container = renderInto(() => (
+    <Component>
+      <button>Click me!</button>
+    </Component>
+  ));
+  expect(container.innerHTML).toBe("<div><button>Click me!</button></div>");
+});
+
+it("should filter out properties starting with $", () => {
+  const Component = styled.input``;
+  const container = renderInto(() => <Component $forwardedProp="notForwarded" />);
+  const input = container.querySelector("input")!;
+  expect(input.getAttributeNames()).toEqual([]);
+});
+
+it("should filter out properties starting with $ when passing to custom components", () => {
+  let forwardedKeys: string[] | null = null;
+  const Custom = (props) => {
+    forwardedKeys = Object.keys(props).filter((key) => props[key] !== undefined);
+    return null;
+  };
+  const StyledCustom = styled(Custom)``;
+  renderInto(() => <StyledCustom $forwardedProp="notForwarded" />);
+  expect(forwardedKeys).not.toContain("$forwardedProp");
+  expect(forwardedKeys).not.toContain("theme");
+});
+
+it("should pass the generated class to custom components", () => {
+  let receivedClass: string | undefined;
+  const Custom = (props) => {
+    receivedClass = props.class;
+    return null;
+  };
+  const StyledCustom = styled(Custom)("customClass");
+  renderInto(() => <StyledCustom />);
+  expect(receivedClass).toBe("customClass");
+});
+
+it("should merge the class names of a styled(styled()) chain in order", () => {
+  const Inner = styled.input("innerClass");
+  const Outer = styled(Inner)("outerClass");
+  const container = renderInto(() => <Outer />);
+  expect(container.querySelector("input")?.className).toBe("innerClass outerClass");
+});
+
+it("should render a styled(styled()) chain as a single element", () => {
+  const Inner = styled.div("innerClass");
+  const Outer = styled(Inner)("outerClass");
+  const container = renderInto(() => <Outer />);
+  expect(container.querySelectorAll("div").length).toBe(1);
+});
+
+it("should execute each dynamic style function exactly once per render", () => {
+  const innerFn = vi.fn(() => css("innerDynamic"));
+  const Inner = styled.input("innerClass", innerFn);
+  const Outer = styled(Inner)("outerClass");
+  const container = renderInto(() => <Outer />);
+  expect(innerFn).toHaveBeenCalledTimes(1);
+  expect(container.querySelector("input")?.className).toBe("innerClass innerDynamic outerClass");
+});
+
+it("should support attrs objects", () => {
+  const Component = styled.button.attrs({ type: "button" })("cssClass");
+  const container = renderInto(() => <Component />);
+  const button = container.querySelector("button")!;
+  expect(button.getAttribute("type")).toBe("button");
+  expect(button.className).toBe("cssClass");
+});
+
+it("should support attrs functions receiving props", () => {
+  const Component = styled.input.attrs((props) => ({
+    "aria-label": props.$text,
+  }))``;
+  const container = renderInto(() => <Component $text="hello world" />);
+  const input = container.querySelector("input")!;
+  expect(input.getAttribute("aria-label")).toBe("hello world");
+  expect(input.getAttribute("$text")).toBe(null);
+});
+
+it("should preserve attrs order across styled() levels", () => {
+  const SubmitButton = styled.button.attrs({ type: "submit" })("submit_btn");
+  const ResetButton = styled(SubmitButton).attrs({ type: "reset" })("reset_btn");
+  const container = renderInto(() => <ResetButton />);
+  const button = container.querySelector("button")!;
+  expect(button.getAttribute("type")).toBe("reset");
+  expect(button.className).toBe("submit_btn reset_btn");
+});
+
+it("should flatten chains through a get-only proxy (solid-refresh dev wrapper)", () => {
+  const SubmitButton = styled.button.attrs({ type: "submit" })("submit_btn");
+  // solid-refresh registers components behind a Proxy that forwards property
+  // reads but defines no `has` trap — chain detection must still see the
+  // yak component behind it
+  const Registered = new Proxy(function HMRComp() {}, {
+    get: (_, property) => (SubmitButton as never as Record<PropertyKey, unknown>)[property],
+  });
+  const ResetButton = styled(Registered as typeof SubmitButton).attrs({ type: "reset" })(
+    "reset_btn",
+  );
+  const container = renderInto(() => <ResetButton />);
+  const button = container.querySelector("button")!;
+  expect(button.getAttribute("type")).toBe("reset");
+  expect(button.className).toBe("submit_btn reset_btn");
+});
+
+it("should run parent attrs functions before own attrs functions", () => {
+  const order: string[] = [];
+  const Parent = styled.input.attrs(() => {
+    order.push("parent");
+    return { "aria-label": "parent" };
+  })``;
+  const Child = styled(Parent).attrs(() => {
+    order.push("child");
+    return {};
+  })``;
+  renderInto(() => <Child />);
+  expect(order).toEqual(["parent", "child"]);
+  expect(order.filter((entry) => entry === "parent").length).toBe(1);
+});
+
+it("should merge a user provided class", () => {
+  const Component = styled.input("cssClass");
+  const container = renderInto(() => <Component class="userClass" />);
+  expect(container.querySelector("input")?.className).toBe("userClass cssClass");
+});
+
+it("should merge a user provided style with dynamic styles", () => {
+  const Component = styled.input("cssClass", {
+    style: { "--x": () => "10px" },
+  });
+  const container = renderInto(() => <Component style={{ padding: "5px" }} />);
+  const input = container.querySelector("input")!;
+  expect(input.style.getPropertyValue("--x")).toBe("10px");
+  expect(input.style.padding).toBe("5px");
+});
+
+it("should set css variables from dynamic props", () => {
+  const Component = styled.input("cssClass", {
+    style: { "--width": (props) => `${props.$width * 2}px` },
+  });
+  const container = renderInto(() => <Component $width={10} />);
+  expect(container.querySelector("input")?.style.getPropertyValue("--width")).toBe("20px");
+});
+
+it("should support conditional dynamic class functions", () => {
+  const Component = styled.input("base", (props) => props.$active && css("active"));
+  const active = renderInto(() => <Component $active />);
+  const inactive = renderInto(() => <Component />);
+  expect(active.querySelector("input")?.className).toBe("base active");
+  expect(inactive.querySelector("input")?.className).toBe("base");
+});
+
+it("should provide the theme to dynamic style functions", () => {
+  const Component = styled.input("base", {
+    style: { "--color": (props) => props.theme().color },
+  });
+  const container = renderInto(() => (
+    <YakThemeProvider theme={{ color: "red" }}>
+      <Component />
+    </YakThemeProvider>
+  ));
+  expect(container.querySelector("input")?.style.getPropertyValue("--color")).toBe("red");
+});
+
+it("should provide the theme to attrs functions", () => {
+  const Component = styled.input.attrs((props) => ({
+    "aria-label": props.theme().label,
+  }))``;
+  const container = renderInto(() => (
+    <YakThemeProvider theme={{ label: "themed" }}>
+      <Component />
+    </YakThemeProvider>
+  ));
+  expect(container.querySelector("input")?.getAttribute("aria-label")).toBe("themed");
+});
+
+it("should merge the css prop with class and style (mergeCssProp)", () => {
+  const result = mergeCssProp(
+    { class: "test-class", style: { padding: "5px" } },
+    css("cssPropClass"),
+  );
+  expect(result).toEqual({
+    class: "test-class cssPropClass",
+    style: { padding: "5px" },
+  });
+});
+
+it("should not emit an empty style object from mergeCssProp", () => {
+  const result = mergeCssProp({}, css("onlyClass"));
+  expect(result).toEqual({ class: "onlyClass" });
+});
+
+it("should forward unrelated props through mergeCssProp", () => {
+  // the compiled output spreads only mergeCssProp's result onto the element,
+  // so onClick, data-*, children etc. must survive the merge
+  const onClick = () => {};
+  const result = mergeCssProp(
+    { "data-testid": "button", onClick, children: "label", class: "user" },
+    css("cssPropClass"),
+  );
+  expect(result).toEqual({
+    "data-testid": "button",
+    onClick,
+    children: "label",
+    class: "user cssPropClass",
+  });
+});
+
+it("should apply no styles for a falsy css prop", () => {
+  // e.g. `css={on && css`...`}` with `on` being false
+  const result = mergeCssProp({ class: "user" }, false);
+  expect(result).toEqual({ class: "user" });
+});
+
+it("should forward a `component` prop to wrapped components", () => {
+  // polymorphic targets (e.g. router links) accept a `component` prop -
+  // it must reach them instead of being consumed by the render mechanism
+  const Polymorphic = (props: any) => (
+    <a data-received={props.component} class={props.class}>
+      {props.children}
+    </a>
+  );
+  const Styled = styledFn(Polymorphic)("styledClass");
+  const container = renderInto(() => <Styled component="button">link</Styled>);
+  const anchor = container.querySelector("a");
+  expect(anchor?.getAttribute("data-received")).toBe("button");
+  expect(anchor?.className).toContain("styledClass");
+});

package/runtime/__tests__/testUtils.tsx

@@ -0,0 +1,25 @@
+import type { JSX } from "@solidjs/web";
+import { render } from "@solidjs/web";
+import { afterEach } from "vitest";
+
+const cleanups: Array<() => void> = [];
+
+afterEach(() => {
+  while (cleanups.length) {
+    cleanups.pop()!();
+  }
+});
+
+/**
+ * Renders JSX into a detached container (jsdom) and cleans up after each test.
+ */
+export const renderInto = (fn: () => JSX.Element): HTMLElement => {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const dispose = render(fn as () => any, container);
+  cleanups.push(() => {
+    dispose();
+    container.remove();
+  });
+  return container;
+};

package/runtime/__tests__/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "noUnusedLocals": false,
+    "types": ["node", "vitest/globals"]
+  },
+  "exclude": [],
+  "include": ["./**/*", "../**/*"]
+}

package/runtime/__tests__/typeTest.tsx

@@ -0,0 +1,62 @@
+/**
+ * Type-only tests for the public @yak/solid API (pre-compilation typings).
+ * Checked by `pnpm test:types`, never executed.
+ */
+import { css, styled, keyframes, useTheme, YakThemeProvider, YakThemeContext } from "@yak/solid";
+
+// styled with intrinsic elements infers tag props
+const Button = styled.button<{ $primary?: boolean }>`
+  color: ${({ $primary }) => ($primary ? "red" : "blue")};
+`;
+
+const buttonUsage = (
+  <Button type="submit" $primary onClick={(event) => event.currentTarget.disabled} />
+);
+
+// @ts-expect-error - unknown props are rejected
+const invalidPropUsage = <Button unknownProp />;
+
+// styled(Component) requires class/style compatible props
+const Custom = (props: { class?: string; label: string }) => <div class={props.class} />;
+const StyledCustom = styled(Custom)`
+  color: red;
+`;
+const customUsage = <StyledCustom label="hello" />;
+
+// @ts-expect-error - missing required prop
+const missingPropUsage = <StyledCustom />;
+
+// attrs narrow the outer props
+const WithAttrs = styled.input.attrs({ type: "text" })`
+  color: red;
+`;
+const withAttrsUsage = <WithAttrs value="x" />;
+
+// keyframes returns an animation-name usable in interpolations
+const rotate = keyframes`
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+`;
+const Spinner = styled.div`
+  animation: ${rotate} 1s linear infinite;
+`;
+
+// css prop is available on intrinsic elements (via css-prop.d.ts)
+const cssPropUsage = (
+  <div
+    css={css`
+      color: red;
+    `}
+  />
+);
+
+// theme APIs: useTheme returns an accessor to the (augmentable) theme
+const theme = useTheme();
+const themeValue: import("../context/index.ts").YakTheme = theme();
+const provider = <YakThemeProvider theme={{}}>{cssPropUsage}</YakThemeProvider>;
+// the context itself is a provider taking an accessor (plain objects are rejected)
+const override = <YakThemeContext value={() => ({})}>{cssPropUsage}</YakThemeContext>;
+// @ts-expect-error - the context value must be an accessor, not a theme object
+const invalidOverride = <YakThemeContext value={{}}>{cssPropUsage}</YakThemeContext>;
+
+export { buttonUsage, customUsage, withAttrsUsage, Spinner, provider, themeValue, override, invalidOverride };

package/runtime/atoms.ts

@@ -0,0 +1,44 @@
+import { ComponentStyles, css } from "./cssLiteral.js";
+import { RuntimeStyleProcessor } from "./publicStyledApi.js";
+
+/**
+ * Allows to use atomic CSS classes in a styled or css block
+ *
+ * @usage
+ *
+ * ```tsx
+ * import { styled, atoms } from "@yak/solid";
+ *
+ * const Button = styled.button<{ $primary?: boolean }>`
+ *  ${atoms("text-teal-600", "text-base", "rounded-md")}
+ *  ${props => props.$primary && atoms("shadow-md")}
+ * `;
+ * ```
+ */
+export const atoms = <T>(
+  ...atoms: (string | RuntimeStyleProcessor<T> | false)[]
+): ComponentStyles<T> => {
+  const staticClasses: string[] = [];
+  const dynamicFunctions: RuntimeStyleProcessor<T>[] = [];
+
+  for (const atom of atoms) {
+    if (typeof atom === "string") {
+      staticClasses.push(...atom.split(" "));
+    } else if (typeof atom === "function") {
+      dynamicFunctions.push(atom);
+    }
+  }
+
+  const runtimeFunctions: RuntimeStyleProcessor<T>[] =
+    staticClasses.length > 0
+      ? [
+          (_, classes) => {
+            staticClasses.forEach((cls) => classes.add(cls));
+          },
+          ...dynamicFunctions,
+        ]
+      : dynamicFunctions;
+
+  // @ts-expect-error the internal implementation of css is not typed
+  return css(...runtimeFunctions);
+};

package/runtime/context/baseContext.ts

@@ -0,0 +1,5 @@
+import type { YakTheme } from "@yak/solid";
+
+export function getYakThemeContext() {
+  return {} as YakTheme | undefined;
+}

package/runtime/context/index.ts

@@ -0,0 +1,37 @@
+import { createComponent, createContext, createMemo, useContext } from "solid-js";
+import type { Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
+
+export interface YakTheme {}
+
+/**
+ * The yak theme context
+ *
+ * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md
+ */
+export const YakThemeContext = /* @__PURE__ */ createContext<Accessor<YakTheme>>(() => ({}));
+
+/**
+ * Returns an accessor to the current yak theme
+ */
+export const useTheme = (): Accessor<YakTheme> => useContext(YakThemeContext);
+
+/**
+ * Yak theme context provider
+ *
+ * ```tsx
+ * <YakThemeProvider theme={{ highContrast: highContrast() }}>
+ * ```
+ */
+export const YakThemeProvider = (props: {
+  children?: JSX.Element;
+  theme?: YakTheme;
+}): JSX.Element => {
+  const theme = createMemo<YakTheme>(() => props.theme ?? {});
+  return createComponent(YakThemeContext, {
+    value: theme,
+    get children() {
+      return props.children;
+    },
+  });
+};

package/runtime/cssLiteral.ts

@@ -0,0 +1,215 @@
+import type { YakTheme } from "./index.ts";
+import type { Accessor } from "solid-js";
+import { ClassCollector, RuntimeStyleProcessor, StyleObject } from "./publicStyledApi.js";
+
+export const yakComponentSymbol = Symbol("yak");
+
+/**
+ * Collects class names as a single space-separated string.
+ *
+ * `add` is the render hot path and stays a plain string append;
+ * `has`/`delete` keep a Set-like contract for the rare runtime
+ * functions that remove classes again (e.g. atoms).
+ */
+export class Classes implements ClassCollector {
+  value: string;
+  constructor(initial?: string) {
+    this.value = initial || "";
+  }
+  add(name: string) {
+    if (!this.value) {
+      this.value = name;
+    } else if (!this.has(name)) {
+      this.value += " " + name;
+    }
+  }
+  has(name: string) {
+    return (" " + this.value + " ").includes(" " + name + " ");
+  }
+  delete(name: string) {
+    if (this.has(name)) {
+      this.value = this.value
+        .split(" ")
+        .filter((existing) => existing !== name)
+        .join(" ");
+    }
+  }
+}
+
+export type ComponentStyles<TProps> = (props: TProps) => {
+  class: string;
+  style?: {
+    [key: string]: string;
+  };
+};
+
+export type CSSInterpolation<TProps> =
+  | string
+  | number
+  | undefined
+  | null
+  | false
+  | ComponentStyles<TProps>
+  | {
+      // type only identifier to allow targeting components
+      // e.g. styled.svg`${Button}:hover & { fill: red; }`
+      [yakComponentSymbol]: any;
+    }
+  | ((props: TProps) => CSSInterpolation<TProps>);
+
+type CSSStyles<TProps = {}> = {
+  style: { [key: string]: string | ((props: TProps) => string) };
+};
+
+type CSSFunction = <TProps = {}>(
+  styles: TemplateStringsArray,
+  ...values: CSSInterpolation<TProps & { theme: Accessor<YakTheme> }>[]
+) => ComponentStyles<TProps>;
+
+export type NestedRuntimeStyleProcessor = (
+  props: unknown,
+  classes: ClassCollector,
+  style: StyleObject,
+) =>
+  | {
+      class?: string;
+      style?: StyleObject;
+    }
+  | void
+  | NestedRuntimeStyleProcessor;
+
+/**
+ * css() runtime factory of css``
+ *
+ * /!\ @yak/solid transpiles css`` and styled``
+ *
+ * This changes the typings of the css`` and styled`` functions.
+ * During development the user of @yak/solid wants to work with the
+ * typings BEFORE compilation.
+ *
+ * Therefore this is only an internal function only and it must be cast to any
+ * before exported to the user.
+ *
+ * The internal functioning of css`` is to return a single callback function that runs all functions
+ * (or creates new ones if needed) that are passed as arguments. These functions receive the props, classes, and style object as arguments
+ * and operate directly on the classes and style objects.
+ */
+export function css<TProps>(
+  styles: TemplateStringsArray,
+  ...values: CSSInterpolation<NoInfer<TProps> & { theme: Accessor<YakTheme> }>[]
+): ComponentStyles<TProps>;
+export function css<TProps>(...args: Array<any>): RuntimeStyleProcessor<TProps> {
+  // Normally this  could be an array of strings passed, but as we transpile the usage of css`` ourselves, we control the arguments
+  // and ensure that only the first argument is a string (class name of the non-dynamic styles)
+  let staticClass: string | undefined;
+  const dynamicCssFunctions: NestedRuntimeStyleProcessor[] = [];
+  for (const arg of args as Array<string | CSSFunction | CSSStyles<any>>) {
+    // A CSS-module class name which got auto generated during build from static css
+    // e.g. css`color: red;`
+    // compiled -> css("yak31e4")
+    if (typeof arg === "string") {
+      staticClass = arg;
+    }
+    // Dynamic CSS e.g.
+    // css`${props => props.active && css`color: red;`}`
+    // compiled -> css((props: { active: boolean }) => props.active && css("yak31e4"))
+    else if (typeof arg === "function") {
+      dynamicCssFunctions.push(arg as unknown as NestedRuntimeStyleProcessor);
+    }
+    // Dynamic CSS with css variables e.g.
+    // css`transform: translate(${props => props.x}, ${props => props.y});`
+    // compiled -> css("yak31e4", { style: { "--yakVarX": props => props.x }, "--yakVarY": props => props.y }})
+    else if (typeof arg === "object" && "style" in arg) {
+      dynamicCssFunctions.push((props, _, style) => {
+        for (const key in arg.style) {
+          const value = arg.style[key];
+          if (typeof value === "function") {
+            style[key as keyof StyleObject] = String(
+              // The value for a css value can be a theme dependent function e.g.:
+              // const borderColor = (props: { theme: { mode: "dark" | "light" } }) => props.theme === "dark" ? "black" : "white";
+              // css`border-color: ${borderColor};`
+              // Therefore the value has to be extracted recursively
+              recursivePropExecution(props, value),
+            ) as never;
+          } else {
+            style[key as keyof StyleObject] = String(value) as never;
+          }
+        }
+      });
+    }
+  }
+
+  // Non Dynamic CSS
+  // This is just an optimization for the common case where there are no dynamic css functions
+  // `$dynamic: false` lets the styled runtime skip theme lookup and
+  // style-object allocation entirely for static components
+  if (dynamicCssFunctions.length === 0) {
+    return Object.assign(
+      (_: unknown, classes: ClassCollector) => {
+        if (staticClass) {
+          classes.add(staticClass);
+        }
+      },
+      { $dynamic: false },
+    );
+  }
+
+  return Object.assign(
+    (props: TProps, classes: ClassCollector, allStyles: StyleObject) => {
+      if (staticClass) {
+        classes.add(staticClass);
+      }
+      for (let i = 0; i < dynamicCssFunctions.length; i++) {
+        unwrapProps(props, dynamicCssFunctions[i], classes, allStyles);
+      }
+    },
+    { $dynamic: true },
+  );
+}
+
+// Dynamic CSS with runtime logic
+const unwrapProps = (
+  props: unknown,
+  fn: NestedRuntimeStyleProcessor,
+  classes: ClassCollector,
+  style: StyleObject,
+) => {
+  let result = fn(props, classes, style);
+  while (result) {
+    if (typeof result === "function") {
+      result = result(props, classes, style);
+      continue;
+    } else if (typeof result === "object") {
+      const resultClass = "class" in result ? result.class : undefined;
+      if (resultClass) {
+        classes.add(resultClass);
+      }
+      if ("style" in result && result.style) {
+        for (const key in result.style) {
+          // This is hard for typescript to infer
+          style[key as keyof StyleObject] = result.style[key as keyof StyleObject] as any;
+        }
+      }
+    }
+    break;
+  }
+};
+
+const recursivePropExecution = (props: unknown, fn: (props: unknown) => any): string | number => {
+  const result = fn(props);
+  if (typeof result === "function") {
+    return recursivePropExecution(props, result);
+  }
+  // typeof guards first: the `process.env` lookup is a real per-call cost
+  // for unbundled Node consumers, so it must only run on the invalid path
+  if (typeof result !== "string" && typeof result !== "number" && !(result instanceof String)) {
+    if (process.env.NODE_ENV === "development") {
+      throw new Error(
+        `Dynamic CSS functions must return a string or number but returned ${JSON.stringify(
+          result,
+        )}\n\nDynamic CSS function: ${fn.toString()}\n`,
+      );
+    }
+  }
+  return result;
+};