No JSX support - Githubissues

cocopon / iceberg.vim

:antarctica: Bluish color scheme for Vim and Neovim

https://cocopon.github.io/iceberg.vim/

MIT License

2.22k stars 132 forks source link

No JSX support #99

Open patchworkCode opened 2 years ago

patchworkCode commented 2 years ago

Environment:

OS
Vim (:version)
Terminal

If you have a trouble with coloration and are using Vim/Neovim with terminal:

[x] Does your Vim support full colors? (:set termguicolors)
[x] Does your terminal support full colors? (e.g. Terminal.app doesn't support it)

Other colorschemes I have tried support JSX, but it seems iceberg doesn't..

fragov commented 2 years ago

I have same issue.

fragov commented 2 years ago

Theme on image is not iceberg, but here we can see how TS defines JSX tags.

TSConstructor and TSVariable both set to icebergNormalFg, so all tags in JSX are white. When I comment those two lines in iceberg.vim, JSX tags get green color:

hi! link TSConstructor icebergNormalFg
hi! link TSVariable icebergNormalFg

Properties in JSX tags (TSProperty) are set to TSField, TSField again to icebergNormalFg, which again makes them all white:

hi! link TSField icebergNormalFg
hi! link TSProperty TSField

fragov commented 2 years ago

@cocopon will you have time to bring TreeSitter highlighting to working condition?

cocopon commented 2 years ago

Okay, I'm looking into the issue... First, what is the file type of the buffer? It seems that the file extension of the file is js, not jsx.

I have tried a small code with the name foobar.jsx (:echo &ft returns javascript.jsx) and it seems to work fine:

:TSHighlightCapturesUnderCursor:

fragov commented 2 years ago

You are using just HTML tags, which are parsed better: Capto_Capture 2022-04-24_02-48-06_PM

JSX tags have additional highlights groups (I tried both tsx and jsx files): Capto_Capture 2022-04-24_02-49-21_PM

BTW: on this and also on your's screenshot you may see another problem. I believe NormalFloat highlights is set wrong, so we have that black box around the floating window. If you select this box (I just select it with my mouse), you will see borders.

When you compare how typescript code is looking on screenshots from colorswat.ch, you also see some differences. On those old screenshots, I see that functions have orange and some other parts also have different colors. But with Treesitter there is really a lot of white color. :)

cocopon commented 2 years ago

You are using just HTML tags, which are parsed better:

The original issue by @patchworkCode contains HTML tags. Your issue seems a bit different.

hi! link TSConstructor icebergNormalFg
hi! link TSVariable icebergNormalFg

These links are intentional. One of the concept of Iceberg is: don't get fancy, focusing few important things. I think that the white color is good for user-defined tags because this is a kind of variable.

Anyway it's good to add highlighting for tag attributes, so added it in 5ac9da61e8626d1218498a35e515f36387efe454:

patchworkCode commented 2 years ago

I'm not sure whether things have been updated as I use another theme now, however my image is an example of JavaScript react which when I was iceberg before would be rendered as plaintext.

fragov commented 2 years ago

@patchworkCode have you Treesitter installed and tsserver for it?

ecklf commented 2 years ago

These links are intentional. One of the concept of Iceberg is: don't get fancy, focusing few important things. I think that the white color is good for user-defined tags because this is a kind of variable.

I am slightly bothered about the difference I experience between editors. Not trying to change your conscious decision here, I'd just love to see consistency 👍.

Here are some screenshots when using the filetype typescriptreact:

VSCode:

Neovim (treesitter + tsserver) - Highlight enabled:

Neovim (treesitter + tsserver) - Highlight disabled: