webstorm-styled-components icon indicating copy to clipboard operation
webstorm-styled-components copied to clipboard

Problem with media queries

Open jewe11er opened this issue 4 years ago • 1 comments

  • 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

jewe11er avatar Jan 21 '22 09:01 jewe11er

  • 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?

fyayc-ddo avatar Aug 12 '22 11:08 fyayc-ddo