fix: treat undefined value for compoundVariants as false (#210)

* fix: treat undefined value for compoundVariants as false * refactor: refactor variable name
heroui-inc · Nov 12, 2024 · bfb5d70 · bfb5d70
1 parent 02eb717
commit bfb5d70
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 9 deletions.
diff --git a/src/__tests__/tv.test.ts b/src/__tests__/tv.test.ts
@@ -151,17 +151,33 @@ describe("Tailwind Variants (TV) - Default", () => {
           color: "red",
           class: "bg-red-500",
         },
+        {
+          isBig: false,
+          color: "red",
+          class: "underline",
+        },
       ],
     });
 
-    const result = h1({
-      isBig: true,
-      color: "red",
-    });
+    expect(
+      h1({
+        isBig: true,
+        color: "red",
+      }),
+    ).toHaveClass(["text-5xl", "font-bold", "text-red-500", "bg-red-500"]);
 
-    const expectedResult = ["text-5xl", "font-bold", "text-red-500", "bg-red-500"];
+    expect(
+      h1({
+        isBig: false,
+        color: "red",
+      }),
+    ).toHaveClass(["text-2xl", "font-bold", "text-red-500", "underline"]);
 
-    expect(result).toHaveClass(expectedResult);
+    expect(
+      h1({
+        color: "red",
+      }),
+    ).toHaveClass(["text-2xl", "font-bold", "text-red-500", "underline"]);
   });
 
   test("should throw error if the compoundVariants is not an array", () => {

diff --git a/src/index.js b/src/index.js
@@ -307,15 +307,19 @@ export const tv = (options, configProp) => {
         let isValid = true;
 
         for (const [key, value] of Object.entries(compoundVariantOptions)) {
-          const completeProps = getCompleteProps(key, slotProps);
+          const completePropsValue = getCompleteProps(key, slotProps)[key];
 
           if (Array.isArray(value)) {
-            if (!value.includes(completeProps[key])) {
+            if (!value.includes(completePropsValue)) {
               isValid = false;
               break;
             }
           } else {
-            if (completeProps[key] !== value) {
+            const isBlankOrFalse = (v) => v == null || v === false;
+
+            if (isBlankOrFalse(value) && isBlankOrFalse(completePropsValue)) continue;
+
+            if (completePropsValue !== value) {
               isValid = false;
               break;
             }