Running into a strange situation with tailwind4 theme & cva...

Let's take the simplified theme in my index.css:

@import "tailwindcss";
@theme:{
   --color-on-surface: #FFFFFF;
   --text-label-large: 24px;
}

now in react component I can do something like this

hi

Works fine...now if I do something like:

const myVariants = cva(['text-on-surface', 'text-label-large'],{...redacted...});
const styles = twMerge(clsx(myVariants(...));
console.log(styles)

All I see is the text-on-surface. text-label-large is missing.

Finally if I try:

const styles = twMerge(clsx(myVariants(...), `text-label-large`);
console.log(styles);

Then I see both classes: text-on-surface,text-label-large

The same thing happens when I try it by defining my own shadow The only theme namespace that has worked so far for me is the --color