stylelint-config-clean-order

Order your styles with stylelint-order.

Before	After

Usage

Install stylelint and this package to your project:

1npm 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.

1{
2  "extends": ["stylelint-config-clean-order"]
3}

Severity Options

Default severity level is warning but you can use error variant to change severity level to error.

1{
2  "extends": ["stylelint-config-clean-order/error"]
3}

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:

1const { propertyGroups } = require('stylelint-config-clean-order')
2
3const propertiesOrder = propertyGroups.map((properties) => ({
4  noEmptyLineBetween: true,
5  emptyLineBefore: 'never', // Don't add empty lines between order groups.
6  properties
7}))
8
9module.exports = {
10  extends: ['stylelint-config-clean-order'],
11  rules: {
12    'order/properties-order': [
13      propertiesOrder,
14      {
15        severity: 'warning',
16        unspecified: 'bottomAlphabetical',
17      }
18    ]
19  }
20}

Extra empty lines for formatting

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