在自定义样式的组件模板字符串上运行stylelint

Question

在一个项目中，我们有自定义模板字符串来抽象样式组件函数。例如，我们有媒体查询的模板字符串，如下所示：

// Definition
const for1080p = (...args) => css`
@media (min-height: 1080px) {
${css(...args)}
}
`;
// Usage
const Logo = styled.div`
width: 200px;
${for1080p`
width: 300px;
`}
`;

我们之所以选择这个选项，是因为它保留了原始样式的语法。它也被漂亮的格式化了。

我们今天的主要问题是，我们不知道如何使用stylelint分析自定义模板字符串中的CSS。

例如：

const Logo = styled.div`
widht: 200px; /* <--- Unexpected unknown property "widht" */
${for1080p`
widht: 300px; /* <--- No error detected :( */
`}
`;

你知道怎么做吗？

Answer 1

我认为现在有一种方法可以通过https://github.com/styled-components/stylelint-processor-styled-components正如文件所述-

结合moduleName、importName和strict，您可以告诉处理器将哪种标记的模板文本进行lint。

{
"processors": [["stylelint-processor-styled-components", {
"moduleName": "styled-components",
"importName": ["default", "for1080p"], <---- here 
}

我没有测试过这些东西，但我认为它应该能起到的作用

Answer 2

stylelint中内置的CSS in JS解析器还不支持插值标记，因此无法知道第二个widht: 300px;是一个声明。

在添加该支持之前，您可以：

• 查看样式化组件stylelint处理器及其对插值标记的支持所带来的好处
• 对于@media之类的东西，使用标准的CSS构造，而不是自定义的模板字符串