(CSS) :before/:after are not highlighted correctly

[LunarTwilight]

Describe the issue: :before/:after are not highlighted correctly.

Which language seems to have the issue?: CSS

Are you using highlight or highlightAuto?: highlightAll

...

Sample Code to Reproduce:

.test:before,
.test:after {
  color: pink;
  border-color: red;
}

https://jsfiddle.net/1tfr2cow/

Expected behavior: :before/:after are highlighted like ::before/::after

Additional context: https://developer.mozilla.org/en-US/docs/Web/CSS/::before

[joshgoebel]

Note: Any PR here would also need to update css_consistency and ensure consistent behavior across all 4 of our CSS superset grammars. See tools/css.

I suppose if need be we could add another rule that matches all pseudo elements as if they were pseudo-classes... that doesn't excite me (CSS2 is older than other things that we've removed from other languages as they have evolved over the years - so I think an argument could be made this simply isn't that important). Is CSS exceptional somehow? I have a feeling CSS2 will still be around in 20 years just because of the nature of the web - but will still highlighting it properly be important then? If we find some weird thing from CSS1 or CSS0.9 that browsers still support, should we add it?

That said, I wouldn't block this addition (I'm assuming it would be simple) but the distinction between pseudo classes and elements should remain (as they are different things) and if CSS2 specific support is added it should be additive, not blurring (or in any way making worse) our current quite proper support of CSS3.

---

One other idea here (if we don't fix CSS2 explicitly) is to consider just resolving the breakage... an attribute following an unknown psuedo-selector shouldn't break our highlighting - whether or not we support CSS2. That change might be as simple as adding { to the CSS : rule's stop regex.

[zsoltlengyelit]

@joshgoebel you can assign the issue to me now. See PR: #3358