Ошибка eslint в Webstorm?

Question

[Андрей Охотников]

Использую styled-components React, в webstorm ругается eslint на этот код

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)')};
  }
`;

Ошибка на строке в медиа запросом
Warning:(114, 9) Property 'grid-template-columns' is allowed only in following media groups: visual

Что это и как пофиксить?

Answer 1

[Антон Спирин]

ESLint тут не причем и это не ошибка, а warning. Это плагин styled-components или анализатор, который использует этот плагин в webstorm выкидывает предупреждение, так как у вас не явно объявлен медиа запрос и он не может сопоставить его тип. Предлагаю забить.

Comments

[Андрей Охотников]

Дело в том что у меня хук настроен - не могу закомитить пока все варнинги не пофикшены, так что забить не вариант :)

[Андрей Охотников]

как явно объявить запрос?

[Антон Спирин]

Андрей Охотников, явно это написать что-то вроде:
@media screen and (max-width: 767px) {}

Но думаю это не ваш вариант. Попробуйте написать хелперы как в документации, чтобы прийти к объявлениям вида:

${media.mobile`
  some-rule: value;
`}

Тогда анализатор кода даже не поймёт, что это медиазапрос.

[lnked]

Андрей Охотников, попробуйте git commit -nm "message" так вы проигнорируете все хуки