CSS syntax highlighter

[scripthunter7]

A lot of adblock filter rules use CSS, so we should consider implementing a good CSS highlighter according to our goals (this doesn't necessarily mean full CSS support, e.g. we don't have to support comments).

The benefits of this are:

• Make CSS-based cosmetic rules much more transparent
  • it improves maintainability
  • it makes the rules clearer for those who don't have much experience in writing rules
• Many incorrect selectors can be marked as invalid even at the highlighter level

Because of "Extended CSS syntax", we should definitely think about creating our own highlighter, rather than integrating an existing CSS highlighter. In addition, this will ensure consistent results, since VSCode doesn't use the same CSS scope as GitHub.

I started implementing this earlier (last year), here is a demo of what it would look like:

In the case of CSS injection rules, at-rules and declaration block should also be handled, but the development can be done step-by-step, so e.g. in the first round, we only implement the CSS selectors for element hiding rules.

Reference:

• https://www.w3.org/TR/selectors-3/
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
• https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule
• https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/CSS_Declaration_Block
• https://github.com/AdguardTeam/ExtendedCss
• https://github.com/gorhill/uBlock/wiki/Procedural-cosmetic-filters

[DandelionSprout]

While I'm all in favour of colourful stuff (which was the main reason I got involved in GitHub Linguist stuff in the first place), I suspect the colours in the screenshot may be a bit overkill. 😅 I'd at least have avoided the green colouring.

[scripthunter7]

This is just a test version, but it follows the default CSS color scheme almost completely

[ameshkov]

Generally, in VSCode it's up to choose you which colors will be used for highlighting.

The task of a highlighter is to define what "type" the token belongs to.

[scripthunter7]

I'll copy my answer from Slack here as well

Based on these regexps (TMLanguage file - which uses Oniguruma compatible regexps), the editor (VSCode / GitHub UI) tokenizes the code and, depending on the color scheme used by the editor, assigns different colors to each token. So, I don't assign a concrete color to certain parts of the code, but specify a token name, and the editor does the coloring. The coloring looks different with the default VSCode theme, or with the VSCode GitHub theme. You can try this tool:
https://novalightshow.netlify.app/
Specify the TMLanguage in the left panel, and the source code (filter list) in the right panel. This is the closest thing to GitHub Linguist, a kind of demo tool (if I remember correctly, GitHub is also planning a demo/preview tool, but they haven't started it yet)