Automatic highlighting of types does not work in Webstorm

[Kogomre]

Hi, I'm using tailwind-variables and am getting strange behavior when using variant-derived types when pressing Ctrl+Space in Webstorm. How to fix this?

I'm use
tailwind-variants 0.1.20
tailwindcss 3.4.1
typescript 5.3.3

[mskelton]

This seems like possibly just a WebStorm issue. Could you share a reproduction code sandbox or repo?

[webappcoding]

Same problem i faced too. it's not problem with the IDE or any text editor problem the problem with type export associated with re-usable component which we are building using this package. I compare with cva and its working with it not with tailwind-variants package please fix this issue if possible i want to use some feature which is not available in the cva

[mskelton]

@webappcoding If this happens in JetBrains IDE's but not in VS Code or Neovim, then yeah, I'd say it's an editor issue. Saying "please fix this issue if possible" doesn't really help, that's why I asked for additional information such as a reproduction repo. I'm not saying we can't fix it, but we need more information.

[webappcoding]

Hey @mskelton
In this given example you can see the color props is highlighting the props primary and secondary in the autocomplete list but when i bundle it and push it in npm package and trying to use in another app the auto complete is not working and but styling are applying to the component

Issue image is below

[mskelton]

@webappcoding There are so many things that could be happening as a result of the bundling and publishing setup you have. We need a reproduction repo or code sandbox to help further.

[webappcoding]

Hey @mskelton

Please refer this image below. with every props variants it is adding null value as type

If i am removing null form the type file refer below

Then every thing is working as expected refer below

[mskelton]

@webappcoding That doesn't have anything to do with this issue. VariantProps intentionally marks parameters as optional given that you can write code like this:

function Button(props: VariantProps<typeof buttonStyles) {
  // ...
}

Storybook is what is treating it as null, the type definitions look something like this:

type ButtonProps = {
  color?: "primary" | "secondary" | undefined
  // ...
}

[Willienn]

IDK if helps but i got intellisense back when i use:

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  icon?: ReactNode
  variant?: keyof typeof buttonVariants.variants.variant
}

instead of:

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  icon?: ReactNode
}

but doing this kind break the purpose of using VariantProps<typeof buttonVariants>. No?

ps: Sorry if is of topic

[Kogomre]

@mskelton thx for your time, but after update webstorm for version 2024.1 Build #WS-241.14494.235, built on March 27, 2024 highlights work correctly now.