search

styled-components / vim-styled-components

Vim bundle for http://styled-components.com based javascript files.
300 stars 24 forks source link

Breaking syntax highlighting with vim-javascript #64

Closed mcmillion closed 5 years ago

mcmillion commented 5 years ago

Not sure when this started happening (I've been using this plugin alongside vim-javascript for a while), but in a recent update, this plugin starts to break vanilla JS highlighting when scrolling:

Screen Shot 2019-06-18 at 10 05 20 PM

Note that this is in a .js file with just javascript as the filetype. This is with only vim-javascript and vim-styled-components enabled. Doesn't matter if I enable vim-jsx-pretty or not.

fleischie commented 5 years ago

Hello. Thanks for reporting.

I suspect you are viewing a rather long file. Vim has a limit to how many lines it can "remember" to initialize a syntax block and keep highlighting. If it exceeds this limit it usually just drops the highlighting. (I sometimes get this is git commit patches).

There is another open issue that makes me re-evaluate the current setup (especially regarding typescript). Maybe if I find the time I can split the definitions of typescript and javascript, which would significantly reduce the effort to highlight javascript files, and maybe thus fixes this particular misbehavior.

Can you possibly share some more insights into the file you are watching? Is that a large JSON object? How many lines does the file have? Is there anything specific to the data that might cause a syntax issue (e.g. jsx or base64 in data, etc.). As much as you are able/comfortable to disclose, of course, would help.

🙇

mcmillion commented 5 years ago

So the file is decently long (270ish lines), so that could be part of it, but it does render fine with the styled-components plugin turned off. It's just a vanilla JS file that exports an object. What's weird is I don't remember seeing this issue on any files in my project until a week or so ago. I'm starting to wonder if this is because of a recent neovim update.

mcmillion commented 5 years ago
Screen Shot 2019-06-19 at 8 07 55 AM Screen Shot 2019-06-19 at 8 10 24 AM

Here's another shot of it in another colorscheme. What's weird is that it's only affecting some of the syntax highlighting (e.g. the string values in that screenshot are correct, but the keys are not)

It's also triggering the bracket matching to think that it's not closed, which feels like a hint, but I don't know near enough about how vim/neovim syntax highlighting works to know why.

mcmillion commented 5 years ago
Screen Shot 2019-06-19 at 8 12 43 AM

Just saw this in another file (it's only 100 lines). The syntax highlighting doesn't shift colors when scrolling like the other one does, but the same highlighting weirdness is there on the closing braces.

lynndylanhurley commented 5 years ago

I'm seeing this as well.

Highlighting breaks following backticks (`), but works intermittently as I scroll through the files.

I don't see the issue when I disable the styled-components plugin.

fr3fou commented 5 years ago

I really need to find a solution to this. vim-styled-components is the only thing left from me finishing my nvim config :/

fleischie commented 5 years ago

@mcmillion @lynndylanhurley @fr3fou Can you do me a favor and type :syntax sync fromstart and see if that changes anything?

What I suspect is happening is that the syntax elements are more than the syncing needs to correctly highlight complex/long files. Setting the syncing to fromstart means it's caching all the lines in the file, which makes the syntax highlighting take longer but should be more correct.

Syntax synchronizing is the mechanism vim uses to know how to redraw the state of the currently shown contents, see `:help syn-sync` for more information.
pbondoer commented 5 years ago

@fleischie I was experiencing the same issue, :syntax sync fromstart fixes the issue for me.

For other people, please note there may be performance implications. You can read more about it here: https://vim.fandom.com/wiki/Fix_syntax_highlighting

fr3fou commented 5 years ago

That worked! Thanks!!

lynndylanhurley commented 5 years ago

I added this to my .vimrc and it seems to have fixed the issue:

autocmd BufEnter * :syntax sync fromstart
fleischie commented 5 years ago

I personally would advise against putting :syn sync fromstart in a general location for a general type (because it can slow down vim).

Especially as this plugin is mostly for javascript/typescript files.

So, if anything use autocmd BufEnter *.{js,ts,jsx,tsx} :syntax sync fromstart (and maybe autocmd BufLeave *.{js,ts,jsx,tsx} :syntax sync clear (this should reset all syntax sync settings, but beware that this overwrites any additional settings that might have happened, ymmv).

fleischie commented 5 years ago

I will add a short description to the README.md outlining this issue and how to circumvent it.