nextui-org/tailwind-variants-docs

IntelliSense stops working when using CSS variables

cmpsleo opened this issue · 1 comments

cmpsleo commented

Describe the bug

After following the steps to enable autocomplete for Tailwind Variants as per the documentation, it worked perfectly. However, I noticed that when using CSS variables, also known as arbitrary values, within parentheses, IntelliSense stops working.

To Reproduce

  1. Follow the documentation instructions to enable autocomplete.
  2. Within any string inside the tv() method, use an arbitrary value by passing a CSS variable, for example: tv({ base: "text-[var(--colors-primary)]" }).
  3. Notice that the regex loses its reference and stops autocompleting any other available classes.

Expected behavior

It would be expected that autocomplete works normally.

Screenshots

image

image

Additional context

I noticed that when I changed the first block of the regex in the documentation, it started working again. For example:

"tailwindCSS.experimental.classRegex": [ ["["']([^\"']).?["'`]"] ]

It seems that the first block ignores any character that starts with parentheses, effectively blocking the use of var().

Is it correct to continue like this, or how could this regex be modified to support this case?

mskelton commented

PR opened with the fix for this!

#18

  • 🎉2