Please, JSX support about vim-css-color

[ap]

And that is hereby done, so there you go. 😄

Share and enjoy.

[ap]

To my knowledge, Vim does not ship syntax highlighting for JSX. I assume you use a plugin for that? If yes, which? I found mxw/vim-jsx; is there another? And if you know: are there several popular plugins that I should all support?

(If not a plugin, how have you set this up? Is there an “official” documentation somewhere?)

[joeytwiddle]

For what it's worth, that's the one I use, and I never tried another. 600 stars can't be wrong!

[chapati23]

for now at least just aliasing filetype javascript.jsx to javascript would already be a huge step forward as that'd at least bring back normal color highlighting outside of jsx-definitions (it's very typical for a react-project to mix normal javascript and jsx)

[fakenickels]

Sorry about the delay to reply @ap.
And yes, I use vim-jsx from @mxw.

[ap]

No prob, sorry I’ve not gotten around to this yet. Will do soon.

[ap]

OK, so I finally got around to this. And it looks like you’ll have to help me out here fellas.

First off, what I did: I installed pangloss/vim-javascript and mxw/vim-jsx, and then I created a file example.jsx and pasted some JSX snippets I found on the web with inline styles in them into the file. And… it already works for me?

So I checked set ft? and found it says javascript, not jsx or something else, which evidently triggers the JS support I have longed added to css-color.

Does that ft value mean I didn’t install the JSX plugin right? Or was it changed in the time since this ticket was created? (Maybe something like @chapati23’s suggestion was done upstream?)

What I get is that color references within strings in a JSX file are highlighted as their color value. Looks fine to me. But I don’t (if it wasn’t obvious) use JSX myself, so I have no idea what else a JSX user might expect. Is there anything else the plugin should be doing?

In short… is there anything for me to do here?

[mxw]

JSX files should have javascript.jsx as the syntax. The vim runtime understands this to mean "both javascript and jsx" (this behavior isn't documented anywhere except via Google search).

If you're doing string equality comparisons against the value of the ft or filetype option, then you'll need to account for javascript.jsx specifically (and probably also jsx.javascript). If you're leveraging the vim runtime to include the appropriate files (e.g., with your after/syntax/javascript.vim), then things should Just Work.

If pangloss/vim-javascript + mxw/vim-jsx isn't giving you javascript.jsx filetypes in your *.jsx files, then either you have a very old version of the latter, or you have some other filedetect autocmds that are overriding mine.

[ap]

Oh hi there, @mxw.

If you're doing string equality comparisons against the value of the ft or filetype option

I don’t.

If pangloss/vim-javascript + mxw/vim-jsx isn't giving you javascript.jsx filetypes in your *.jsx files

It doesn’t. I cloned them just before writing that comment, so “old version” is not the explanation. Will have to investigate.

If you're leveraging the vim runtime to include the appropriate files (e.g., with your after/syntax/javascript.vim), then things should Just Work.

If I pipe my example JSX file into Vim from stdin so that Vim won’t know what it is, and then set ft=javascript.jsx in that buffer manually, then all of pangloss/vim-javascript + mxw/vim-jsx + ap/vim-css-color get loaded into the buffer, and colours are highlighted just the way they get highlighted in any JS code. So… am I done?

However, I don’t see any difference between set ft=javascript and set ft=javascript.jsx. Is there supposed to be? Or to ask differently, what is an example snippet where I should see a difference?

---

And in the same vein: is there any syntax in JSX that can contain colour references which the JS support alone doesn’t know to highlight? And if so, can someone here supply me a snippet of JSX which illustrates that syntax?

[mxw]

If the filetype is set to javascript and not at any point to javascript.jsx (or some other filetype sequence including jsx), I would be surprised if any vim-jsx scripts ran... all the files are named jsx.vim, which to my knowledge means they are executed only if the filetype sequence includes jsx. Maybe there's some alternate dot-extension vim runtime include logic I'm not aware of?

@ap—Is it possible you have other JS-related packages besides this one, pangloss/vim-javascript, and mxw/vim-jsx? Your package doesn't do anything complicated with filetype detection, so I don't see why the filetype would just be javascript for your *.jsx files otherwise.

Also, looking at your after/syntax/javascript.vim, it doesn't reference any pangloss/vim-javascript syntax elements (which are all called jsFooBar; yours are all javaScriptFooBar, which matches the default vim JS syntax file), so I'm guessing that (at least one) root issue here is that this package simply doesn't support coloration under pangloss/vim-javascript.

[ap]

OK, so I found problem #1: pangloss/vim-javascript was getting loaded, but it wasn’t actually running, since Vim’s default Javascript plugin was getting loaded first. That was caused by my handrolled plugin manager, which I fixed in ap-miscellanea/dotvim@665c5bd

But that didn’t fix the filetype detection! (Problem #2.) I still only get javascript in ft when I open example.jsx. I don’t know why yet.

I would be surprised if any vim-jsx scripts ran...

As explained – I did :set ft=javascript.jsx manually, just to see what would happen, so I could put off debugging the rest of my setup for later. And that did load vim-jsx just as you’d expect. But vim-jsx requires pangloss/vim-javascript, which was getting loaded but was not actually running because it was suppressed by the stock Vim Javascript plugin. So even though I could force Vim to load vim-jsx, the plugin couldn’t do anything useful. Now that I’ve fixed my plugin precedence problems, inline markup in JSX is actually getting highlighted by vim-jsx… when I load it forcibly. (For some reason Vim still insists that JSX files are just javascript, not javascript.jsx, as I said.)

So anyway! I’ve pushed 8d64e3d which adds support for pangloss/vim-javascript. And that adds support for (at least some) colouring inside JSX files as well.

Is there anything more for me to do here?

[mxw]

How's this look to the users?

Those vim-javascript syntax elements look about right to me. If you want to highlight JSX attributes, you could add a jsx.vim syntax file, and turn on highlighting for the appropriate XML syntax elements (from the default xml.vim syntax file).

[ap]

Huh, that’s a good point: I don’t have any XML support in css-color. If I did, it would get invoked on JSX files automatically. So I’ma fix that first. And at that point, JSX support is basically there, without any explicit support for JSX as such.

Except, JSX can contain inline CSS, including function-style colour references (rgb(), rgba(), hsl()), which neither the Javascript nor the XML colour support turns on. So I actually do need explicit support for JSX, just to turn on that bit.