我在CSS-IN-JS项目中使用了stylelint (这里使用的是astroturf,但我也使用任何CSS-IN-JS库来面对相同的模式,比如styled-components )。
我在同一个文件中定义了不同的样式元素,因此有时会有重复的选择器和/或导入规则。
/* 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>
);
有没有一种方法可以在块而不是整个文件上设置这些样式规则?
发布于 2018-12-13 06:57:51
有没有办法在块上而不是整个文件上设置这些样式规则?
没有。
像no-duplicate-selectors
这样的规则的作用域是一个源,而stylelint将以下内容视为源:
stdin
的
code
代码在编写CSS-in-JS时,建议您关闭仅限于源代码的规则。您可以将其关闭:
使用command comments逐个创建一个完整的案例,例如"no-duplicate-selectors": null
https://stackoverflow.com/questions/53499725
复制相似问题