Stylelint：创建一个规则，可以禁止添加嵌套的媒体查询

Question

我想创建一个规则，它应该阻止嵌套的媒体查询。例如，应该阻止此 SCSS：

.example-class {
    max-width: 350px;
    @media screen and (max-width: 768px) {
         margin: auto;
    }
}

Answer 1

您可以write a stylelint plugin禁止嵌套的 at-media 规则。

该插件将遍历源中的所有 at-media 规则并检查其父节点是否为 root 节点。您可以使用 PostCSS walkAtRules() 来执行此操作，例如：

root.walkAtRules('media', atRule => {
  if (atRule.parent.type !== "root") {
    stylelint.utils.report({ /* .. */ });
  }
})

Stylelint: Create a rule, that can disallow add nested media queries