nextui-org/tailwind-variants

Compound variants are lost when extending multiple times

benjamincanac opened this issue · 2 comments

Describe the bug

When extending tv objects in cascade, the compoundVariants gets lost.

To Reproduce

import { tv } from 'tailwind-variants'

const themeButton = tv({
  base: 'font-medium',
  variants: {
    color: {
      primary: 'text-blue-500'
    },
    disabled: {
      true: 'opacity-50'
    }
  },
  compoundVariants: [{
    color: 'primary',
    disabled: true,
    class: 'bg-black'
  }],
  defaultVariants: {
    color: 'primary',
    disabled: true
  }
})

const appButton = tv({ extend: themeButton })
const button = tv({ extend: appButton })

console.log('appButton', appButton())
// -> font-medium text-blue-500 opacity-50 bg-black
console.log('button', button())
// -> font-medium text-blue-500 opacity-50

Expected behavior

The appButton and button function calls should have the same results.

Desktop (please complete the following information):

  • OS: Mac
  • Browser: Chrome

@mskelton could you please take a look at this?

@jrgarciadev PR opened to fix this #170