tailwind-variants
tailwind-variants copied to clipboard
TypeScript Variants Type Information Lost When Extending
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
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