Incorrect linting on canonical classes using square brackets to target data attributes

[juanpablob]

Thanks for maintaining this plugin, appreciated! 💜

My bug reports is related to: #1476

What version of VS Code are you using?
1.99.3

What version of Tailwind CSS IntelliSense are you using?
0.14.28

What version of Tailwind CSS are you using?
4.1.11

What package manager are you using?
pnpm

What operating system are you using?
MacOS

---

Describe your issue

The plugin is wrongly linting classes with brackets targeting data attributes. For instance, if I write this:

<div className={cn(`'has-[[data-layout-y="fixed"]]:h-svh',`)} />

it complains saying:

The class has-[[data-layout-y="fixed"]]:h-svh can be written as has-data-[layout-y="fixed"]:h-svh(suggestCanonicalClasses)

which is not correct, it won't work with single brackets.

[thecrypticace]

In what way are the classes not equivalent?

The first generates this CSS:

.has-\[\[data-layout-y\=\'fixed\'\]\]\:h-svh {
  &:has(*:is([data-layout-y='fixed'])) {
    height: 100svh;
  }
}

The second generates this CSS:

.has-data-\[layout-y\=\'fixed\'\]\:h-svh {
  &:has(*[data-layout-y='fixed']) {
    height: 100svh;
  }
}

The difference here is just a wrapping :is(…) which doesn't change what elements match.

For example: https://play.tailwindcss.com/oHKGmuqLHd

Aside: You reported your Tailwind CSS version as 4.1.11 but that version did not support these warnings. They were introduced with v4.1.15.

[thecrypticace]

I'm gonna close this as the suggestion is correct. If you can provide more details I'll take a second look.