No JSX support

[patchworkCode]

Environment:

• OS
• Vim (:version)
• Terminal

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

• Does your Vim support full colors? (:set termguicolors)
• 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]

I have same issue.

[fragov]

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]

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

[cocopon]

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]

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

JSX tags have additional highlights groups (I tried both tsx and jsx files):

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]

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 5ac9da6:

[patchworkCode]

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]

@patchworkCode have you Treesitter installed and tsserver for it?

[ecklf]

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: