Блог

есть ли правило в stylelint, чтобы сделать так, чтобы CSS появлялся перед любыми определениями подклассов?

я бы хотел, чтобы что-то подобное было недействительным:

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

Я бы хотел, чтобы это было правильно.

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

моя настройка stylelint очень проста, и файл .stylelintrc содержит только следующее:

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

кто-нибудь знает, есть ли правило для того, что я пытаюсь сделать в stylelint?

Вы можете использовать order правило в stylelint-order пакете плагинов, чтобы гарантировать, что объявления предшествуют вложенным правилам.

Сначала вам нужно будет установить пакет плагинов:

 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"
    ]
  }
}