tailwind-variants icon indicating copy to clipboard operation
tailwind-variants copied to clipboard

TypeScript Variants Type Information Lost When Extending

Open ryanelian opened this issue 2 months ago • 3 comments

Describe the bug

variants declared in a variant is not carried over to subsequent variants when extended.

Before I get chastised for doing this, I want to let everyone know that the reason I'm doing this is because Tailwind VS Code Intellisense breaks down and stop working when your variant gets too big, and I don't know how to fix it.

To Reproduce

Steps to reproduce the behavior:

import { VariantProps, tv } from 'tailwind-variants';

export const buttonBaseVariants = tv({
  base: '',
  variants: {
    mode: {
      contained: '',
      text: '',
    },
  },
});

export const buttonIntentVariants = tv({
  extend: buttonBaseVariants,
  variants: {
    intent: {
      primary: '',
      secondary: '',
      danger: '',
    },
  },
});

export const buttonVariants = tv({
  extend: buttonIntentVariants,
  variants: {
    size: {
      small: '',
      medium: '',
      large: '',
    },
  },
});

Expected behavior I expect the final function to contain the variants extended from the original and subsequent variants. Note below that mode is missing from the type information:

Screenshots

image

Additional context

Using Visual Studio Code with TypeScript 5.4.5 in the project package.json

Version: 1.88.1 (Universal)
Commit: e170252f762678dec6ca2cc69aba1570769a5d39
Date: 2024-04-10T17:42:52.765Z
Electron: 28.2.8
ElectronBuildId: 27744544
Chromium: 120.0.6099.291
Node.js: 18.18.2
V8: 12.0.267.19-electron.0
OS: Darwin arm64 23.4.0

ryanelian avatar Apr 22 '24 17:04 ryanelian