Intellisense stops working when using arbitrary values

[shyakadavis]

Describe the bug Hi.

When using Tailwind CSS arbitrary values, the intellisense stops working, loosing all autocomplete and Tailwind colours previews.

To Reproduce

1. Go to your file where you wish to define your variants.
2. Add a complex arbitrary value, such as this: shadow-[4px_4px_0px_rgba(0,0,0,1)]
3. When you save, notice now that intellisense stops working, yet, without the introduction of such an arbitrary value, it was working fine.

Expected behavior Intellisense should still work regardless of me using arbitrary values or not.

Screenshots Before:

After using arbitrary values; notice how all previews disappear.

Desktop (please complete the following information):

• OS: iOS
• Browser: Firefox Version: 122.0a1 (2023-12-03) (64-bit)
• VS Code Version: 1.84.2 (Universal) Date: 2023-11-09T10:52:33.687Z Electron: 25.9.2 ElectronBuildId: 24603566 Chromium: 114.0.5735.289 Node.js: 18.15.0 V8: 11.4.183.29-electron.0 OS: Darwin x64 22.6.0
• Tailwind CSS IntelliSense: v0.10.3
• Tailwind Variants: 0.1.18

Smartphone (please complete the following information):

N/A

Additional context I'm using this:

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

and also tried using this https://github.com/nextui-org/tailwind-variants/issues/127#issuecomment-1823185653

"tailwindCSS.experimental.classRegex": [
  ["tv\\(([^)(]*(?:\\([^)(]*(?:\\([^)(]*(?:\\([^)(]*\\)[^)(]*)*\\)[^)(]*)*\\)[^)(]*)*)\\)", "\"(.*?)\""]
]

But it didn't help.

[mskelton]

I tried to reproduce this and was unable to. Could you share the full source code in that file so I can try?

[shyakadavis]

Hi, @mskelton

I prepared a repro; https://github.com/shyakadavis/twv-issue-repro

I got a better understanding of the issue, and the README should elaborate that.

Basically, intellisense fails for the lines below the one using the complex variant; anything before that works fine.

The file to look at is this; https://github.com/shyakadavis/twv-issue-repro/blob/main/src/lib/components/ui/button/index.ts

Let me know if you require anything else. 🙂

[opswiz]

I don't know much about this, Had the same issue, I used the regex from cva https://cva.style/docs/getting-started/installation#intellisense, but just replaced with tv and it seems to be working fine so far.

{
  "tailwindCSS.experimental.classRegex": [
    ["tv\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ]
}

[shyakadavis]

Hey;

What do you mean, @opswiz? I have the same regex, and I even tried replacing it with that one from CVA, but it doesn't work.

Do you mind sharing a snippet of your final regex that works?

[opswiz]

My bad, I assumed your regex was from the documentation. Its the same, but it seems to work for me. Let me check again. I have both cva and tv, I am making transitioning from cva -> tv. I could have messed up too.

[opswiz]

Yes, its not working, I had a simple one directly inlined in jsx under classname hence it was working, when I moved it outside.

With the regex from the website, its forever loading and with the above regex its nothing.

[cannap]

hi any solution to this?

and thanks for this awesome module

[pjeziorowski]

I have the same issue

[mskelton]

I'm closing this issue as the regex in the docs handles arbitrary variants properly. There is a related issue regarding the performance of the regex, but that's being tracked in #127