(css) Escaped special character in selector class name breaks highlighting

[sentience]

Describe the issue

CSS class and ID selectors contain arbitrary strings (e.g. .myclassname), which can contain escaped special characters (e.g. .foo\:myclassname to match class="foo:myclassname"). Currently, the backslash that escapes a special character is not recognised by highlight.js as a valid part of the class name or ID.

Which language seems to have the issue?

css

Are you using highlight or highlightAuto?

highlight

Sample Code to Reproduce

.dark\:hover\:bg-sky-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(14 165 233 / var(--tw-bg-opacity));
}

Current highlighting:

Expected behavior

The escaped special characters (\:) should not interfere with the highlighting of the class name, but actual pseudoclasses (:hover) should still be highlighted.

GitHub:

VS Code:

Additional context

TailwindCSS makes extensive use of escaped characters in CSS selectors for its modifiers.

Other special characters are escaped for features like color opacity:

.dark\:hover\:bg-sky-500\/25:hover {
  background-color: rgb(14 165 233 / 0.25);
}

…and arbitrary values:

.dark\:hover\:bg-\[\#ff0000\]\/25:hover {
  background-color: rgb(255 0 0 / 0.25);
}

[joshgoebel]

Probably need to push a proper CLASS_NAME_RE down into css-shared.js where it can then be shared with all the css-like grammars.

Anyone wanting to pick this up will need to take a look at tools/css. (helps with CSS testing). We require that all our css-like grammars remain consistent, so a patch here would need to fix all 4 grammars, not just CSS.

A PR would be welcome.