stylelint-config-clean-order

Order your styles with stylelint-order.
Before | After |
---|
 |  |
Usage
Install stylelint
and this package to your project:
npm install stylelint stylelint-config-clean-order --save-dev
Configure your stylelint configuration file (.stylelintrc.json
) to extend this package:
[!TIP]
You don't need to install stylelint-order
nor add stylelint-order
to "plugins"
since this package already does that for you.
{
"extends": ["stylelint-config-clean-order"]
}
Severity Options
Default severity level is warning
but you can use error variant to change severity level to error
.
{
"extends": ["stylelint-config-clean-order/error"]
}
Customization
You can import raw property groups to add or override rule options. Please refer to stylelint-order plugin documentation.
For example, you can override 'properties-order'
rule to not have empty lines between groups:
const { propertyGroups } = require('stylelint-config-clean-order')
const propertiesOrder = propertyGroups.map((properties) => ({
noEmptyLineBetween: true,
emptyLineBefore: 'never',
properties
}))
module.exports = {
extends: ['stylelint-config-clean-order'],
rules: {
'order/properties-order': [
propertiesOrder,
{
severity: 'warning',
unspecified: 'bottomAlphabetical',
}
]
}
}
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.
About orders
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!
License
MIT