Media templates are not highlighted

[dbow]

This is maybe another instance related to the caveats in the README but the pattern recommended for media queries in the docs doesn't get highlighted correctly by this plugin:

(the media template literals are not highlighted as CSS)

I guess it's not really highlighted correctly in the documentation either :P but it'd be aweesome if it was!

[fleischie]

Thank you for your patince so far...

I personally would not recommend this way of adding styles:

• it's unnecessarily complex for adding media queries,
• it's using unnamed constants and magic numbers
• it's definitely failing the grep-test
• it's difficult to understand as an "outsider".

This is also super difficult to implement, as I would need to dynamically store at least two different names to highlight simple css rules (size-attributes, and media-query-constructor).

I'd say this is a WONTFIX for me, as I don't really see the advantages of this behavior. Sorry, if this is not the answer you had hoped for.

Thanks for contributing an issue, though. ✌️

[dbow]

Thanks for taking a look! It sounds like your issues are with the pattern for media queries recommended by the styled components documentation? But the issue I'm highlighting is really with nested template strings I think. Like you could simplify it down to just:

const phones = (...args: Array<any>) => css`
  @media (max-width: 768px) {
    ${css(...args)};
  }
`;

const div = styled.div`
  width: 200px;

  ${phones`
    width: 100px;
  `};
`;

and see the underlying issue is the nested template string? or, that's my guess.

This pattern is also recommended in the tips and tricks section, FWIW

i'm sure i'm not thinking of something, but couldn't you just syntax highlight any nested template strings inside of a styled-components template string as CSS? i.e.

styled.div`
  /* CSS */

  ${anything`
    /* also CSS */
  `};
`;

[fleischie]

Hey again.

I was just ranting previously about the "magic"-ness about it. But I see, what you mean about the more general case.

I am still torn on the "make every tagged template expression" contain css. As this is was the very first approach of this plugin and it didn't really work well.

Tell you what: I'll keep this in mind and play some time again with this idea. Let's see, whether I can make it work... Should I re-open this or don't you mind it being closes?

[dbow]

Oooo that makes a lot of sense :) Yeah, I can totally imagine that approach would be full of corner cases... but are there lots of corner cases once you've identified a styled components block? Like, inside a styled-components block, if there is a nested tagged template literal, assume it's CSS?

It's not a super high priority - happy to leave open or closed, whatever is easiest for you!

[fleischie]

Hmm, 🤔.

I will think about this approach with an open issue. 😉

[fleischie]

@dbow Hello again.

I had time to think about (and tinker with) the media templates, but came to the conclusion, that it's not feasible to support highlighting for this:

• It is no official API to support,
• it would only be a hack (because there is no clean way to keep track of what's styled and what's not), and
• it would only inconsistently work (if at all).

I hope you understand. :v: