diff --git a/src/__tests__/tv.test.ts b/src/__tests__/tv.test.ts index a0bfc18..f048bfc 100644 --- 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 index 62c8765..f73c570 100644 --- a/src/index.js +++ b/src/index.js @@ -303,15 +303,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; }