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

Posted 2023-03-15

【中文标题】在自定义样式组件模板字符串上运行 stylelint

【英文标题】：Running stylelint over custom styled-components template string

【发布时间】：2021-03-12 12:34:17

【问题描述】：

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

// 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 :( */
  `
`;

你知道怎么做吗？

【问题讨论】：

你拼错了width并写了widht

@Someone21 这是故意的。 linter 的目的是自动检测这种错误。

哦好的谢谢我不知道

【参考方案1】：

stylelint doesn't yet support interpolation tagging 中内置的 CSS-in-JS 解析器，因此无法知道第二个 widht: 300px; 是一个声明。

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

看看你从styled-components stylelint processor和它的support for interpolation tagging获得了多少里程 对@media 之类的内容使用标准 CSS 结构，而不是自定义模板字符串

【讨论】：

我不认为“插值标记”是我正在寻找的功能。插值标记允许您从动态和非自治部分构造 CSS 声明。例如，您可以构造一个属性名称。我编写的 CSS 包含完整的声明，但我不使用触发 stylelint 的 styled.something 标记。

【参考方案2】：

我认为现在有一种方法可以使用 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 

这些东西没有经过我的测试，但我认为它应该可以解决问题