在一个元素中,我们有自定义模板字符串来抽象样式组件功能。例如,我们有媒体查询的模板字符串,如下所示:
// Definition
const for1080p = (...args) => css`
@media (min-height: 1080px) {
${css(...args)}
}
`;
// Usage
const Logo = styled.div`
width: 200px;
${for1080p`
width: 300px;
`}
`;
我们做出这个选择是因为它保留了原始样式的语法。它也由 prettier 很好地格式化。我们今天的主要问题是我们不知道如何使用 stylelint 分析自定义模板字符串中的 CSS。
例如:
const Logo = styled.div`
widht: 200px; /* <--- Unexpected unknown property "widht" */
${for1080p`
widht: 300px; /* <--- No error detected :( */
`}
`;
你知道怎么做吗?
最佳答案
内置于 stylelint 中的 CSS-in-JS 解析器 doesn't yet support interpolation tagging ,因此无法知道第二个 widht: 300px;
是一个声明。
在添加该支持之前,您可以:
@media
之类的内容,请使用标准 CSS 结构,而不是自定义模板字符串。 关于css - 在自定义样式组件模板字符串上运行 stylelint,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65076088/