Supply CSS3 rules - Githubissues

styled-components / vim-styled-components

Vim bundle for http://styled-components.com based javascript files.

300 stars 24 forks source link

Supply CSS3 rules #9

Closed fleischie closed 7 years ago

fleischie commented 7 years ago

It seems the css syntax filed bundled with vim does not support CSS3 definitions, see this test file in your styled-components powered vim.

There might be two options:

Depend on an already existing vim-plugin, that supplies these rules or
Manually define these rules inside this project.

I might have to contemplate a little about this. If you have any suggestions, opinions, etc. feel free to share them. :smiley:

ismay commented 7 years ago

I don't know how easy solution number 1 is compared to the other, but if 1 is feasible I'd choose that route. Less maintenance and duplication of work that way. Also, this issue is probably why I'm having this syntax highlighting bug:

Btw, styled-components aren't 100% css3, as there's some scss-like syntax as well (the &, interpolation, nesting, etc.). Maybe an scss syntax highlighter would be more appropriate? stylelint-processor-styled-components does something similar.

fleischie commented 7 years ago

@ismay I don't know stylelint to be perfectly honest, but it seems it does construct an AST of the given file and check it against a given number of arguments/config-items/etc. As this project is merely a vim-plugin I don't have access to higher-order functionality. Or did I misunderstand you in this regard?

I checked for the css3 vim-plugin but it seems the ones I found didn't populate the syntax-pool to use in the styled-components one. Or I just didn't understand, why it didn't work, yet.

So my verdict in this particular case: I cannot find a way to enhance the standard CSS rules from vim with plugged in CSS rules (extending the official ones) and also using them in the jsTemplateString region. Although: I appreciate some more input on this matter, so if you (dear reader) have helpful insight in this matter, I am more than glad for your suggestions. :slightly_smiling_face:

ismay commented 7 years ago

Or did I misunderstand you in this regard?

Probably not, I'm not at all experienced with creating vim plugins, so I have no idea what the best course of action would be here.

fleischie commented 7 years ago

After fiddling around with vim-css3-syntax I found some quirks I couldn't resolve just yet.

runtime! syntax/css/*.vim loads all syntax files into the current buffer, but I think this and syntax include syntax/css.vim collide in some way or another, because depending on order of execution some definitions get loaded and some don't.
for whatever reason padding and color don't get highlighted correctly as props, but as attrs.

I think I need some more time, fiddling around with both the included and the external css definitions.