Problem with media queries - Githubissues

styled-components / webstorm-styled-components

styled-components highlighting support in IntelliJ editors

https://plugins.jetbrains.com/plugin/9997-styled-components

MIT License

375 stars 19 forks source link

Problem with media queries #103

Open jewe11er opened 2 years ago

jewe11er commented 2 years ago

IDE name and version: Webstorm 2021.3.1
Styled-components plugin version: 213.6461.79

Problem description:

Problem with media queries: @media ${({ theme }) => theme.devices.tablet} { margin-top: 0; }

Webstorm shows warning: Property 'margin-top' is allowed only in following media groups: visual

fyayc-ddo commented 2 years ago

IDE name and version: IntelliJ IDEA 2022.2 (Ultimate Edition)
Styled-components plugin version: 222.3345.108

This works:

styled.div`
  @media (max-width: 1440px) {
    color: green;
  }
`;

whereas

const maxWidth = "(max-width: 1440px)";
styled.div`
  @media ${maxWidth} {
    color: green;
  }
`;

gives

Property 'color' is allowed only in following media groups: visual

This is probably connected to https://github.com/styled-components/webstorm-styled-components#faq

Why am I seeing syntax errors after a template argument?