Very weird highlighting

[AriTheElk]

Sorry the title feels a little vague, wasn't sure the best way to describe what is happening here.

Not sure if it could be a conflict, but here's my js related plugins:

Plug 'mxw/vim-jsx'                    
Plug 'pangloss/vim-javascript'        
Plug 'fleischie/vim-styled-components'

[AriTheElk]

After doing some research, it looks like I found this issue a while ago 😂 https://github.com/styled-components/styled-components/issues/257#issuecomment-264712774

Is this something you're planning on fixing, or is this not really being maintained anymore?

[fleischie]

Sorry for the late reply.

There are two things I wanted to mention:

1. The property definition (the part before the :).
2. The attribute definition (the part after the :).

The first part is probably not in scope of this project, as I do not intend to support CSS3 rules by myself and I'm not comfortable with brute-force saying everything before a : is a prop. The latter may hide typos and stuff.

The second part is actually a long standing issue of mine, which I am not able to aggregate enough time to fully fix. :smile: With enough patience and some miracle on my focus-side, I will be able to do it. Until now, I'm sorry, that you have to look at this. 🙇

[AriTheElk]

Maybe I'm missing something, but is it really that large of a task to support css3 rules? I've written a few syntax packages myself, so in my mind they're usually laid out in an xml file of regex rules, which is fairly easy to maintain (I'm not sure the structure of vim syntax packages, I'd have to dive into the source).

If you need some help, I'd love to dig into this and try to improve the package. Vim is my primary editor, so it's fairly important to me, I just can't contribute to it during the work week unfortunately.

[AriTheElk]

Also great work on the package so far, I hope I'm not coming across as rude or ungrateful. The work you've done so far is great, even if it's not colored right, it's better than having massive single color css blocks.

[fleischie]

No problem. Feedback is always welcome and appreciated. 😄

There are two parts to the answer (again 😋):

1. vim is using a different system of defining styles. You can check the help page in vim :help syntax or for example here: https://github.com/lepture/vim-css/blob/master/syntax/css.vim
2. I don't like this plugin to come with css3 rules. There may be other plugins, that are better suited and/or specialized like hail2u/vim-css3-syntax or others.

I'd be glad to provide more information/insights if you like. 😃

[dylanpyle]

I don't know anything about how vim highlighting definitions work, but here's what I see before and after installing this:

Even if there's something in the CSS rules that this plugin isn't able to parse, would it be possible to stop that 'leaking' past the end of the template block? I'd be fine with occasional weird highlighting inside the template itself, but the fact that it breaks the rest of the document is unfortunately a dealbreaker.

[fleischie]

Hey @dylanpyle

Can you provide some more information of what the situation is, that you are trying to communicate with your images? What vim plugins do you have installed? What is the whole source code?

Also what it is a dealbreaker of?

[nwaywood]

I am also getting some pretty weird highlighting

• The coloring on the class names (for example line 54 shows three different colors on one class name
• The random colored s on line 83 and 90

My related plugins are:

• pangloss/vim-javascript
• mxm/vim-jsx
• ternjs/tern_for_vim
• styled-components/vim-styled-components
• hail2u/vim-css3-syntax

Please let me know if you need any more information

[fleischie]

Sorry for the late reply, I was ill.

If you are still interested in this, I have discussed in a comment on issue #21 a complete re-write of the plugin to be more robust against certain issues discussed here (units highlighted in arbitrary text, classnames not highlighted at all, hyphens break the highlighting, etc.).

[fleischie]

@nwaywood @dylanpyle @garetmckinley please see, whether #30 fixes these issues for you.

Please note however, that indenting is not yet updated to match the newly implemented highlighting behavior. Let me know, if you find any issues.

[nwaywood]

@fleischie just tried it out and the syntax highlighting is MUCH better thank you! The only minor issue I still notice is that the highlighting of -'s is not consistent.

For example, you can see on lines 69-70 the - is white, then on line 71-72 the - is orange.

[fleischie]

@nwaywood I'm glad you like it. 🙇

Unfortunately I cannot do very much about this particular issue, as it is an issue that lies between how vim handles highlight-matching and how the default CSS styles are defined.

Basically there is a `keyword` (directly defined word) and a `match` (regexp). The former has precedence over the latter. `left` is defined as a keyword and `padding-left` is defined as a match. (`size` is not defined as a keyword with `font-size` as a match and thus it is differently highlighted.) If you write a plain CSS file with vim, you will find, that this is the same there.

Writing this detailed description, I thought about highlighting - characters, when between two css properties (and before a css attribute region). I will let you know, whether this is feasibly implementable. :wink:

[dylanpyle]

@fleischie Yep, so much better on that branch. Thank you!

[dylanpyle]

Been using this for a few hours now - everything's great except this issue I just ran into:

— after that the rest of the file is unhighlighted.

[fleischie]

Bump: This will be fixed when I merge #30. Raise your voice now or be silent forever (resp. later, when merged)!