search

michaelgmcd / vscode-language-babel

VSCode syntax highlighting for today's JavaScript
https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel
MIT License
131 stars 17 forks source link

nested template literals #3

Closed Marinolinderhof closed 7 years ago

Marinolinderhof commented 7 years ago

I followed the concep of tagged template literal to wrap styles in media queries: https://www.styled-components.com/docs/advanced#media-templates

if you look at the output you will notice the highlighting will be broken. Image of code

btw: the code compiles and works

michaelgmcd commented 7 years ago

Interesting. I believe this is an issue with the Atom package as well. The css syntax highlighting is pretty specific to the styled components api.

michaelgmcd commented 7 years ago

Are mediaq.gtSmall and mediaq.ltMedium custom functions? If so, there really isn't a way to know whether or not the nested template literal is or isn't css. If they aren't, would you mind pointing me to the docs for them?

Marinolinderhof commented 7 years ago

It's custom code but its from the docs. As shown here:

https://www.styled-components.com/docs/advanced#media-templates

But i do see your point. So is it correct to asume we have these limited options :

  1. Every template literal inside styled.* will be a styled template literal
  2. Define a prefix for nested template literals like in my example mediaq.cssGtSmall
  3. Check if nested template literals contain css.
  4. Do something like annotations //styled literal above the nested litteral.

What do you think? Cheers,

On 6 Jul 2017 5:07 am, "Michael McDermott" notifications@github.com wrote:

Are mediaq.gtSmall and mediaq.ltMedium custom functions? If so, there really isn't a way to know whether or not the nested template literal is or isn't css. If they aren't, would you mind pointing me to the docs for them?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/michaelgmcd/vscode-language-babel/issues/3#issuecomment-313283166, or mute the thread https://github.com/notifications/unsubscribe-auth/ADfQIhExmvt0m2GGrpi-1GuhiNdv3cZFks5sLE9UgaJpZM4OMCz2 .

gandm commented 7 years ago

I think you need to do something like

mediaq.gtSmall(css`background-color: red`);

as per https://github.com/styled-components/styled-components/issues/791#issuecomment-302994591

michaelgmcd commented 7 years ago

Closing this as @gandm's recommendation seems to be the way to go for syntax highlighting here.