Completion not working inside of template strings

[ModProg]

You need to use a custom regex:

See tailwindlabs/tailwindcss#7553
You can use this, replace classes|class with your preferred variable names:

"(?:classes|class)\\s*\\+?=\\s*\"([^\"]*)",
"(?:classes|class)\\s*\\+?=\\s*`([^`]*)",
"(?:classes|class)\\s*\\+?=\\s*'([^']*)",

What version of Tailwind CSS IntelliSense are you using?

v0.7.3-1

What version of Tailwind CSS are you using?

v3.0.1

What package manager are you using?

yarn

What operating system are you using?

Linux

Describe your issue

When inside a template string ` (I use these to allow for multiline class definitions) I cannot use auto-complete. It works flawlessly in normal strings (" & ')

[ModProg]

On an other note, supporting string concatenation would also be helpful e.g. for conditional styles:

let classes = "smth"
if true {
    classes += "hi"
}

(Adding this here since I feel like it is a very similar issue (Extending places where intellisense is triggered)

[ModProg]

I tried this in vscode with v0.7.5 and have the same issue.

[bradlc]

Hey @ModProg. What is the exact situation where you expect completions but are not getting them? A code example would be great!

[ModProg]

The two examples:

let className = `text-red-...`;
// and
className += "bg-blue-...";

I have actually two PRs ready fixing this:
#467 #466

[bradlc]

Hey @ModProg. By default the extension only triggers class completions for HTML/JSX attributes (i.e. class="", className={}, :class="''" etc.). This is a deliberate design decision, and an escape hatch is provided via the tailwindCSS.experimental.classRegex setting. This allows you to enable completions in custom places. Check out my comment over at tailwindlabs/tailwindcss#7553 for more information. I appreciate you taking the time to put together those PRs, but I'm going to close them on this occasion, sorry! 🙏

[ModProg]

I understand that reasoning, but this wont really add unexpected completions IMO (as they are already there without the + or using "/'), so maybe this can be looked at in the future through a setting toggeling on "non HTML" completions so to say.

I added the regex so anyone having this issue can use the escape hatch in the current implementation.

[lukejagodzinski]

What do you think about supporting template literals/strings? This trick is being used with many other extensions, i.e.:

const query = sql`SELECT * FROM users;`; // Syntax highlighting

const query = gql`
query Query {
  users {
    id
    name
    email
  }
}`; // Syntax highlighting

And with TailwindCSS it could be:

const className = tw`p-2 w-full border rounded`;
// or
const className = twc`p-2 w-full border rounded`;