styled-components / vim-styled-components

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

css not highlighted inside of function, or when cast to a variable. #56

Open cj opened 5 years ago

cj commented 5 years ago

It appears to not be highlighting inside of functions i.e.:

image 2019-02-07 at 3 50 43 am

Or when cast to a variable:

image 2019-02-07 at 3 54 09 am

This is it working when it's not inside or function or being cast to a variable:

image 2019-02-07 at 3 55 09 am

cj commented 5 years ago

Incase anyone else has run into this, my current hack is:

  syn region styledDefinition start=/css`/ skip=+\\`+ end=+`+ containedin=ALL contained transparent fold extend
      \ contains=@CSSTop,
      \          css.*Prop,cssValue.*,cssColor,cssUrl,cssImportant,cssError,
      \          cssStringQ,cssStringQQ,cssFunction,cssUnicodeEscape,cssVendor,
      \          cssHacks,
      \          cssCustom.*,
      \          jsComment,jsTemplateExpression,
      \          typescriptInterpolation,typescriptTemplateSubstitution,
      \          styledAmpersand,styledNestedRegion
fleischie commented 5 years ago

Hello @cj

please make sure to provide a minimal vimrc that allows me to reproduce the above mentioned highlighting. Otherwise I don't know how to help you.

cj commented 5 years ago

@fleischie Sorry about that, here you go https://gist.github.com/cj/95337089bbc241407e7ae94e725e3ff0

image 2019-02-11 at 3 15 35 pm

If you need anything else let me know!

fleischie commented 5 years ago

@cj I think I found the issue, either I never bothered to add support or it may have changed but the issue you were referring to was specifically a HerringtonDarkholme/yats.vim related issue.

This plugin registers tagged templates with a different name than the plugins that I used, so it was just a matter of time until it didn't work properly for someone's setup.

Anyway, I pushed a commit, that should allow highlighting of the mentioned css tagged template for you to test out. :+1:

And if you're at it, I would really appreciate you going through the other example files in the ./examples folder and see, whether something else is missing/broken. So maybe I need to add more support to more custom syntax names. Thanks in advance. 🙏

cj commented 5 years ago

@fleischie thank you! I really appreciate it!

Here are some broken things I found going through the examples:

examples/issue-30-1.js: df31f9acf8dd4540e5280afbee5a6224 _image 2019-02-13 at 9 53 02 pm

examples/issue-30-2: image 2019-02-13 at 9 55 05 pm

examples/issue-32: image 2019-02-13 at 9 56 34 pm

There was also one issue I found that was not included in your examples: image 2019-02-13 at 9 58 50 pm

cj commented 5 years ago

examples/issue-44: image 2019-02-13 at 10 08 42 pm

cj commented 5 years ago

One other thing I noticed is the indenting is off:

screen recording 2019-02-14 at 05 36 pm

fleischie commented 5 years ago

@cj I really do appreciate you taking the time to investiage all of this. If I find the time I will address these.

fleischie commented 5 years ago

Hey @cj

I am kind of embarrassed to admit that I forgot to investigate this because I never took the time...

Using the vimrc you provided and looking at the files you mentioned, I wasn't really able to reproduce the shown misconfigurations. (Some are necessary, though, for example -top, -right, etc. is not easy to highlight correctly because of how regexp works in vim).

Let me know, if you still have the above mentioned issues and maybe my setup guards me from the seen behaviors/highlights....

roginfarrer commented 4 years ago

Just wanted to throw in that I'm having this issue, too.

With a function:

Screen Shot 2020-01-24 at 12 50 37 PM

Without a function (which works):

Screen Shot 2020-01-24 at 12 50 46 PM

mjc-gh commented 4 years ago

I am also seeing this with Typescript. For example in foo.tsx:

image

I am using vim-polygot via janus.