[Enhancement] CSS elements, properties and URL values, and LESS @ rules

Motivation

It seems that Prismjs does not have CSS element. CSS elements are white, but in the Dracula theme, it is purple.

Description

In reference to dracula/prism#11, I followed the Dracula's specific documentation. Imitating and mimicking the CSS syntax highlighting in VSCode, there are two differences between Prism's HTML and VSCode's HTML syntax highlightings. See the alternatives with solutions:

Alternatives

CSS elements

Using Dracula theme, compare CSS elements, entirely highlighted as white by the class .language-css in Prismjs, but in VSCode, it is different:

Dracula:

Prismjs:

Observation: The px should remain pink.

CSS properties

The property screen and is dominated by the class .language-css .token.atrule, and has different colours in Dracula and Prismjs themes.

Dracula:

Prismjs:

@ rules

Not just @main-color, the class .language-css .token.rule also takes control of @media which must remain purple. Observe that @media belongs to the class .language-css .token.atrule.

Dracula

Prismjs

I tried this CSS:

.language-css .token.rule:not(.atrule)
{
  color: var(--foreground);
}

CSS URL values

In Dracula, the values without quotation marks remain orange, but with quotation mark, they are highlighted as yellow. In Prismjs, both the values without and with quotation marks are dominated by the class .language-css .token.url. Also observe that parentheses ( and ) should remain purple if the regular expression finds url.

Dracula

Prismjs

Start by locating Prism's CSS grammar and inspecting the .language-css token classes described here. Verify that CSS elements, properties, @ rules, and quoted or unquoted URL values receive the intended distinctions, with parentheses handled as described; done when the highlighting matches the requested Dracula and VSCode behavior.