Arbitrary variant with value is incorrectly reported as valid syntax by LSP

[alexaka1]

What version of VS Code are you using?

1.106.3

What version of Tailwind CSS IntelliSense are you using?

0.14.29

What version of Tailwind CSS are you using?

4.1.17

What package manager are you using?

bun

What operating system are you using?

macOS, Windows

Tailwind CSS Stylesheet (v4) or config file (v3)

@import "tailwindcss";

VS Code settings

{
"tailwindCSS.classAttributes": [
    "class",
    "className",
    "ngClass",
    "class:list",
    "AdditionalClasses",
    "AdditionalCssClasses"
  ],
  "tailwindCSS.experimental.classRegex": [
    ["@\\(([^)]*)\\)", "[\"'`]([^\"'`]+).*?[\"'`]"]
  ],
  "tailwindCSS.experimental.configFile": null
}

Reproduction URL

https://github.com/alexaka1/repro-tailwind-lsp-1506

Describe your issue

The LSP (eg. when hovering with cursor) says that data-hovered=true:text-red-500 will become

.data-hovered\=true\:text-red-500 {
    &[data-hovered="true"] {
        color: var(--color-red-500) /* oklch(63.7% 0.237 25.331) = #fb2c36 */;
    }
}

However this is not true, and is invalid tailwind. The correct syntax is data-[hovered=true]:text-red-500, which the LSP says:

.data-\[hovered\=true\]\:text-red-500 {
    &[data-hovered="true"] {
        color: var(--color-red-500) /* oklch(63.7% 0.237 25.331) = #fb2c36 */;
    }
}

See the reproduction link's App.tsx file. The counter button has red background, but the paragraph below does not.

[thecrypticace]

Soo… apparently this is valid according to the parser in Tailwind CSS itself. It's absolutely not supposed to be — need to fix this in core. 😬

It shouldn't get picked up by our source file scanning though so I don't think there's any potential for real-world projects accidentally using this.

[alexaka1]

Yeah, this gets ignored. I should have clarified. But this got me confused a lot, because I believed the LSP and have told people that this is valid syntax. Today I wanted to use it, only to see it gets ignored.

[alexaka1]

Although to be fair, this syntax should be valid. I'd be happy to use it 😅. Maybe in v5...

[thecrypticace]

This will be fixed in the next release of Tailwind CSS.

Although to be fair, this syntax should be valid. I'd be happy to use it 😅.

Heh yeah, I can see the appeal. We're intentionally strict with our syntax though. It makes a lot of things simpler for us. Since we have to scan arbitrary source files we have to be able to look at something and go "yeah this is likely a utility class". Adding more syntax can make those things harder (or at the very least slower to look for properly) so we have to strike a balance.

Aside: the fact that this even produced valid code internally is a bit of a quirk of the current implementation.