Eslint error in Webstorm?

Question

webstorm

I use styled-components React, in webstorm eslint swears at this code

const Items = styled.div`
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
  margin-top: 1rem;
  transition: 0.25s;

  @media ${(p) => p.theme.device.tablet} {
    grid-template-columns: repeat(3, 1fr);
  }

  @media ${(p) => p.theme.device.laptop} {
    grid-template-columns: ${(p) => (p.isOpenFilter ? 'repeat(4, 1fr)' : 'repeat(5, 1fr)')};
  }
`;

Error on line in media query
Warning:(114, 9) Property 'grid-template-columns' is allowed only in following media groups: visual
What is this and how to fix it?

Answer 1

ESLint has nothing to do with it and this is not an error, but a warning. It's the styled-components plugin or the parser that uses this plugin in webstorm throws a warning because you don't explicitly declare a media query and it can't match its type. I suggest hitting.