Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Neovim: Update tree-sitter support for CSS #289

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

tientrinh21
Copy link

Hello!
I found that dracula/vim worked well with HTML & JS via tree-sitter but not CSS. So I took some time to add some highlights for it; I tried to make it look like Vscode as much as possible.

What I linked:

  • Make ,, ., ;, etc. become pink: TSPunctDelimiter -> DraculaPink
  • Make selectors become pink: TSType -> DraculaPink
  • Make classes, properties become cyan: TSProperty -> DraculaCyan
  • Make URLs become orange: TSError -> DraculaOrange (I was inspired by how shaunsingh/nord.nvim did it)

Before:

image

After:

image

Comment on lines +101 to +104
hi! link TSPunctDelimiter DraculaPink
hi! link TSType DraculaPink
hi! link TSProperty DraculaCyan
hi! link TSError DraculaOrange
Copy link
Member

@dsifford dsifford Aug 11, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure this is going to be the proper way to go about this. TSType, for example, is the token used for all types, in every language. That for the most part should be DraculaCyan..

The way we need to go about this is be specific to these changes just for css languages. There's a way to target those languages specifically, but you'll have to look into the docs for the tree sitter plugin to find that out because I can't recall off the top of my head how to do that.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seconded

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yea, you might make some queries for that.

For example, create queries/css/highlights.scm in the plugin's directory like this:

; inherits: css

[
 "#"
 ","
 "."
 ":"
 "::"
 ";"
 ] @keyword

(class_name) @type
(property_name) @type
(nesting_selector) @keyword

This will partially do the thing you did w/out linking any highlight groups 👽
image

p.s. you might find helpful :TSPlaygroundToggle, :TSNodeUnderCursor and TSHighlightCapturesUnderCursor commands of the nvim-treesitter/playground addon on your way.

@halshar
Copy link

halshar commented Aug 4, 2023

someone working on this as there is stilll no css highlighting in neovim?

@benknoble
Copy link
Member

Neither Derek nor I is working on it, I believe. We requested some changes which have not been implemented.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

5 participants