JS embedding, CSS highlight

[scripthunter7]

JS embedding

This approach is based on HTML's logic (where JS is also embedded).

Show screenshot


JS embedding is also possible in Linguist: https://github.com/github/linguist/discussions/6020#discussioncomment-3397226

CSS highlight (in progress)

My own CSS highlight that also supports AdGuard's ExtendedCss. It would be complicated to embed CSS here, so it was written completely from scratch.

Show screenshot


Live CSS highlight demo

TODO:

• [x] Handle CSS inject rules (#$#, #@$#, #$?#, #@$?#)
  • [x] Support media queries (example)
  • [x] Handle CSS declarations (#$#selector { declarations })
• [x] Support ExtendedCSS remove
• [x] Support uBO's CSS inject syntax: ##selector:style(args)
• [ ] Fix regex detection (https://github.com/ameshkov/VscodeAdblockSyntax/issues/51)
• [ ] Support IDN domains (https://github.com/ameshkov/VscodeAdblockSyntax/issues/10)
  • https://github.com/uBlockOrigin/uAssets/pull/14695#issuecomment-1238058786
• [ ] Further testing

[scripthunter7]

@ameshkov

I think the first version is ready. During my tests, it highlighted 99%+ of the rules properly, but it may not work properly in some exotic cases.

I took some ideas from: https://github.com/Microsoft/vscode/blob/main/extensions/css/syntaxes/css.tmLanguage.json (eg keyword list, units, numeric literals)

Preview:

:warning: This preview tool is resource hungry, this is not a tmlanguage optimization problem.

• Test rules
• AdGuard Base List
  • :warning: Please keep in mind, this tool doesn't support JS embedding
• EasyList
• uBlock 2022 list
• uBlock 2021 list
• uBlock 2020 list

[scripthunter7]

I think this will come up in smaller pieces in the future.