clava 0.3.0 → 0.4.1

package/src/types.ts

@@ -76,11 +76,11 @@ type ComponentPropKey<R extends ComponentResult> =
 
 // Key source types - what can be passed as additional parameters to splitProps
 export type KeySourceArray = readonly string[];
-export type KeySourceComponent = {
+export interface KeySourceComponent {
   propKeys: readonly string[];
   variantKeys: readonly string[];
   getVariants: () => Record<string, unknown>;
-};
+}
 export type KeySource = KeySourceArray | KeySourceComponent;
 
 // Check if source is a component (has getVariants)
@@ -179,46 +179,46 @@ export interface ModalComponent<V, R extends ComponentResult> {
 
 export interface CVComponent<
   V extends Variants = {},
-  CV extends ComputedVariants = {},
   E extends AnyComponent[] = [],
   R extends ComponentResult = StyleClassProps,
-> extends ModalComponent<MergeVariants<V, CV, E>, R> {
-  jsx: ModalComponent<MergeVariants<V, CV, E>, JSXProps>;
-  html: ModalComponent<MergeVariants<V, CV, E>, HTMLProps>;
-  htmlObj: ModalComponent<MergeVariants<V, CV, E>, HTMLObjProps>;
+> extends ModalComponent<MergeVariants<V, E>, R> {
+  jsx: ModalComponent<MergeVariants<V, E>, JSXProps>;
+  html: ModalComponent<MergeVariants<V, E>, HTMLProps>;
+  htmlObj: ModalComponent<MergeVariants<V, E>, HTMLObjProps>;
 }
 
 export type AnyComponent =
-  | CVComponent<any, any, any, any>
+  | CVComponent<any, any, any>
   | ModalComponent<any, any>;
 
 type MergeExtendedVariants<T> = T extends readonly [infer First, ...infer Rest]
   ? ExtractVariants<First> & MergeExtendedVariants<Rest>
   : {};
 
-type MergeExtendedComputedVariants<T> = T extends readonly [
-  infer First,
-  ...infer Rest,
-]
-  ? ExtractComputedVariants<First> & MergeExtendedComputedVariants<Rest>
-  : {};
-
+// Returns a component's effective variants — merged with its own extends —
+// so that a later intermediate component's static variant correctly hides a
+// grandparent's function variant from further descendants. Using a raw
+// intersection here would re-expose the grandparent function through the
+// type chain even after the middle layer replaced it.
 type ExtractVariants<T> =
-  T extends CVComponent<infer V, any, infer E, any>
-    ? V & MergeExtendedVariants<E>
+  T extends CVComponent<infer V, infer E, any>
+    ? MergeVariantMaps<V, MergeExtendedVariants<E>>
     : {};
 
-type ExtractComputedVariants<T> =
-  T extends CVComponent<any, infer CV, infer E, any>
-    ? CV & Omit<MergeExtendedComputedVariants<E>, keyof CV>
-    : {};
-
-type MergeVariantDefinition<Child, Parent> =
-  Child extends Record<string, any>
-    ? Parent extends Record<string, any>
-      ? Omit<Parent, keyof Child> & Child
-      : Child
-    : Child;
+// A function value in `variants` (a function variant) replaces any inherited
+// variant for the same key. An object value merges value-by-value with an
+// inherited object, but replaces an inherited function.
+type MergeVariantDefinition<Child, Parent> = Child extends (
+  ...args: any[]
+) => any
+  ? Child
+  : Parent extends (...args: any[]) => any
+    ? Child
+    : Child extends Record<string, any>
+      ? Parent extends Record<string, any>
+        ? Omit<Parent, keyof Child> & Child
+        : Child
+      : Child;
 
 type MergeVariantMaps<Child, Parent> = Omit<Parent, keyof Child> &
   Child & {
@@ -228,17 +228,11 @@ type MergeVariantMaps<Child, Parent> = Omit<Parent, keyof Child> &
     >;
   };
 
-type MergeExtendedAllVariants<E extends AnyComponent[]> =
-  MergeExtendedVariants<E> & MergeExtendedComputedVariants<E>;
-
-type MergeBaseVariants<V, E extends AnyComponent[]> = MergeVariantMaps<
+export type MergeVariants<V, E extends AnyComponent[]> = MergeVariantMaps<
   NoInfer<V>,
-  MergeExtendedAllVariants<E>
+  MergeExtendedVariants<E>
 >;
 
-export type MergeVariants<V, CV, E extends AnyComponent[]> = NoInfer<CV> &
-  Omit<MergeBaseVariants<V, E>, keyof CV>;
-
 type StringToBoolean<T> = T extends "true" | "false" ? boolean : T;
 
 type VariantValue = ClassValue | StyleClassValue;
@@ -272,7 +266,7 @@ export interface StyleClassValue {
   class?: ClassValue;
 }
 
-export interface ComputedContext<V> {
+export interface RefineContext<V> {
   variants: VariantValues<V>;
   setVariants: (variants: VariantValues<V>) => void;
   setDefaultVariants: (variants: VariantValues<V>) => void;
@@ -280,16 +274,14 @@ export interface ComputedContext<V> {
   addStyle: (style: StyleValue) => void;
 }
 
-export type Computed<V> = (context: ComputedContext<V>) => VariantValue;
+export type Refine<V> = (context: RefineContext<V>) => VariantValue;
 
-export type ComputedVariant = (value: any) => VariantValue;
-export type ComputedVariants = Record<string, ComputedVariant>;
-export type Variant = ClassValue | Record<string, VariantValue>;
+export type Variant =
+  | ClassValue
+  | Record<string, VariantValue>
+  | ((value: any) => VariantValue);
 export type Variants = Record<string, Variant>;
 
-type ExtendedVariants<E extends AnyComponent[]> = MergeExtendedVariants<E> &
-  MergeExtendedComputedVariants<E>;
-
 type NullablePartial<T> =
   T extends Record<string, any> ? { [K in keyof T]?: T[K] | null } : T | null;
 
@@ -297,7 +289,7 @@ export type ExtendableVariants<
   V extends Variants,
   E extends AnyComponent[],
 > = V & {
-  [K in keyof ExtendedVariants<E>]?:
-    | NullablePartial<ExtendedVariants<E>[K]>
+  [K in keyof MergeExtendedVariants<E>]?:
+    | NullablePartial<MergeExtendedVariants<E>[K]>
     | Variant;
 };

package/src/utils.ts

@@ -39,7 +39,9 @@ export function hyphenToCamel(str: string) {
   }
   // Fast path: no hyphen -> return as-is
   let hyphenIndex = str.indexOf("-");
-  if (hyphenIndex === -1) return str;
+  if (hyphenIndex === -1) {
+    return str;
+  }
 
   let result = "";
   let lastIndex = 0;
@@ -91,7 +93,9 @@ export function camelToHyphen(str: string) {
     lastIndex = i + 1;
   }
 
-  if (lastIndex === 0) return str;
+  if (lastIndex === 0) {
+    return str;
+  }
   return result + str.slice(lastIndex);
 }
 
@@ -102,7 +106,9 @@ export function camelToHyphen(str: string) {
  * parseLengthValue("2em"); // "2em"
  */
 export function parseLengthValue(value: string | number) {
-  if (typeof value === "string") return value;
+  if (typeof value === "string") {
+    return value;
+  }
   return `${value}px`;
 }
 
@@ -135,7 +141,10 @@ export function htmlStyleToStyleValue(styleString: string) {
     }
     if (i >= len || styleString.charCodeAt(i) === 59) {
       // No colon found - skip this declaration
-      if (i < len) i++; // skip ';'
+      if (i < len) {
+        // Skip ';'.
+        i++;
+      }
       continue;
     }
     let propEnd = i;
@@ -147,12 +156,17 @@ export function htmlStyleToStyleValue(styleString: string) {
     }
     if (propEnd === propStart) {
       // Empty property - skip
-      while (i < len && styleString.charCodeAt(i) !== 59) i++;
-      if (i < len) i++;
+      while (i < len && styleString.charCodeAt(i) !== 59) {
+        i++;
+      }
+      if (i < len) {
+        i++;
+      }
       continue;
     }
     const property = styleString.slice(propStart, propEnd);
-    i++; // skip ':'
+    // Skip ':'.
+    i++;
     // Skip whitespace before value
     while (i < len) {
       const c = styleString.charCodeAt(i);
@@ -160,14 +174,19 @@ export function htmlStyleToStyleValue(styleString: string) {
       i++;
     }
     const valStart = i;
-    while (i < len && styleString.charCodeAt(i) !== 59) i++;
+    while (i < len && styleString.charCodeAt(i) !== 59) {
+      i++;
+    }
     let valEnd = i;
     while (valEnd > valStart) {
       const c = styleString.charCodeAt(valEnd - 1);
       if (c !== 32 && c !== 9 && c !== 10 && c !== 13) break;
       valEnd--;
     }
-    if (i < len) i++; // skip ';'
+    if (i < len) {
+      // Skip ';'.
+      i++;
+    }
     if (valEnd === valStart) continue;
     const value = styleString.slice(valStart, valEnd);
     // CSS property names and values are dynamic - cast required for index access
@@ -229,7 +248,9 @@ export function styleValueToHTMLStyle(style: StyleValue): string {
     if (!hasOwn.call(style, key)) continue;
     const value = (style as Record<string, unknown>)[key];
     if (value == null) continue;
-    if (result) result += "; ";
+    if (result) {
+      result += "; ";
+    }
     result += camelToHyphen(key);
     result += ": ";
     result += value as string | number;

package/tests/_utils.ts

@@ -4,7 +4,6 @@ import type {
   AnyComponent,
   CVComponent,
   ComponentResult,
-  ComputedVariants,
   HTMLObjProps,
   HTMLProps,
   JSXProps,
@@ -86,15 +85,18 @@ export function createCVFromConfig(
 export function getModeComponent<
   M extends Mode,
   V extends Variants = {},
-  CV extends ComputedVariants = {},
   const E extends AnyComponent[] = [],
->(mode: M, component: CVComponent<V, CV, E>) {
-  if (!mode) return component;
+>(mode: M, component: CVComponent<V, E>) {
+  if (!mode) {
+    return component;
+  }
   return component[mode];
 }
 
 function getClass(props: ComponentResult) {
-  if ("class" in props) return props.class;
+  if ("class" in props) {
+    return props.class;
+  }
   return props.className;
 }
 

package/tests/build.test.ts

@@ -1,18 +1,92 @@
 import { execFile } from "node:child_process";
-import { readFile } from "node:fs/promises";
+import { mkdtemp, readFile, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
 import { dirname, join } from "node:path";
-import { fileURLToPath } from "node:url";
+import { fileURLToPath, pathToFileURL } from "node:url";
 import { promisify } from "node:util";
+import { withPackageBuildLock } from "test-utils/build-lock";
+import { build } from "vite";
 import { expect, test } from "vitest";
 
 const root = join(dirname(fileURLToPath(import.meta.url)), "..");
 const exec = promisify(execFile);
+let buildPromise: Promise<unknown> | undefined;
+
+function buildPackage() {
+  buildPromise ??= exec("pnpm", ["--dir", root, "build"]);
+  return buildPromise;
+}
 
 test("build preserves the production warning guard for consumers", async () => {
-  await exec("pnpm", ["--dir", root, "build"]);
+  await withPackageBuildLock(async () => {
+    await buildPackage();
+
+    const code = await readFile(join(root, "dist/index.js"), "utf8");
+    expect(code).toMatch(
+      /warnRefineLimit[\s\S]*?process\.env\.NODE_ENV === "production"[\s\S]*?console\.warn\(/,
+    );
+  });
+}, 60_000);
+
+test("vite removes warning logic from the production bundle", async () => {
+  await withPackageBuildLock(async () => {
+    await buildPackage();
+
+    const tempDir = await mkdtemp(join(tmpdir(), "clava-vite-"));
+    try {
+      const entry = join(tempDir, "entry.js");
+      const bundle = join(tempDir, "dist/bundle.js");
+      const clavaUrl = pathToFileURL(join(root, "dist/index.js")).href;
+
+      await writeFile(
+        entry,
+        `
+        import { cv } from ${JSON.stringify(clavaUrl)};
+
+        export const button = cv({
+          variants: {
+            tone: {
+              primary: "primary",
+            },
+          },
+          refine({ setVariants }) {
+            setVariants({ tone: "primary" });
+          },
+        });
+
+        button();
+      `,
+      );
+
+      await build({
+        configFile: false,
+        logLevel: "silent",
+        root: tempDir,
+        mode: "production",
+        define: {
+          "process.env.NODE_ENV": JSON.stringify("production"),
+        },
+        build: {
+          emptyOutDir: true,
+          lib: {
+            entry,
+            fileName: () => "bundle.js",
+            formats: ["es"],
+          },
+          minify: true,
+          outDir: "dist",
+        },
+      });
 
-  const code = await readFile(join(root, "dist/index.js"), "utf8");
-  expect(code).toMatch(
-    /process\.env\.NODE_ENV !== "production"[\s\S]*?console\.warn\(/,
-  );
+      const code = await readFile(bundle, "utf8");
+      expect(code).not.toContain("console.warn");
+      expect(code).not.toContain("Clava: Maximum refine iterations exceeded");
+      expect(code).not.toContain("Variant(s) that did not stabilize");
+      expect(code).not.toContain("Component created at");
+      expect(code).not.toContain("captureStackTrace");
+      expect(code).not.toMatch(/\.warned\b|["']warned["']/);
+    } finally {
+      await rm(tempDir, { force: true, recursive: true });
+    }
+  });
 }, 60_000);

package/tests/component-api.test.ts

@@ -59,7 +59,7 @@ for (const config of Object.values(CONFIGS)) {
       expect(variants).toEqual({ size: "sm" });
     });
 
-    test("getVariants returns variants set by computed setVariants", () => {
+    test("getVariants returns variants set by refine setVariants", () => {
       const component = getModeComponent(
         mode,
         cv({
@@ -67,7 +67,7 @@ for (const config of Object.values(CONFIGS)) {
             size: { sm: "sm", lg: "lg" },
             color: { red: "red", blue: "blue" },
           },
-          computed: ({ variants, setVariants }) => {
+          refine: ({ variants, setVariants }) => {
             if (variants.size === "lg") {
               setVariants({ color: "red" });
             }
@@ -78,7 +78,7 @@ for (const config of Object.values(CONFIGS)) {
       expect(variants).toEqual({ size: "lg", color: "red" });
     });
 
-    test("getVariants re-runs when computed changes variants", () => {
+    test("getVariants re-runs when refine changes variants", () => {
       const component = getModeComponent(
         mode,
         cv({
@@ -86,7 +86,7 @@ for (const config of Object.values(CONFIGS)) {
             size: { sm: "sm", lg: "lg" },
             color: { red: "red", blue: "blue" },
           },
-          computed: ({ variants, setVariants }) => {
+          refine: ({ variants, setVariants }) => {
             if (variants.size === "lg") {
               setVariants({ color: "red" });
             }
@@ -108,7 +108,7 @@ for (const config of Object.values(CONFIGS)) {
             size: { sm: "sm", lg: "lg" },
             color: { red: "red", blue: "blue" },
           },
-          computed: ({ variants, setDefaultVariants }) => {
+          refine: ({ variants, setDefaultVariants }) => {
             setDefaultVariants({ color: "red" });
             if (variants.color === "red") {
               setDefaultVariants({ size: "lg" });
@@ -120,7 +120,7 @@ for (const config of Object.values(CONFIGS)) {
       expect(variants).toEqual({ size: "lg", color: "red" });
     });
 
-    test("getVariants returns variants set by computed setDefaultVariants", () => {
+    test("getVariants returns variants set by refine setDefaultVariants", () => {
       const component = getModeComponent(
         mode,
         cv({
@@ -128,7 +128,7 @@ for (const config of Object.values(CONFIGS)) {
             size: { sm: "sm", lg: "lg" },
             color: { red: "red", blue: "blue" },
           },
-          computed: ({ variants, setDefaultVariants }) => {
+          refine: ({ variants, setDefaultVariants }) => {
             if (variants.size === "lg") {
               setDefaultVariants({ color: "blue" });
             }
@@ -147,7 +147,7 @@ for (const config of Object.values(CONFIGS)) {
             size: { sm: "sm", lg: "lg" },
             color: { red: "red", blue: "blue" },
           },
-          computed: ({ setDefaultVariants }) => {
+          refine: ({ setDefaultVariants }) => {
             setDefaultVariants({ color: "blue" });
           },
         }),
@@ -164,7 +164,7 @@ for (const config of Object.values(CONFIGS)) {
             size: { sm: "sm", lg: "lg" },
             color: { red: "red", blue: "blue" },
           },
-          computed: ({ setVariants }) => {
+          refine: ({ setVariants }) => {
             setVariants({ color: "blue" });
           },
         }),
@@ -176,7 +176,7 @@ for (const config of Object.values(CONFIGS)) {
     test("getVariants picks up setDefaultVariants from extended component", () => {
       const base = cv({
         variants: { size: { sm: "sm", lg: "lg" } },
-        computed: ({ setDefaultVariants }) => {
+        refine: ({ setDefaultVariants }) => {
           setDefaultVariants({ size: "lg" });
         },
       });
@@ -195,7 +195,7 @@ for (const config of Object.values(CONFIGS)) {
     test("getVariants picks up setDefaultVariants from grandparent component", () => {
       const grandparent = cv({
         variants: { size: { sm: "sm", lg: "lg" } },
-        computed: ({ setDefaultVariants }) => {
+        refine: ({ setDefaultVariants }) => {
           setDefaultVariants({ size: "lg" });
         },
       });
@@ -212,11 +212,11 @@ for (const config of Object.values(CONFIGS)) {
       expect(variants).toEqual({ size: "lg", color: "red" });
     });
 
-    test("getVariants re-runs when base component computed changes variants", () => {
+    test("getVariants re-runs when base component refine changes variants", () => {
       const base = cv({
         variants: { size: { sm: "sm", lg: "lg" }, active: "" },
         defaultVariants: { size: "sm" },
-        computed: ({ variants, setVariants }) => {
+        refine: ({ variants, setVariants }) => {
           if (variants.active) {
             setVariants({ size: "lg" });
           }
@@ -227,7 +227,7 @@ for (const config of Object.values(CONFIGS)) {
         cv({
           extend: [base],
           variants: { color: { red: "red", blue: "blue" } },
-          computed: ({ variants, setVariants }) => {
+          refine: ({ variants, setVariants }) => {
             if (variants.size === "lg") {
               setVariants({ color: "red" });
             }
@@ -246,7 +246,7 @@ for (const config of Object.values(CONFIGS)) {
           mode: { on: "on" },
         },
         defaultVariants: { size: "sm" },
-        computed: ({ variants, setVariants, setDefaultVariants }) => {
+        refine: ({ variants, setVariants, setDefaultVariants }) => {
           if (variants.active) {
             setVariants({ mode: "on" });
           }
@@ -266,7 +266,7 @@ for (const config of Object.values(CONFIGS)) {
         cv({
           variants: { size: { sm: "sm", lg: "lg" } },
           defaultVariants: { size: "sm" },
-          computed: ({ setVariants }) => {
+          refine: ({ setVariants }) => {
             setVariants({ size: "lg" });
             setVariants({ size: "sm" });
           },
@@ -279,7 +279,7 @@ for (const config of Object.values(CONFIGS)) {
     test("getVariants child setVariants keeps overriding base setDefaultVariants across re-runs", () => {
       const base = cv({
         variants: { color: { red: "red", blue: "blue" } },
-        computed: ({ setDefaultVariants }) => {
+        refine: ({ setDefaultVariants }) => {
           setDefaultVariants({ color: "blue" });
         },
       });
@@ -289,7 +289,7 @@ for (const config of Object.values(CONFIGS)) {
           extend: [base],
           variants: { size: { sm: "sm", lg: "lg" } },
           defaultVariants: { size: "sm" },
-          computed: ({ variants, setVariants }) => {
+          refine: ({ variants, setVariants }) => {
             if (variants.size === "sm") {
               setVariants({ color: "red" });
             }
@@ -303,7 +303,7 @@ for (const config of Object.values(CONFIGS)) {
     test("getVariants setVariants sticks across re-runs", () => {
       const base = cv({
         variants: { color: { red: "red", blue: "blue" } },
-        computed: ({ setDefaultVariants }) => {
+        refine: ({ setDefaultVariants }) => {
           setDefaultVariants({ color: "blue" });
         },
       });
@@ -312,7 +312,7 @@ for (const config of Object.values(CONFIGS)) {
         cv({
           extend: [base],
           variants: { color: { red: "red", blue: "blue" }, done: "" },
-          computed: ({ variants, setVariants }) => {
+          refine: ({ variants, setVariants }) => {
             if (!variants.done) {
               setVariants({ color: "red", done: true });
             }
@@ -330,7 +330,7 @@ for (const config of Object.values(CONFIGS)) {
           active: "",
           mode: { on: "on" },
         },
-        computed: ({ variants, setVariants, setDefaultVariants }) => {
+        refine: ({ variants, setVariants, setDefaultVariants }) => {
           if (variants.active) {
             setVariants({ mode: "on" });
           }
@@ -350,13 +350,13 @@ for (const config of Object.values(CONFIGS)) {
     test("getVariants setVariants from earlier extends overrides setDefaultVariants from later extends", () => {
       const first = cv({
         variants: { color: { red: "first-red", blue: "first-blue" } },
-        computed: ({ setVariants }) => {
+        refine: ({ setVariants }) => {
           setVariants({ color: "red" });
         },
       });
       const second = cv({
         variants: { color: { red: "second-red", blue: "second-blue" } },
-        computed: ({ setDefaultVariants }) => {
+        refine: ({ setDefaultVariants }) => {
           setDefaultVariants({ color: "blue" });
         },
       });
@@ -368,13 +368,13 @@ for (const config of Object.values(CONFIGS)) {
     test("getVariants setDefaultVariants from later extends overrides setDefaultVariants from earlier extends", () => {
       const first = cv({
         variants: { color: { red: "first-red", blue: "first-blue" } },
-        computed: ({ setDefaultVariants }) => {
+        refine: ({ setDefaultVariants }) => {
           setDefaultVariants({ color: "red" });
         },
       });
       const second = cv({
         variants: { color: { red: "second-red", blue: "second-blue" } },
-        computed: ({ setDefaultVariants }) => {
+        refine: ({ setDefaultVariants }) => {
           setDefaultVariants({ color: "blue" });
         },
       });
@@ -386,7 +386,7 @@ for (const config of Object.values(CONFIGS)) {
     test("getVariants setDefaultVariants does not override stable setVariants on later passes", () => {
       const base = cv({
         variants: { color: { red: "base-red", blue: "base-blue" } },
-        computed: ({ setVariants }) => {
+        refine: ({ setVariants }) => {
           setVariants({ color: "red" });
         },
       });
@@ -395,7 +395,7 @@ for (const config of Object.values(CONFIGS)) {
         cv({
           extend: [base],
           variants: { color: { red: "child-red", blue: "child-blue" } },
-          computed: ({ variants, setDefaultVariants }) => {
+          refine: ({ variants, setDefaultVariants }) => {
             if (variants.color === "red") {
               setDefaultVariants({ color: "blue" });
             }
@@ -414,7 +414,7 @@ for (const config of Object.values(CONFIGS)) {
             color: { red: "red", blue: "blue" },
             done: "",
           },
-          computed: ({ variants, setVariants, setDefaultVariants }) => {
+          refine: ({ variants, setVariants, setDefaultVariants }) => {
             if (!variants.done) {
               setVariants({ color: "red", done: true });
             }

package/tests/extend.test.ts

@@ -144,7 +144,7 @@ for (const config of Object.values(CONFIGS)) {
       });
     });
 
-    test("extend disabled variant value with computed setDefaultVariants", () => {
+    test("extend disabled variant value with refine setDefaultVariants", () => {
       const base = cv({
         variants: {
           size: {
@@ -158,7 +158,7 @@ for (const config of Object.values(CONFIGS)) {
         cv({
           extend: [base],
           variants: { size: { sm: null } },
-          computed: ({ setDefaultVariants }) => {
+          refine: ({ setDefaultVariants }) => {
             setDefaultVariants({ size: "lg" });
           },
         }),
@@ -173,7 +173,7 @@ for (const config of Object.values(CONFIGS)) {
         cv({
           extend: [base],
           variants: { size: { sm: null } },
-          computed: ({ setDefaultVariants }) => {
+          refine: ({ setDefaultVariants }) => {
             setDefaultVariants({
               // @ts-expect-error disabled variant value cannot be set
               size:
@@ -186,7 +186,7 @@ for (const config of Object.values(CONFIGS)) {
       expect(getStyleClass(invalidComponent())).toEqual({ class: "" });
     });
 
-    test("extend disabled variant value with computed setVariants", () => {
+    test("extend disabled variant value with refine setVariants", () => {
       const base = cv({
         variants: {
           size: {
@@ -200,7 +200,7 @@ for (const config of Object.values(CONFIGS)) {
         cv({
           extend: [base],
           variants: { size: { sm: null } },
-          computed: ({ setVariants }) => {
+          refine: ({ setVariants }) => {
             setVariants({ size: "lg" });
           },
         }),
@@ -215,7 +215,7 @@ for (const config of Object.values(CONFIGS)) {
         cv({
           extend: [base],
           variants: { size: { sm: null } },
-          computed: ({ setVariants }) => {
+          refine: ({ setVariants }) => {
             setVariants({
               // @ts-expect-error disabled variant value cannot be set
               size:
@@ -333,8 +333,13 @@ describe("non-idempotent transformClass", () => {
   });
 });
 
-const toUpperCase = (className: string) => className.toUpperCase();
-const toLowerCase = (className: string) => className.toLowerCase();
+function toUpperCase(className: string) {
+  return className.toUpperCase();
+}
+
+function toLowerCase(className: string) {
+  return className.toLowerCase();
+}
 
 describe("extend across `create()` factories", () => {
   // The extend's own `transformClass` must apply to its own classes even when