Stylelint -生成CSS出现在子类定义之前

Question

stylelint中有没有一条规则可以让CSS出现在任何子类定义之前？

我希望这样的东西是无效的：

.some-class {
  .some-sub-class {
    background: red;
  }
  border: 1px;
}

我希望这是正确的。

.some-class {
  border: 1px;
  .some-sub-class {
    background: red;
  }
}

我的样式设置是非常基本的，文件.stylelintrc只包含以下内容：

{
  "processors": [
    "stylelint-processor-styled-components"
  ],
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components"
  ]
}

有没有人知道我在stylelint上尝试做的事情有没有规则？

Answer 1

您可以在stylelint-order plugin pack中使用order rule来确保声明在嵌套规则之前。

你需要先安装插件包：

npm i --save-dev stylelint-order

然后更新您的配置对象：

{
  "processors": [
    "stylelint-processor-styled-components"
  ],
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components"
  ],
  "plugins": ["stylelint-order"],
  "rules": {
    "order/order": [
      "declarations",
      "rules"
    ]
  }
}