Skip to content

Unable to infer certain variants after multiple extensions (TypeScript issue) #244

@floatrx

Description

@floatrx

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:

  1. Create a base variant using tailwind-variants.
  2. Extend the base variant baseTagVariants to create userRoleVariants variant.
  3. Extend the userRoleVariants to create a userRoleIconVariants variant.
  4. Attempt to use the properties e.g. tag and dot in the final variant userRoleIconVariants.
  5. See error indicating that tag and dot do 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:

tv-issue

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 type

Sub-issues

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions