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

package/runtime/cssLiteral.tsx

@@ -0,0 +1,214 @@
+import type { YakTheme } from "./index.ts";
+import { ClassNameCollector, RuntimeStyleProcessor } from "./publicStyledApi.js";
+
+export const yakComponentSymbol = Symbol("yak");
+
+/**
+ * String-backed ClassNameCollector used by the render path
+ *
+ * `add` is a plain string append and does not deduplicate, so the collector is
+ * a multiset - the same class may appear twice, e.g. `atoms("a b", "a")` → `"a b a"`.
+ * `has`/`delete` cover the rare path where a runtime function inspects or
+ * removes classes; `delete` removes every occurrence
+ */
+export class ClassNames implements ClassNameCollector {
+  value: string;
+  constructor(initial?: string) {
+    this.value = initial || "";
+  }
+  add(className: string) {
+    this.value += (this.value && " ") + className;
+  }
+  has(className: string) {
+    return (" " + this.value + " ").includes(" " + className + " ");
+  }
+  delete(className: string) {
+    if (this.has(className)) {
+      this.value = this.value
+        .split(" ")
+        .filter((existing) => existing !== className)
+        .join(" ");
+    }
+  }
+}
+
+export type ComponentStyles<TProps> = (props: TProps) => {
+  className: 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: YakTheme }>[]
+) => ComponentStyles<TProps>;
+
+export type NestedRuntimeStyleProcessor = (
+  props: unknown,
+  classNames: ClassNameCollector,
+  style: React.CSSProperties,
+) =>
+  | {
+      className?: string;
+      style?: React.CSSProperties;
+    }
+  | void
+  | NestedRuntimeStyleProcessor;
+
+/**
+ * css() runtime factory of css``
+ *
+ * /!\ @yak/react transpiles css`` and styled``
+ *
+ * This changes the typings of the css`` and styled`` functions.
+ * During development the user of @yak/react 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, classNames, and style object as arguments
+ * and operate directly on the classNames and style objects.
+ */
+export function css<TProps>(
+  styles: TemplateStringsArray,
+  ...values: CSSInterpolation<NoInfer<TProps> & { theme: 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 className: 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") {
+      className = 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") {
+            // @ts-expect-error CSSProperties don't allow css variables
+            style[key] = 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),
+            );
+          } else {
+            // @ts-expect-error CSSProperties don't allow css variables
+            style[key] = String(value);
+          }
+        }
+      });
+    }
+  }
+
+  // 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, classNames: ClassNameCollector) => {
+        if (className) {
+          classNames.add(className);
+        }
+      },
+      { $dynamic: false },
+    );
+  }
+
+  return Object.assign(
+    (props: TProps, classNames: ClassNameCollector, allStyles: React.CSSProperties) => {
+      if (className) {
+        classNames.add(className);
+      }
+      for (let i = 0; i < dynamicCssFunctions.length; i++) {
+        unwrapProps(props, dynamicCssFunctions[i], classNames, allStyles);
+      }
+    },
+    { $dynamic: true },
+  );
+}
+
+// Dynamic CSS with runtime logic
+const unwrapProps = (
+  props: unknown,
+  fn: NestedRuntimeStyleProcessor,
+  classNames: ClassNameCollector,
+  style: React.CSSProperties,
+) => {
+  let result = fn(props, classNames, style);
+  while (result) {
+    if (typeof result === "function") {
+      result = result(props, classNames, style);
+      continue;
+    } else if (typeof result === "object") {
+      if ("className" in result && result.className) {
+        classNames.add(result.className);
+      }
+      if ("style" in result && result.style) {
+        for (const key in result.style) {
+          // This is hard for typescript to infer
+          style[key as keyof React.CSSProperties] = result.style[
+            key as keyof React.CSSProperties
+          ] 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);
+  }
+  // the `process.env` lookup is a real per-call cost for unbundled Node
+  // consumers, so it must stay behind the typeof guards 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;
+};

package/runtime/globalStyle.tsx

@@ -0,0 +1,54 @@
+import type { ComponentStyles } from "./cssLiteral.js";
+import type { YakComponent } from "./publicStyledApi.js";
+
+/**
+ * Values that may be interpolated into a `globalStyle` template.
+ *
+ * Only build-time values are allowed — constants, `keyframes` animation names,
+ * static `css` mixins and styled-component selectors. Runtime functions
+ * (`${(props) => ...}`) are intentionally excluded: a global rule has no element
+ * to attach a CSS variable to. Declare a CSS custom property instead and toggle
+ * it via an attribute/class on the root element.
+ */
+export type GlobalStyleInterpolation = string | number | ComponentStyles<{}> | YakComponent<any>;
+
+/**
+ * Declares global, unscoped styles that ride the same zero-runtime extraction
+ * pipeline as `styled` and `keyframes`.
+ *
+ * Global styles are **part of the stylesheet, not part of the render tree**.
+ * They apply exactly when the module declaring them is included in the bundle —
+ * typically by importing it from a layout or entry point. They cannot be
+ * conditionally mounted; express conditions in CSS (`@media`, `@supports`,
+ * `:root[data-theme]`, `:has()`) or through CSS custom properties.
+ *
+ * @usage
+ *
+ * ```tsx
+ * import { globalStyle, keyframes } from "@yak/react";
+ *
+ * const fadeIn = keyframes`
+ *   from { opacity: 0; }
+ * `;
+ *
+ * globalStyle`
+ *   :root {
+ *     --spacing: 4px;
+ *   }
+ *
+ *   body {
+ *     margin: 0;
+ *   }
+ *
+ *   ::view-transition-new(root) {
+ *     animation: ${fadeIn} 200ms ease;
+ *   }
+ * `;
+ * ```
+ */
+export const globalStyle = (
+  _styles: TemplateStringsArray,
+  ..._values: Array<GlobalStyleInterpolation>
+): void => {
+  return undefined;
+};

package/runtime/index.ts

@@ -0,0 +1,37 @@
+/**
+ * This file contains the typings for the public API for @yak/react and testing mocks
+ *
+ * IMPORTANT: In production builds, imports to this file should be replaced by the Babel plugin.
+ * If you're seeing this code in a production environment, your build process may not be configured correctly.
+ *
+ * Purpose:
+ * 1. Provide a test-friendly version of the @yak/react API
+ * 2. Offer type definitions for the public API
+ *
+ * Usage in tests:
+ * - Import from "@yak/react" as usual in your test files
+ * - These mock implementations will be used instead of the actual runtime
+ *
+ * Warning for production:
+ * - If these exports are used in a production build, styles will not be applied correctly
+ * - Ensure your build process is configured to use the @yak/react SWC plugin
+ *
+ * For maintainers:
+ * - Keep this API surface in sync with the actual implementation in @yak/react/internal
+ * - Ensure mock implementations here are suitable for testing purposes
+ */
+
+// the following export is not relative as "@yak/react/context"
+// links to one file for react server components and
+// to another file for classic react components
+export { useTheme, YakThemeProvider } from "@yak/react/context";
+export type { YakTheme } from "./context/index.tsx";
+
+export type { GenericYakComponentOf, YakComponent } from "./publicStyledApi.ts";
+
+export { atoms } from "./atoms.js";
+export { css } from "./mocks/cssLiteral.js";
+export { keyframes } from "./mocks/keyframes.js";
+export { styled } from "./mocks/styled.js";
+export { globalStyle } from "./mocks/globalStyle.js";
+export type { GlobalStyleInterpolation } from "./mocks/globalStyle.js";

package/runtime/internal.ts

@@ -0,0 +1,42 @@
+/**
+ * IMPORTANT: This file contains the internal implementation of @yak/react's core APIs.
+ *
+ * Purpose:
+ * - Provides the actual runtime implementations for styled, css, keyframes, etc.
+ * - Referenced only by the compiled code "@yak/react/internal"
+ *
+ * Usage:
+ * - DO NOT import from this file directly in your application code.
+ * - Always use `import { ... } from "@yak/react"` in your source files.
+ * - The Babel plugin will automatically transform those imports to use this internal module.
+ *
+ * Why this exists:
+ * 1. Allows for cleaner separation between the public API and internal implementation
+ * 2. Enables better typing for both pre-compilation (user code) and post-compilation scenarios
+ * 3. Easier testing and snapshot comparisons without hashes (in index.ts)
+ * 4. Makes @yak/react work out-of-the-box with testing frameworks like Jest and Vitest
+ *
+ * Note for maintainers:
+ * - Ensure that types from this file are not published to avoid exposing internal APIs.
+ *
+ * @internal This module is not intended for direct usage and may change without notice.
+ */
+
+export { css } from "./cssLiteral.js";
+export { styled } from "./styled.js";
+export { atoms } from "./atoms.js";
+export { keyframes } from "./keyframes.js";
+export { globalStyle } from "./globalStyle.js";
+
+// the following export is not relative as "@yak/react/context"
+// links to one file for react server components and
+// to another file for classic react components
+export { useTheme, YakThemeProvider } from "@yak/react/context";
+
+// runtime internals (helpers which get injected by the compiler)
+export { unitPostFix as __yak_unitPostFix } from "./internals/unitPostFix.js";
+export { mergeCssProp as __yak_mergeCssProp } from "./internals/mergeCssProp.js";
+export { mergeClassNames as __yak_mergeClassNames } from "./internals/mergeClassNames.js";
+
+// export shorthand for DOM styled components (e.g. for styled.div)
+export * from "./styledDom.js";

package/runtime/internals/mergeClassNames.ts

@@ -0,0 +1,23 @@
+/**
+ * Merges two optional class name values with a space.
+ *
+ * Used by the styled runtime to combine incoming and generated class names,
+ * and injected by the compiler (as `__yak_mergeClassNames`) when it replaces
+ * a JSX usage of a fully static styled component with a plain DOM element:
+ * ```tsx
+ * const Card = styled.div`color: red;`;
+ * <Card className={active && "active"} />
+ * ```
+ * becomes
+ * ```tsx
+ * <div className={__yak_mergeClassNames("yX", active && "active")} />
+ * ```
+ */
+export const mergeClassNames = (
+  a: string | false | null | undefined,
+  b: string | false | null | undefined,
+) => {
+  if (!a) return b || undefined;
+  if (!b) return a;
+  return a + " " + b;
+};

package/runtime/internals/mergeCssProp.ts

@@ -0,0 +1,69 @@
+import { ClassNames } from "../cssLiteral.js";
+import { RuntimeStyleProcessor } from "../publicStyledApi.js";
+
+/**
+ * This is an internal helper function to merge relevant props of a native element with a css prop.
+ * It's automatically added when using the `css` prop in a JSX element.
+ * e.g.:
+ * ```tsx
+ * <p
+ *  className="foo"
+ *  css={css`
+ *   color: green;
+ * `}
+ *  {...{ style: { padding: "30px" }}}
+ * />
+ * ```
+ * compiles to
+ * ```tsx
+ * <p {...__yak_mergeCssProp(css("yakCss1"), { className: "foo" }, { style: { padding: "30px" } })} />
+ * ```
+ * The css value comes first, then every merged source in JSX order, so a
+ * later source wins as it would in one object literal.
+ */
+export const mergeCssProp = (
+  cssProp: RuntimeStyleProcessor<unknown> | false | null | undefined,
+  ...sources: (Record<string, unknown> | null | undefined)[]
+) => {
+  // React props are plain values, so the sources are merged up front
+  const result: Record<string, unknown> & {
+    className?: string;
+    style?: Record<string, string>;
+  } = Object.assign({}, ...sources);
+
+  const classNames = new ClassNames(result.className);
+  const existingStyle = result.style;
+  const style = existingStyle ? { ...existingStyle } : {};
+
+  // only a style function applies styles. A falsy css prop applies none,
+  // e.g. `css={on && css`...`}` with `on` false
+  if (typeof cssProp === "function") {
+    cssProp({}, classNames, style);
+  } else if (cssProp) {
+    // The swc plugin rejects a value which can not apply styles at build time,
+    // so this only runs where it can not see one during build time.
+    if (process.env.NODE_ENV === "development") {
+      const received: unknown = cssProp;
+      throw new Error(
+        `The css prop only applies styles written in place, but received ${
+          Array.isArray(received) ? "an array" : `a value of type ${typeof received}`
+        }.\n\nCombine several styles in one template instead of an array: css={css\`\${first} \${second}\`}\nWrite declarations in a template instead of an object: css={css\`color: red;\`}`,
+      );
+    }
+  }
+
+  // Forward all other props (onClick, aria-*, id, …) untouched and only
+  // override className/style with the merged result
+  if (Object.keys(style).length > 0) {
+    result.style = style;
+  } else {
+    delete result.style;
+  }
+  if (classNames.value) {
+    result.className = classNames.value;
+  } else {
+    delete result.className;
+  }
+
+  return result;
+};

package/runtime/internals/propMarkers.ts

@@ -0,0 +1,20 @@
+/** Internal markers used by the render path */
+
+/**
+ * Set on props once the attrs functions have been folded in, so a nested yak
+ * wrapper further out the chain does not merge the same attrs twice
+ */
+export const ATTRS_MERGED = "$__a" as const;
+
+/**
+ * Set on props once the runtime style processor has run, so an outer yak
+ * component that receives already-processed props skips the collector entirely
+ */
+export const RUNTIME_STYLES_DONE = "$__r" as const;
+
+/**
+ * Carries the constant `.attrs({...})` object on the merged attrs function,
+ * marking it theme-independent so the fast render path can apply it without
+ * executing anything. Lives on the function, never on props
+ */
+export const STATIC_ATTRS = "$sa" as const;

package/runtime/internals/unitPostFix.ts

@@ -0,0 +1,34 @@
+/**
+ * Internal helper called by transformed code - Do not use directly
+ *
+ * Takes a function and a css unit and returns the result of the function concatenated with the unit
+ *
+ * ```tsx
+ * import { styled } from "@yak/react";
+ *
+ * const Button = styled.button<{ $width?: boolean }>`
+ *   width: ${({ $width }) => $width}px;
+ * `;
+ * ```
+ *
+ * Which will be transformed to:
+ *  ```tsx
+ * import { styled } from "@yak/react/internals";
+ *
+ * const Button = styled.button<{ $width?: boolean }>(
+ *  "button", {
+ *   width: unitPostFix({ $width }) => $width, "px")
+ * });
+ */
+export const unitPostFix = (arg: unknown, unit: string) => {
+  switch (typeof arg) {
+    case "function":
+      return (props: any) => unitPostFix(arg(props), unit);
+    case "number":
+    case "string":
+      return `${arg}${unit}`;
+    // Ignore falsy values
+    default:
+      return undefined;
+  }
+};

package/runtime/jsx-dev-runtime.ts

@@ -0,0 +1,6 @@
+import ReactJSXRuntimeDev from "react/jsx-dev-runtime";
+
+const Fragment = ReactJSXRuntimeDev.Fragment;
+const jsxDEV = ReactJSXRuntimeDev.jsxDEV;
+
+export { Fragment, jsxDEV };

package/runtime/jsx-runtime.ts

@@ -0,0 +1,48 @@
+import ReactJSXRuntime from "react/jsx-runtime";
+import type { ComponentStyles } from "./mocks/cssLiteral.js";
+
+/**
+ * A falsy css prop applies no styles, which keeps conditional shapes like
+ * `css={on && css`...`}` or `css={on ? css`...` : undefined}` well typed
+ */
+type CSSProp = ComponentStyles<Record<keyof any, never>> | false | null | undefined;
+
+// Only return the css prop if the "className" and "style" properties are present
+// This was inspired from emotion
+// https://github.com/emotion-js/emotion/blob/cce67ec6b2fc94261028b4f4778aae8c3d6c5fd6/packages/react/src/jsx-namespace.ts#L9C6-L9C28
+type WithConditionalCSSProp<P> = "className" | "style" extends keyof P
+  ? string extends P["className" & keyof P]
+    ? Record<string, any> extends P["style" & keyof P]
+      ? { css?: CSSProp }
+      : {}
+    : {}
+  : {};
+
+const Fragment = ReactJSXRuntime.Fragment;
+const jsx = ReactJSXRuntime.jsx;
+const jsxs = ReactJSXRuntime.jsxs;
+
+export declare namespace YakJSX {
+  export type Element = React.JSX.Element;
+  export type ElementType = React.JSX.ElementType;
+  export type ElementClass = React.JSX.ElementClass;
+  export type ElementAttributesProperty = React.JSX.ElementAttributesProperty;
+  export type ElementChildrenAttribute = React.JSX.ElementChildrenAttribute;
+
+  // Add the CSS prop to all components that can receive "className" and "style"
+  export type LibraryManagedAttributes<C, P> = P extends unknown
+    ? WithConditionalCSSProp<P> & React.JSX.LibraryManagedAttributes<C, P>
+    : never;
+
+  export type IntrinsicAttributes = React.JSX.IntrinsicAttributes;
+  export type IntrinsicClassAttributes<T> = React.JSX.IntrinsicClassAttributes<T>;
+
+  export type IntrinsicElements = {
+    [K in keyof React.JSX.IntrinsicElements]: React.JSX.IntrinsicElements[K] & {
+      // Add the CSS prop to all native elements e.g. "div" or "span"
+      css?: CSSProp;
+    };
+  };
+}
+
+export { Fragment, jsx, jsxs, type YakJSX as JSX };

package/runtime/keyframes.tsx

@@ -0,0 +1,30 @@
+/**
+ * Allows to use CSS keyframe animations in a styled or css block
+ *
+ * @usage
+ *
+ * ```tsx
+ * import { styled, keyframes } from "@yak/react";
+ *
+ * const rotate = keyframes`
+ *  from {
+ *   transform: rotate(0deg);
+ *  }
+ *  to {
+ *   transform: rotate(360deg);
+ *  }
+ * `;
+ *
+ * const Spinner = styled.div`
+ *   animation: ${rotate} 1s linear infinite;
+ * `;
+ * ```
+ */
+export const keyframes = <T extends (string | number | bigint)[] = never>(
+  styles: TemplateStringsArray,
+  ..._dynamic: T
+): string => {
+  // during compilation all args of keyframe are compiled
+  // to a string which references the animation name
+  return styles as any as string;
+};

package/runtime/mocks/cssLiteral.ts

@@ -0,0 +1,74 @@
+import type { css as cssInternal, NestedRuntimeStyleProcessor } from "../cssLiteral.js";
+
+export type { ComponentStyles } from "../cssLiteral.js";
+
+/**
+ * Allows to use CSS styles in a styled or css block
+ *
+ * e.g.
+ *
+ * ```tsx
+ * const Component = styled.div`
+ *  color: black;
+ *  ${({$active}) => $active && css`color: red;`}
+ * `;
+ * ```
+ */
+export const css: typeof cssInternal = (styles: TemplateStringsArray, ...args: unknown[]) => {
+  // When called in yak files as a template tag (without SWC transformation),
+  // return { __yak: rawCss } so the cross-file resolver can
+  // extract the mixin value from evaluated .yak files.
+  if (Array.isArray(styles) && "raw" in styles) {
+    let rawCss = styles[0];
+    for (let i = 0; i < args.length; i++) {
+      const interpolation = args[i];
+      rawCss +=
+        interpolation && typeof interpolation === "object" && "__yak" in interpolation
+          ? (interpolation as { __yak: string }).__yak
+          : String(interpolation);
+      rawCss += styles[i + 1];
+    }
+    return { __yak: rawCss } as any;
+  }
+
+  const dynamicCssFunctions: NestedRuntimeStyleProcessor[] = [];
+  for (const arg of args as Array<string | Function | object>) {
+    // Dynamic CSS e.g.
+    // css`${props => props.active && css`color: red;`}`
+    // compiled -> css((props: { active: boolean }) => props.active && css("yak31e4"))
+    if (typeof arg === "function") {
+      dynamicCssFunctions.push(arg as unknown as NestedRuntimeStyleProcessor);
+    }
+  }
+  if (dynamicCssFunctions.length === 0) {
+    return {
+      className: "",
+      style: undefined,
+    };
+  }
+  return ((props: unknown) => {
+    for (let i = 0; i < dynamicCssFunctions.length; i++) {
+      // run the dynamic expressions and ignore the return value
+      // the execution is important to ensure that the user code is executed
+      // the same way as in the real runtime
+      executeDynamicExpressionRecursively(props, dynamicCssFunctions[i]);
+    }
+    return {
+      className: "",
+      style: undefined,
+    };
+  }) as any;
+};
+
+function executeDynamicExpressionRecursively(
+  props: unknown,
+  expression: NestedRuntimeStyleProcessor,
+) {
+  const classNames = new Set<string>();
+  const style = {};
+  let result = expression(props, classNames, style);
+  while (typeof result === "function") {
+    result = result(props, classNames, style);
+  }
+  return result;
+}

package/runtime/mocks/globalStyle.ts

@@ -0,0 +1,14 @@
+import type { globalStyle as globalStyleInternal } from "../globalStyle.js";
+
+export type { GlobalStyleInterpolation } from "../globalStyle.js";
+
+/**
+ * Test-friendly mock of `globalStyle`.
+ *
+ * `globalStyle` has no runtime behaviour — the SWC plugin extracts its CSS at
+ * build time and replaces the call with a no-op. The mock mirrors that: it does
+ * nothing so yak files can be imported in Jest/Vitest without the compiler.
+ */
+export const globalStyle: typeof globalStyleInternal = (_styles, ..._values) => {
+  // no-op in the mock
+};