search

gandm / language-babel

ES2017, flow, React JSX and GraphQL grammar and transpilation for ATOM
https://atom.io/packages/language-babel
MIT License
476 stars 83 forks source link

No syntax highlighting inside styled-components media template #419

Closed ghengeveld closed 7 years ago

ghengeveld commented 7 years ago

schermafbeelding 2017-09-25 om 17 03 17 Syntax highlighting inside the phoneOnly block is missing.

media.phoneOnly is defined as follows:

import { css } from "styled-components";

export const media = {
  phoneOnly: (...args) => css`
    @media (max-width: 767px) {
      ${css(...args)};
    }
  `,
  // ...
}

Here's the docs on media templates: https://www.styled-components.com/docs/advanced#media-templates

gandm commented 7 years ago

It's not a styled-component API just best practice. See workaround here https://github.com/gandm/language-babel/issues/380#issuecomment-307794998 and modify for your use case.

ghengeveld commented 7 years ago

Great. I added "media\.\w+":source.css.styled to the grammar extensions. I did have to rm -r ~/.atom/compile-cache/ and restart Atom.

Thanks a lot for your help, you are awesome ❤️