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

Question

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

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

你知道怎么做吗？

Answer 1

内置于 stylelint 中的 CSS-in-JS 解析器 doesn't yet support interpolation tagging ，因此无法知道第二个 widht: 300px;是一个声明。
在添加该支持之前，您可以:

查看您从 styled-components stylelint processor 获得多少里程和它的 support for interpolation tagging

对于 @media 之类的内容，请使用标准 CSS 结构，而不是自定义模板字符串。