Order your styles with stylelint-order.
| Before | After |
|---|---|
 |
 |
Install stylelint and this package to your project:
npm install stylelint stylelint-config-clean-order --save-devConfigure your stylelint configuration file (.stylelintrc.json) to extend this package:
⚠️ You don't need to installstylelint-ordernor addstylelint-orderto"plugins"since this package already does that for you.
{
"extends": ["stylelint-config-clean-order"]
}In addition to stylelint-order plugin, this package also overrides two rules (declaration-empty-line-before and at-rule-empty-line-before) to improve the final formatted result by adding extra empty lines between declarations. stylelint-config-clean-order does not override a rule other than these two.
If you want these rules to put into effect, make sure config packages after stylelint-config-clean-order do not override them.
I try to hand-pick style orders in the most logical way to improve process of CSS refactoring; for example font-size before line-height, display before align-items. If you think order of a rule doesn't make sense, please open an issue so we can discuss. Thanks!
MIT