同一文件内不同选择器的无重复选择器错误

Question

我在 CSS-IN-JS 项目中使用 stylelint（这里使用 astroturf，但我使用任何 CSS-IN-JS 库（例如 styled-components 作为嗯）。

我在同一个文件中定义了不同样式的元素，因此有时最终会有重复的选择器 and/or 导入规则。

/* 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 规则？

Answer 1

Is there a way to set these stylelint rules on blocks instead of an entire file?

没有。

像 no-duplicate-selectors 这样的规则的范围是 a 来源 并且 stylelint 将以下内容视为来源：

整个文件
传递给 node API

code

stdin 传递给 CLI

在编写 CSS-in-JS 时，建议关闭范围为源的规则。您可以关闭它们：

完全在您的 configuration object 例如"no-duplicate-selectors": null
根据具体情况使用 command comments

同一文件内不同选择器的无重复选择器错误

no-duplicate-selectors error for different selectors inside the same file

stylelint

astroturf

css-in-js