Javascript Syntax Highlighting Tags

Working on porting a theme to CodeMirror 6 (left) from CodeMirror 5 (right).

It’s mostly translated well, but there’s a few pain points in JavaScript that I haven’t found out the right way to target. Using my debug theme, I can quickly inspect how some of the items are being tagged, but I know there’s some that overlap.

The main items I’m struggling to target:

1. The braces around variables in template literals:
Screen Shot 2022-07-20 at 3 17 35 PM

2. The => in function definitions
Shows as tags.punctuation but we don’t want to style all punctuation as green. The => seems like more of an operator or definition, but neither of those work for targeting. tags.definition(tags.punctuation)
Screen Shot 2022-07-20 at 3 17 51 PM

3. The keyword super in class
Doesn’t appear to have any tag associated with it at all.
Screen Shot 2022-07-20 at 3 18 08 PM

Am I missing anything with how to target these? Are there certain pieces missing in the JS Language data?

Braces in templates are tagged as special(brace), which I guess you could target.

@lezer/javascript 1.0.2 tags arrows as function(punctuation), allowing you to distinguish them from other punctuation.

It also fixes a bug that prevented super from being tagged. It is now an atom (which is a subtag of keyword).

Thanks, @marijn. The braces in templates note worked.

Any specific way to get the latest GitHub - lezer-parser/javascript: A JavaScript lezer grammar when using GitHub - codemirror/lang-javascript: JavaScript language support for the CodeMirror code editor / GitHub - codemirror/language-data: Language metadata and dynamic loading for the CodeMirror code editor ?

Note: I was able to update the @lezer/javascript dependency by putting "resolutions": {"@lezer/javascript": "1.0.2"} in our top-level package.json. However even with that fix, neither @shshaw nor I was able to get the function(punction) specifier to work.

Nor did super appear to be recognized as tags.atom or tags.keyword.