Class detection hover box shifted when using class regex

[michaelschufi]

Hi

I'm using the following class regex setting:

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

Which matches everything inside the single quotes as you can see in the screenshot below.

Unfortunately, if the string literal starts on the new line the class detection hover box is shifted to the left:

This makes it very hard to read. Additionally, the autocomplete isn't working anymore, because of the offset:

Not OK:

OK:

[bradlc]

Hey @michaelschufi. This looks like a bug relating to non-capturing groups. In your specific case the non-capturing group is redundant so you can remove it to fix the issue:

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

[michaelschufi]

Oh, thank you @bradlc! This works well. :D

That's a good hint/workaround for simple regexps. But I remember needing the capturing group for some more complex regex, which I replaced in the meantime and forgot to remove the capturing group.

[bradlc]

I've looked into this some more and it seems like it's definitely an issue with the multi-regexp2 library, related to using quantifiers with capture groups. For example the pattern (\s)* would cause an issue, whereas (\s*) would not. As this is an upstream issue, and an edge case, and there is a workaround, it's not likely that we will be pursuing a solution and I'm going to close this issue. I hope that's understandable!