- 
                Notifications
    
You must be signed in to change notification settings  - Fork 80
 
Open
0 / 10 of 1 issue completedOpen
0 / 10 of 1 issue completed
Copy link
Labels
bugSomething isn't workingSomething isn't working
Description
Describe the bug
When extending a variantInstance multiple times using the extend, some variants properties (e.g., tag, dot) are lost.
To Reproduce
Steps to reproduce the behavior:
- Create a base variant using 
tailwind-variants. - Extend the base variant 
baseTagVariantsto createuserRoleVariantsvariant. - Extend the 
userRoleVariantsto create auserRoleIconVariantsvariant. - Attempt to use the properties e.g. 
taganddotin the final variantuserRoleIconVariants. - See error indicating that 
taganddotdo not exist in the type. 
Expected behavior
The properties tag and dot should be available in the final extended variant.
Additional context
This issue occurs only in TypeScript. The problem is demonstrated in the file src/variants.demo.ts (tv-issue).
"typescript": "~5.7.2"
Repo:
Code:
import { tv } from 'tailwind-variants';
const baseTagVariants = tv({
  base: '',
  variants: {
    tag: {
      true: 'border-0 shadow-md font-semibold text-white',
    },
    dot: {
      true: 'size-3 rounded-full text-[0px] min-w-3 min-h-3 shadow-sm',
    },
  }
});
export const userRoleVariants = tv({
  extend: baseTagVariants,
  variants: {
    id: {
      1: 'bg-role-admin shadow-role-admin/50', // admin
      2: 'bg-role-semi-admin shadow-role-semi-admin/50', // semi-admin
      3: 'bg-role-user shadow-role-user/50', // user
    },
    // tag: { true: '' }, // <- uncomment for compatibility
  },
});
const userRoleIconVariants = tv(
  {
    extend: userRoleVariants, // extend background and shadow
    base: 'flex size-7 items-center justify-center rounded-full', // circle
  },
  {}
);
const example = userRoleIconVariants({ id: 1, dot: true });
//                                             ^^^^ -  Object literal may only specify known properties, and tag does not exist in typeJonnyDawe and bboyrabiRoccoAguilera
Sub-issues
Metadata
Metadata
Assignees
Labels
bugSomething isn't workingSomething isn't working