Angular: VariantProps binds to 'any' when compoundVariants is defined

[Nxtivision]

Describe the bug
I use this library with Angular and TailwindCSS. It's working perfectly fine, until I use compoundVariants
Here is a simplified example of the problem:

const buttonVariants = cva(
  '...all my CSS Classes',
  {
    variants: {
	variant: {
  	  flat: '',
	  outline: 'border',
	  link: 'underline-offset-4 hover:underline',
	},
	color: {
	  primary: '',
	  secondary: '',
	  destructive: '',
	},
  },
  compoundVariants: [...],
});
type ButtonVariants = VariantProps<typeof buttonVariants>;

And inside my component, I have something like this:

export class UiButtonComponent implements OnChanges {
	@Input()
	variant: ButtonVariants['variant'] = 'flat';
	@Input()
	color: ButtonVariants['color'] = 'primary';

       // ...
}

At this moment, it works fine, no problem, types are correctly recognized. But once I go to the HTML, I lose the type (see Picture 1)

As we can see, variant input is recognized as any, which is kinda weird because all my other components work perfectly fine. The problem also appears with all the other inputs of this component. So I tried to remove the compoundVariants (see Picture 2)

Removing the compoundVariants fixed the problem. Is it a bug ? :)

To Reproduce

Steps explained previously seems to be sufficient.

Expected behavior
In my template, I would like to have my types when I use my component

Screenshots

Picture 1

Picture 2

[joe-bell]

Sorry! I’m not an expert on Angular to provide any advice here, but I’ll move this to a discussion and hopefully someone else can chip in 🙏🏼

[adrekic]

This is still an issue, it has nothing to do with the js/ts framework. Reproducing in a typescript project.