You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When using compoundVariants with a boolean variant, it does not recognize undefined as a false equivalent.
On the other hand, including undefined as an array will be caught by typescript as an error.
To Reproduce
Having a component with a tag, you usually do not add false as value, but just skip the tag entirely:
constelement=tv({base: '',variants: {color: {red: 'text-red-600',blue: 'text-blue-600'},monochrome: {true: 'text-black'}},compoundVariants: [{color: 'blue',monochrome: false,// will not recognize the missing tag, if it is undefinedclass: 'bg-red-600'},{color: 'blue',monochrome: [false,undefined],// will be caught by typescript, because of non-boolean valueclass: 'bg-red-600'}]})
Expected behavior
The compoundVariant should treat undefined as false for boolean variants.
The typescript definition for boolean variants should include undefined.
Desktop (please complete the following information):
Windows 11
Chrome: 126.0.6478.127
NextJS: 14.2.5
Typescript: 5.5.3
The text was updated successfully, but these errors were encountered:
Describe the bug
When using compoundVariants with a boolean variant, it does not recognize
undefined
as afalse
equivalent.On the other hand, including
undefined
as an array will be caught by typescript as an error.To Reproduce
Having a component with a tag, you usually do not add
false
as value, but just skip the tag entirely:Defining a compoundVariant could look like this:
Expected behavior
undefined
asfalse
for boolean variants.undefined
.Desktop (please complete the following information):
The text was updated successfully, but these errors were encountered: