Class detection works only when strings begin and end with whitespace

[michaelschufi]

Hi

I am desperately trying to make the intellisense work with multi-line strings using the class regex setting.

Goal
I want to have all the strings in here "stringed together" in one class attribute context:

cls(
  "relative flex-1 flex flex-col max-w-xs w-full bg-indigo-700",
  "transition bg-gray-50 ease-in-out duration-300 transform",
  sidebarIsOpen ? "translate-x-0" : "-translate-x-full",
),

The problem
Using the regex

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

it only partially works.

As you can see, the suggestions for the second class, for example, works:

But the first and last one of the first string, does not:

The strings with single classes in them also don't work.

The magic trick
If I add a space to the start and the end of each string, it magically works:

---

It would be awesome if this problem could be fixed. Personally, I also don't mind the warnings, since I defined that everything inside cls(...) should be one group.

This may fix some problems other people are having coming from tailwindlabs/tailwindcss#7553.

[geekox86]

I have the same problem, though using my custom classRegex ["tw[^`]*`?", "tw`([^`]*)?"] and tw as string template literal that simply split the string classes into array.

Autocomplete works when pressing space but not enters. Please, advise.

[87vrvk9k]

Same problem here

[bradlc]

Hey @michaelschufi. Here's a configuration that should fix your issue, and also prevent the incorrect warnings:

"tailwindCSS.experimental.classRegex": [
  ["\\bcls\\(([^)]+)\\)", "\"([^\"]*)\""]
],

With your existing configuration the set of classes is parsed as follows:

Group 1
=======
"relative
flex-1
flex
flex-col
max-w-xs
w-full
bg-indigo-700",
"transition
bg-gray-50
ease-in-out
duration-300
transform",
sidebarIsOpen
?
"translate-x-0"
:
"-translate-x-full",

With the updated configuration they are parsed like this:

Group 1
=======
relative
flex-1
flex
flex-col
max-w-xs
w-full
bg-indigo-700

Group 2
=======
transition
bg-gray-50
ease-in-out
duration-300
transform

Group 3
=======
translate-x-0

Group 4
=======
-translate-x-full

Check out my comment over on tailwindlabs/tailwindcss#7553 for more information. I hope that helps!