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

compoundSlots broken with extend #199

Open
blowsie opened this issue Jun 5, 2024 · 3 comments
Open

compoundSlots broken with extend #199

blowsie opened this issue Jun 5, 2024 · 3 comments
Labels
bug Something isn't working

Comments

@blowsie
Copy link

blowsie commented Jun 5, 2024

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 blowsie added the bug Something isn't working label Jun 5, 2024
@blowsie
Copy link
Author

blowsie commented Jun 5, 2024

Maybe related
#140

@blowsie
Copy link
Author

blowsie commented Jun 5, 2024

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
Copy link

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

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

2 participants