clava 0.3.0 → 0.4.1

package/tests/{computed-variants.test.ts → function-variants.test.ts}

@@ -15,11 +15,11 @@ for (const config of Object.values(CONFIGS)) {
   const cls = getConfigTransformClass(config);
 
   describe(getConfigDescription(config), () => {
-    test("computedVariants", () => {
+    test("function variant", () => {
       const component = getModeComponent(
         mode,
         cv({
-          computedVariants: {
+          variants: {
             size: (value: "sm" | "lg") => (value === "sm" ? "small" : "large"),
           },
         }),
@@ -28,11 +28,11 @@ for (const config of Object.values(CONFIGS)) {
       expect(getStyleClass(props)).toEqual({ class: cls("large") });
     });
 
-    test("computedVariants with style", () => {
+    test("function variant with style", () => {
       const component = getModeComponent(
         mode,
         cv({
-          computedVariants: {
+          variants: {
             size: (value: "sm" | "lg") => ({
               class: value === "sm" ? "small" : "large",
               style: { fontSize: value === "sm" ? "12px" : "16px" },
@@ -47,7 +47,7 @@ for (const config of Object.values(CONFIGS)) {
       });
     });
 
-    test("computedVariants can return another component default result", () => {
+    test("function variant can return another component default result", () => {
       const button = cv({
         variants: {
           size: {
@@ -59,7 +59,7 @@ for (const config of Object.values(CONFIGS)) {
       const component = getModeComponent(
         mode,
         cv({
-          computedVariants: {
+          variants: {
             size: (value: "sm" | "lg") => {
               return button({ size: value });
             },
@@ -73,7 +73,7 @@ for (const config of Object.values(CONFIGS)) {
       });
     });
 
-    test("computedVariants overrides extended object variants", () => {
+    test("function variant overrides extended object variant", () => {
       const base = cv({
         variants: {
           size: {
@@ -86,7 +86,7 @@ for (const config of Object.values(CONFIGS)) {
         mode,
         cv({
           extend: [base],
-          computedVariants: {
+          variants: {
             size: (value: "sm" | "lg") => ({
               class: value === "sm" ? "extended-sm" : "extended-lg",
               style: {
@@ -103,9 +103,9 @@ for (const config of Object.values(CONFIGS)) {
       });
     });
 
-    test("computedVariants overrides extended computedVariants", () => {
+    test("function variant overrides extended function variant", () => {
       const base = cv({
-        computedVariants: {
+        variants: {
           size: (value: "sm" | "lg") => ({
             class: value === "sm" ? "base-sm" : "base-lg",
             style: { fontSize: value === "sm" ? "12px" : "16px" },
@@ -116,7 +116,7 @@ for (const config of Object.values(CONFIGS)) {
         mode,
         cv({
           extend: [base],
-          computedVariants: {
+          variants: {
             size: (value: "sm" | "lg") => ({
               class: value === "sm" ? "extended-sm" : "extended-lg",
               style: {
@@ -133,11 +133,11 @@ for (const config of Object.values(CONFIGS)) {
       });
     });
 
-    test("computedVariants style does not accept numbers", () => {
+    test("function variant style does not accept numbers", () => {
       const component = getModeComponent(
         mode,
         cv({
-          computedVariants: {
+          variants: {
             // @ts-expect-error
             size: (value: "sm" | "lg") => ({
               class: value === "sm" ? "small" : "large",
@@ -153,7 +153,7 @@ for (const config of Object.values(CONFIGS)) {
       });
     });
 
-    test("computedVariants changes extended boolean variant to string", () => {
+    test("function variant changes extended boolean variant to string", () => {
       const base = cv({
         variants: { disabled: { true: "disabled", false: "enabled" } },
       });
@@ -161,7 +161,7 @@ for (const config of Object.values(CONFIGS)) {
         mode,
         cv({
           extend: [base],
-          computedVariants: {
+          variants: {
             disabled: (value: "yes" | "no" | "maybe") => {
               if (value === "yes") return "state-disabled";
               if (value === "no") return "state-enabled";
@@ -178,13 +178,13 @@ for (const config of Object.values(CONFIGS)) {
       expect(getStyleClass(props)).toEqual({ class: cls("state-pending") });
     });
 
-    test("computedVariants changes extended string variant to boolean", () => {
+    test("function variant changes extended string variant to boolean", () => {
       const base = cv({ variants: { size: { sm: "sm", md: "md", lg: "lg" } } });
       const component = getModeComponent(
         mode,
         cv({
           extend: [base],
-          computedVariants: {
+          variants: {
             size: (value: boolean) => (value ? "size-large" : "size-small"),
           },
         }),
@@ -199,11 +199,11 @@ for (const config of Object.values(CONFIGS)) {
       expect(getStyleClass(propsFalse)).toEqual({ class: cls("size-small") });
     });
 
-    test("computedVariants with number type", () => {
+    test("function variant with number type", () => {
       const component = getModeComponent(
         mode,
         cv({
-          computedVariants: {
+          variants: {
             columns: (value: number) => ({
               class: `grid-cols-${value}`,
               style: { "--grid-columns": `${value}` },
@@ -218,11 +218,11 @@ for (const config of Object.values(CONFIGS)) {
       });
     });
 
-    test("computedVariants with number type returns dynamic styles", () => {
+    test("function variant with number type returns dynamic styles", () => {
       const component = getModeComponent(
         mode,
         cv({
-          computedVariants: {
+          variants: {
             gap: (value: number) => ({
               style: { "--gap": `${value * 4}px` },
             }),
@@ -244,11 +244,11 @@ for (const config of Object.values(CONFIGS)) {
       });
     });
 
-    test("computedVariants with nullable type", () => {
+    test("function variant with nullable type", () => {
       const component = getModeComponent(
         mode,
         cv({
-          computedVariants: {
+          variants: {
             color: (value: string | null) => ({
               class: value ? `color-${value}` : "color-default",
               style: { "--color": value ?? "inherit" },
@@ -268,7 +268,7 @@ for (const config of Object.values(CONFIGS)) {
       });
     });
 
-    test("computedVariants changes extended variant from string to number", () => {
+    test("function variant changes extended variant from string to number", () => {
       const base = cv({
         variants: { size: { sm: "text-sm", md: "text-md", lg: "text-lg" } },
       });
@@ -276,7 +276,7 @@ for (const config of Object.values(CONFIGS)) {
         mode,
         cv({
           extend: [base],
-          computedVariants: {
+          variants: {
             size: (value: number) => ({
               class: "text-custom",
               style: { fontSize: `${value}px` },
@@ -294,5 +294,85 @@ for (const config of Object.values(CONFIGS)) {
         fontSize: "18px",
       });
     });
+
+    test("static and function variants combine within the same component", () => {
+      const component = getModeComponent(
+        mode,
+        cv({
+          variants: {
+            size: { sm: "size-sm", lg: "size-lg" },
+            columns: (value: number) => `cols-${value}`,
+          },
+        }),
+      );
+      const props = component({ size: "lg", columns: 3 });
+      expect(getStyleClass(props)).toEqual({
+        class: cls("size-lg cols-3"),
+      });
+    });
+
+    test("object variant in child replaces extended function variant at runtime", () => {
+      const base = cv({
+        variants: {
+          // The function is typed for `number`; if it ran with a child string,
+          // it would emit garbage like `base-fn-sm`. The merged-variant type
+          // says the child's object replaces the parent function entirely, so
+          // the runtime must skip the parent's function for this key.
+          size: (value: number) => `base-fn-${value}`,
+        },
+      });
+      const component = getModeComponent(
+        mode,
+        cv({
+          extend: [base],
+          variants: {
+            size: { sm: "child-sm", lg: "child-lg" },
+          },
+        }),
+      );
+      const propsSm = component({ size: "sm" });
+      expect(getStyleClass(propsSm)).toEqual({ class: cls("child-sm") });
+      const propsLg = component({ size: "lg" });
+      expect(getStyleClass(propsLg)).toEqual({ class: cls("child-lg") });
+    });
+
+    test("object variant in grandchild replaces grandparent function variant at runtime", () => {
+      const base = cv({
+        variants: { size: (value: number) => `base-fn-${value}` },
+      });
+      const middle = cv({ extend: [base], class: "middle" });
+      const component = getModeComponent(
+        mode,
+        cv({
+          extend: [middle],
+          variants: { size: { sm: "gc-sm", lg: "gc-lg" } },
+        }),
+      );
+      const props = component({ size: "sm" });
+      expect(getStyleClass(props)).toEqual({ class: cls("middle gc-sm") });
+    });
+
+    test("intermediate object variant hides grandparent function from later extends", () => {
+      const base = cv({
+        variants: { size: (value: number) => `base-fn-${value}` },
+      });
+      const middle = cv({
+        extend: [base],
+        variants: { size: { sm: "middle-sm", md: "middle-md" } },
+      });
+      const component = getModeComponent(
+        mode,
+        cv({
+          extend: [middle],
+          variants: { size: { sm: "child-sm", lg: "child-lg" } },
+        }),
+      );
+      // Middle already replaced the grandparent function with an object, so
+      // child sees only objects in the chain — both objects merge by value.
+      const props = component({ size: "sm" });
+      expect(getStyleClass(props)).toEqual({
+        class: cls("middle-sm child-sm"),
+      });
+    });
   });
 }

package/tests/prototype-pollution.test.ts

@@ -27,16 +27,16 @@ test("render ignores keys inherited from Object.prototype", () => {
   expect(component({}).class).toBe("sm");
 });
 
-test("extend's resolveDefaults ignores polluted prototype on parent's computed", () => {
-  // Base's computed branches on its own variants.size — if the polluted
-  // "size" key leaks into resolveDefaultsFn's resolvedVariants, the computed
-  // callback would see size = "lg" instead of the staticDefault "sm" and
-  // emit the lg-specific class.
+test("extend's resolveDefaults ignores polluted prototype on parent's refine", () => {
+  // Base's refine branches on its own variants.size — if the polluted "size"
+  // key leaks into resolveDefaultsFn's resolvedVariants, the refine callback
+  // would see size = "lg" instead of the staticDefault "sm" and emit the
+  // lg-specific class.
   proto.size = "lg";
   const base = cv({
     variants: { size: { sm: "sm", lg: "lg" } },
     defaultVariants: { size: "sm" },
-    computed: ({ variants, addClass }) => {
+    refine: ({ variants, addClass }) => {
       if (variants.size === "lg") {
         addClass("base-lg-detected");
       }