Ошибка no-duplicate-selectors для разных селекторов внутри одного файла - PullRequest
Новая
       37

Ошибка no-duplicate-selectors для разных селекторов внутри одного файла

0 голосов
/ 27 ноября 2018

Я использую stylelint в проекте CSS-IN-JS (здесь используется astroturf, но я сталкиваюсь с тем же шаблоном, использующим любую библиотеку CSS-IN-JS, например, styleled-components).

Iопределять различные стилизованные элементы в одном и том же файле, и поэтому иногда они имеют дублированные селекторы и / или правила импорта. 

/* style.js */
import styled from 'astroturf';

export const StyledComponentA = styled('div')`
  transform: scale(0);

  &.visible {
    transform: scale(1);
  }
`;

export const StyledComponentB = styled('div')`
  opacity: 0;

  /* -> stylelint error: Unexpected duplicate selector "&.visible" */
  &.visible {
    opacity: 1;
  }
`;

Которые я составляю следующим образом: 

import React from 'react';
import { StyledComponentA, StyledComponentB } from './style';

export const Component = ({ isVisible }) => (
  <StyledComponentA visible={isVisible}>
    <StyledComponentB visible={isVisible}>Whatever</StyledComponentB>
  </StyledComponentA>
);

Есть лиспособ установить эти правила stylelint для блоков вместо целого файла?

1 Ответ

0 голосов
/ 13 декабря 2018

Есть ли способ установить эти правила стиля для блоков вместо целого файла?

Нет.

Правила типа no-duplicate-selectors относятся к источнику , а stylelint обрабатывает следующие источники как:

  • целые файлы
  • код, переданный вопция code API узла
  • stdin передается в CLI

При написании CSS-in-JSРекомендуется отключить правила, относящиеся к источникам.Вы можете отключить их:

  • полностью в вашем объекте конфигурации например, "no-duplicate-selectors": null
  • на индивидуальной основе, используя комментарии команды
...