Example Tailwind regex breaks if parentheses are used in comments

[pm0u]

Describe the bug
Using the regex provided in the readme for tailwind intellisense, the intellisense breaks if a comment inside the CVA object contains a parentheses.

To Reproduce
Steps to reproduce the behavior:

1. Create a CVA object

const button = cva(["p-4", {
  variants: {
    variant: {
      primary: ["bg-red-10"]
    }
  }
})

2. Add a comment that contains a parentheses

const button = cva(["p-4", {
  variants: {
    /** Button variant (background color) */
    variant: {
      primary: ["bg-red-10"]
    }
  }
})

3. Observe intellisense stops working

Expected behavior
Intellisense would not be impacted by content in comments.

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser NA
• Version [email protected], [email protected]

[pm0u]

The use case for us is explanatory comments that are parsed into the Storybook argsTable (in addition to dev usefulness)

[pm0u]

going to try this one out for awhile:

    ["cva\\(([\\s\\S]*?)\\}[\\s]*?\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]

Basically, instead of matching characters excluding end parentheses ([^)]*), match all characters (including newlines) up until a } character followed by any amount of whitespace which is then followed by a closing parentheses. Essentially looking for the closing }) on the CVA object as the second param. Would break if there was a comment or something else other than whitespace between those two characters (newline acceptable). edit: had to make the [\s\S]* lazy otherwise it matches everything after cva( 😅

[pm0u]

This seems to be working well so far. The only thing I could see being an improvement is if the regex could simply "exclude" anything in a comment (either lines starting with // or anything between /* */). This could allow explaining usage with JS syntax in comments which my current suggestion does not permit (IE a comment such as /** pass in args like function({ arg1 }) */). I'm not quite good enough at negative lookups/regex to put this together.

[arpadgabor]

I've found this to be an issue with generics as well when declaring variants. I've been using this regex with some success but could be improved:

["cva<.*>\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]

and it works with a snippet like

const style = cva<Variants>(...)

[joe-bell]

@arpadgabor cva does not support nor encourage passing generic types — it’s not documented because it’s internal only

[leeschmidt4]

The tailwind regex is brittle. It breaks in a lot of strange scenarios with no clear reason. Is this a bug with vscode or tailwind? I can't see what would be wrong with the regex that causes these weird issues.

Playing around with it more, definitely seems to be tied to the length or size of the object.

[leeschmidt4]

I think this is most definitely a tailwind or vscode bug. Here's what I've done as a temporary workaround for objects that are too large and break the regex intellisense:

I wrap every class or list of classes in tw() which is defined as: const tw = <T,>(a: T): T => a (or set the type to ClassValue). The only change to the regex is to replace the leading cva with tw, so you have ["tw\\(([^)]*)\\)", "[\\\"']([^\\\"'`]*).*?[\\\"'`]"]`

It's kinda ugly, but I almost like it due to the fact it's a little more clear to whomever is reading the code that these are specifically tailwind classes.

Example:

size: { small: tw(['text-sm']), medium: tw(['text-base']), },

[corydeppen]

This looks similar to an issue I'm seeing, where intellisense breaks when using calc for an arbitrary value (e.g. "w-[calc(2*2rem)]").

[joe-bell]

Linking @its-monotype's issue which feels related (#108)

---

Describe the bug
IntelliSense does not work in compoundVariants despite the first element of the array in VSCode.

To Reproduce
Steps to reproduce the behavior:

1. Complete each step described in the README in "Installation -> TailwindCSS -> IntelliSense -> Visual Studio Code" section.
2. Try to use IntelliSense in the compoundVariants in any object despite the first one.

Expected behavior
IntelliSense work as expected as here:

Screenshots

[its-monotype]

Also, look at this, maybe it's something around 1000:

Video.mp4

[its-monotype]

It's a shame if it can't be fixed.

[joe-bell]

Oh shoot, nice find

[pm0u]

@its-monotype I don't think you'd be able to change that in the extension, no... but you could break up large CVA objects like that and create your own regex to match something like const compoundVariants = { /* match strings in here */}

[its-monotype]

Of course, the problem is unpleasant, but it prompted me to reconsider the logic of the component and it seems to me that I made it better by removing the size variant since it can be customized so easy from the outside using className prop 😅

[lsmurray]

@joe-bell the PR I posted #99 resolves these parentheses issues. You can take the regex from there and it should solve most of the parentheses issues.

Here are the regexes in case its helpful for someone else. Enables standalone cx as well as cva completion.

    // enable autocomplete in cx(...)
    ["cx\\(((?:[^()]|\\([^()]*\\))*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    // enable autocomplete in cva(...)
    ["cva\\(((?:[^()]|\\([^()]*\\))*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]

[joe-bell]

Seems to work well! Unfortunately it seems to trigger IntelliSense for variant keys though

[its-monotype]

Seems to work well! Unfortunately it seems to trigger IntelliSense for variant keys though

I don't have such a problem, everything seems to be working perfectly, how can I check this?

[lsmurray]

@joe-bell also not sure what you mean. If you could post a screenshot of the issue I can try to help resolve.

[joe-bell]

No problem! As you can see here, IntelliSense is being triggered for all object values and keys:

Ideally, IntelliSense should be limited to:

1. The first cva parameter
2. Object values within variants, and class/className within compoundVariants

I have some changes in mind for v1 that should make this regex easier 🤞

---

Really appreciate your efforts to dig into this by the way 🙏

[lsmurray]

The issue is clear but haven't come up with a fix 🤷

[franzwollang]

My colleague is using this library and was having some trouble with Tailwind Intellisense as well. I've taken a stab at a less brittle regex, hopefully it's helpful to others: regexr.com/78lt3

My colleague is still having issues even after all of the regex tinkering but as far as we can tell, the regex isn't the primary issue. There may be something else going on with either VSCode or the Tailwind Intellisense plugin that makes it not work so well with longer CVA objects?

[deltasierra96]

Any updates on this issue? It's clearly a Regex pattern problem. I cannot for the life of me to cleanly get autocomplete to work on cva components that have compound variants.

[joe-bell]

PRs are welcome, I'm only human and I'm trying my best to work on this project with $0 MRR 🥲

[pm0u]

@deltasierra96 have you tried the suggestions in this discussion and reviewed the issues others have had? Mine is working for me in compound variants without issue.

    ["cva\\(([\\s\\S]+?)\\}[\\s]*?\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]

provide more context if you are actually looking for help here.