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

你知道怎么做吗？

标签： cssstyled-componentsstylelint

Answer 1

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

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

• 看看你从styled-components stylelint 处理器获得了多少里程以及它对插值标记的支持
• 使用标准 CSS 结构，而不是自定义模板字符串，例如@media