nextui-org / tailwind-variants

🦄 Tailwindcss first-class variant API
https://tailwind-variants.org
MIT License
2.42k stars 68 forks source link

compoundSlots broken with extend #199

Open blowsie opened 5 months ago

blowsie commented 5 months ago

Describe the bug When using extend on an object with compound slots, the classes are not applies

To Reproduce Steps to reproduce the behavior:

const one = tv({
  slots: { base: 'bg-red w-full', child: 'rounded bg-blue-500' },
  compoundSlots: [
    {
      slots: ['base', 'child'],
      class: 'flex',
    },
  ],
})
const two = tv({
  extend: one,
  slots: {
    child: 'bg-green-500',
  },
})
console.log('[one][base]', one().base())
console.log('[one][child]', one().child())
console.log('[two][base]', two().base())
console.log('[two][child]', two().child())

Expected behavior Expected result in green, actual result in red

  [one][base] bg-red w-full flex
  [one][child] rounded bg-blue-500 flex
- [two][base] bg-red w-full
+ [two][base] bg-red w-full flex
- [two][child] rounded bg-green-500
+ [two][child] rounded bg-green-500 flex
blowsie commented 5 months ago

Maybe related https://github.com/nextui-org/tailwind-variants/issues/140

blowsie commented 5 months ago

This in fact, is kind of documented here.

https://www.tailwind-variants.org/docs/api-reference#extend

extend description: This property allows you to extend the base styles, slots, variants, defaultVariants and compoundVariants from another component.

ChrisGV04 commented 5 months ago

It is strange that compoundSlots don't get extended. However, the documentation you referenced doesn't exactly mention that it also extends compoundSlots, which has me thinking that it was not initially supported.

I hope it can be added soon