Added missing CSS highlight Tree Sitter Scopes

[Nikita0x]

I saw that some highlighting was missing in my CSS files.
I added the missing scopes (or nodes? idk how to call them) but I don't know what proper color for them would be, so please, advice me regarding the changes to make.

For now, for demonstration purposes, I added them as keywords.

Before:

After:

Also, right now we have these queries

[
 "and"
 "not"
 "only"
 "or"
] @keyword.operator

Which incorrectly capture things inside ::part() selector, inside of which can be any label (used to access elements inside Shadow-DOM). But as I understood it requires some changes to the C parser, and I have never written C or Parser/lexer so I cannot fix it... I will just notify whoever can fix it

And one more question, is there any way to copy/dump the tree-sitter tree, similar to #12208? That would be great for analysis or bug fixes or learning.

[nik-rev]

use the same scopes as what Neovim is using for css.: https://github.com/nvim-treesitter/nvim-treesitter/blob/master/queries/css/highlights.scm

And one more question, is there any way to copy/dump the tree-sitter tree, similar to #12208? That would be great for analysis or bug fixes or learning.

Yeah, see #12207

[Nikita0x]

Yeah, see #12207

Thank you! Yup, that is exactly what I I needed

use the same scopes as what Neovim is using for css.: https://github.com/nvim-treesitter/nvim-treesitter/blob/master/queries/css/highlights.scm

Do you mean for everything or only for those three which I did not know where to put?
because for instance (keyword_query) is not used in that neovim example.
And I feel like that neovim example as a whole inferior to the current queries, they just miss some things...

For instance, placing (unit) as a string - I didn't like that in Neovim.

In VSCode for instance, not only units are customizable, but you can even customize them separately - px, vw, etc. So I think placing them under "string" is not good

I copied

[
  (nesting_selector)
  (universal_selector)
] @character.special

and for some reason nesting symbol & is not highlighted.

[nik-rev]

Yeah well I mean the neovim queries can certainly serve as inspiration but they are missing out on some things.

For the units, typically we are highlight constants with @constant. I would highlight the actual number part of the unit with @constant.

I'd say we should have a keyword.unit theme scope, which doesn't currently exist. It would be used for these units. It does make sense, right? Since stuff like px is a keyword, but not really the same thing as for or let. string doesn't make sense either. VSCode uses keyword.other.unit, so if Helix had keyword.unit in my opinion that would make sense

Especially when not only CSS has these but nushell too for example.

The and being incorrectly highlighted is an error in the tree sitter parser for CSS. Unless this is actually invalid syntax (Don't remember using something like this, so not sure.)

[nik-rev]

Oh and btw we have the same name :-)

[Nikita0x]

That is definitely a valid css syntax. I work with Vue.js and Ionic - and Ionic components heavily use this Shadow-DOM for CSS encapsulation. And you can only access the elements inside if they have a part tag, via which you can customize them.

I guess I will just wait for the maintainers to reply - but my point is - regarding syntax highlighting VSCode was wayyy more customizable comapred to neovim (strangely enough). So I'd like helix to be on par, or even better.
Because I do have a custom syntax for arithmetic operations - so that I can instantly see in the code where it happens. And if they were of the same color, that would be less clear to me (even though they are operators). I like how vscode differentiates between operator and arithmetic operator.

That is a bit off topic but
@nik-rev yeah, I noticed!
yet I don't know if you are from the same region as I am, or not (there are a lot of females in India with such a name, for instance). But still cool!

[nik-rev]

That is definitely a valid css syntax. I work with Vue.js and Ionic - and Ionic components heavily use this Shadow-DOM for CSS encapsulation. And you can only access the elements inside if they have a part tag, via which you can customize them.

I guess I will just wait for the maintainers to reply - but my point is - regarding syntax highlighting VSCode was wayyy more customizable comapred to neovim (strangely enough). So I'd like helix to be on par, or even better. Because I do have a custom syntax for arithmetic operations - so that I can instantly see in the code where it happens. And if they were of the same color, that would be less clear to me (even though they are operators). I like how vscode differentiates between operator and arithmetic operator.

That is a bit off topic but @nik-rev yeah, I noticed! yet I don't know if you are from the same region as I am, or not (there are a lot of females in India with such a name, for instance). But still cool!

TIL about that syntax

Would be nice if Helix had more specific selectors for everything, such as operator.arithmetic as you've mentioned. Especially when themes don't actually need to specify this operator, so it's not a requirement. It'll fallback to operator if not specified. Would be quite nifty

---

Nikita is a male name in eastern Europe, which is where I'm from!