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

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

Open
floatrx opened this issue Mar 4, 2025 · 0 comments
Labels
bug Something isn't working

Comments

@floatrx
Copy link

floatrx commented Mar 4, 2025

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
@floatrx floatrx added the bug Something isn't working label Mar 4, 2025
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

1 participant