Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

compoundVariants does not recognize falsy boolean variant #209

Open
spetrac opened this issue Jul 18, 2024 · 1 comment
Open

compoundVariants does not recognize falsy boolean variant #209

spetrac opened this issue Jul 18, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@spetrac
Copy link

spetrac commented Jul 18, 2024

Describe the bug

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:

<Element color='red' monochrome />
<Element color='blue' monochrome={false} />
<Element color='blue' />

Defining a compoundVariant could look like this:

const element = 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 undefined
    class: 'bg-red-600'
  }, {
    color: 'blue',
    monochrome: [false, undefined], // will be caught by typescript, because of non-boolean value
    class: 'bg-red-600'
  }]
})

Expected behavior

  1. The compoundVariant should treat undefined as false for boolean variants.
  2. 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
@spetrac spetrac added the bug Something isn't working label Jul 18, 2024
@thefalked
Copy link
Contributor

Hello, i know that this issue was open a long time ago and it has a PR to fix this, but while is not merge, you should be using this: https://www.tailwind-variants.org/docs/variants#default-variants

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants
@thefalked @spetrac and others