stylelint-order

A plugin pack of order-related linting rules for Stylelint. Every rule supports autofixing (stylelint --fix).

Installation

1. If you haven't, install Stylelint:

npm install stylelint --save-dev

1. Install stylelint-order:

npm install stylelint-order --save-dev

Usage

Add stylelint-order to your Stylelint config plugins array, then add rules you need to the rules list. All rules from stylelint-order need to be namespaced with order.

{
    "plugins": [
        "stylelint-order"
    ],
    "rules": {
        "order/order": [
            "custom-properties",
            "declarations"
        ],
        "order/properties-order": [
            "width",
            "height"
        ]
    }
}

Rules

• order: Specify the order of content within declaration blocks.
• properties-order: Specify the order of properties within declaration blocks.
• properties-alphabetical-order: Specify the alphabetical order of properties within declaration blocks.

Autofixing

Every rule supports autofixing with stylelint --fix. postcss-sorting is used internally for order autofixing.

Automatic sorting has some limitations that are described for every rule, if any. Please, take a look at how comments are handled by postcss-sorting.

CSS-in-JS styles with template interpolation could be ignored by autofixing to avoid style corruption.

Autofixing in Less syntax may work but isn't officially supported.

Example configs

All these configs have properties-order configured with logical properties groups:

• stylelint-config-idiomatic-order
• stylelint-config-hudochenkov/order
• stylelint-config-recess-order
• stylelint-config-property-sort-order-smacss
• stylelint-config-clean-order

Thanks

properties-order and properties-alphabetical-order code and README were based on the declaration-block-properties-order rule which was a core rule prior to Stylelint 8.0.0.

Change Log

All notable changes to this project will be documented in this file. This project adheres to Semantic Versioning.

7.0.0

• Dropped Node.js 18 support
• Dropped support for Stylelint older than 16.18.0
• Changed: Ignore properties case for properties-order and properties-alphabetical-order
• Added support for more properties shorthands
• Fixed order autofix not applied, when Stylelint disable comments are present
• Fixed properties-alphabetical-order autofix not applied, when Stylelint disable comments are present
• Fixed properties-order autofix not applied, when Stylelint disable comments are present
• Fixed: Don't apply properties-alphabetical-order autofixing if there are no violations
• Fixed: Report warnings if they weren't fixed by autofix in properties-alphabetical-order

6.0.4

• Added support for Stylelint 16

6.0.3

• Fixed sorting inside CSS-in-JS css helper

6.0.2

• Added Stylelint v15 to peerDependencies

6.0.1

• Fix regression causing root of CSS or SCSS to report violations

6.0.0

• Dropped Node.js 12 and 14 support.
• Added support for postcss-styled-syntax.

5.0.0

• Breaking change: Dropped Node.js 8 support. Node.js 12 or greater is now required.
• Breaking change: Dropped support for Stylelint 13 and earlier.
• Added support for Stylelint 14.

4.1.0

• Added name option to extended rule object to improve error messaging (for order).
• Fixed order not reporting warnings, if autofix didn't fix them.

4.0.0

• Breaking change: Dropped Node.js 8 support. Node.js 10 or greater is now required.
• Breaking change: Always remove empty line before the first property if this property has any emptyLineBefore* option targeting it in properties-order. Even if option set to always empty line before the first property will be removed.
• Fixed false positives for emptyLineBeforeUnspecified.

3.1.1

• Added stylelint@11 as a peer dependency.

3.1.0

• Added emptyLineBefore: "threshold" option, and related options (emptyLineMinimumPropertyThreshold, emptyLineBeforeUnspecified: "threshold") to properties-order.

3.0.1

• Fixed properties-order not report warnings, if autofix didn't fix them.
• Fixed properties-alphabetical-order now puts shorthands before their longhand forms even if that isn't alphabetical to avoid broken CSS. E. g. border-color will be before border-bottom-color.

3.0.0

• Dropped Node.js 6 support. Node.js 8.7.0 or greater is now required.
• Removed stylelint@9 as a peer dependency. stylelint 10 or greater is now required.
• Added emptyLineBeforeUnspecified option for properties-order.

2.2.1

• Fixed false negatives with noEmptyLineBetween in combination with the order: "flexible".

2.2.0

• Added noEmptyLineBetween for groups in properties-order.
• Added stylelint@10 as a peer dependency.

2.1.0

• Added experimental support for HTML style tag and attribute.
• Added experimental support for CSS-in-JS.

2.0.0

This is a major release, because this plugin requires stylelint@9.8.0+ to work correctly with Less files.

• Added optional groupName property for properties-order.
• Adopted postcss-less@3 parser changes, which is dependency of `stylelint@9.7.0+`.
• Fixed incorrect fixing when properties order and empty lines should be changed at the same time.

1.0.0

• Removed stylelint@8 as a peer dependency.

0.8.1

• Add `stylelint@9.0.0` as a peer dependency.

0.8.0

• Breaking change: Dropped Node.js 4 support. Use Node.js 6 or newer.
• Changed: order and properties-order will no longer autofix proactively. If there no violations would be reported with autofix disabled, then nothing will be changed with autofix enabled. Previously, there were changes to flexible properties order (#49) or to the order of content within declaration blocks (#51).

0.7.0

• Specified stylelint in peerDependencies rather in dependencies. Following stylelint's plugin guide.

0.6.0

• Migrated to `stylelint@8.0.0`.

0.5.0

• Added autofixing for every rule! Please read docs before using this feature, because each rule has some caveats. stylelint 7.11+ is required for this feature.
• Removed SCSS nested properties support.
• Removed property shortcuts in properties-order. Before this version it was possible to define only e.g. padding and it would define position for all undefined padding-* properties. Now every property should be explicitly defined in a config.
• Removed deprecation warnings:
  • declaration-block-order
  • declaration-block-properties-order
  • declaration-block-properties-alphabetical-order
  • declaration-block-properties-specified-order
  • declaration-block-property-groups-structure

0.4.4

• Fixed false negative for blockless at-rules in order.

0.4.3

• Fixed regression in properties-order introduced in 0.4.2.

0.4.2

• Fixed: order and properties-order weren't recognize SCSS nested properties as declarations.

0.4.1

• Fixed properties-order bug, when non-standard declaration is following after a standard one

0.4.0

• Removed declaration-block-properties-specified-order. Instead use properties-order rule.
• Removed declaration-block-property-groups-structure. Instead use properties-order rule.
• Renamed declaration-block-order to order
• Renamed declaration-block-properties-alphabetical-order to properties-alphabetical-order
• Added properties-order rule. It combines removed declaration-block-properties-specified-order, declaration-block-property-groups-structure, and now support flexible order. Basically it's like declaration-block-properties-order in stylelint 6.5.0, but better :)

0.3.0

• Changed: Breaking! declaration-block-property-groups-structure now uses declaration-block-properties-specified-order rather stylelint's deprecated declaration-block-properties-order. Flexible group order isn't supported anymore
• Added: declaration-block-order support new rule extended object, which have new selector option. Rules in order can be specified by their selector
• Added: New keyword at-variables in declaration-block-order
• Added: New keyword less-mixins in declaration-block-order

0.2.2

• Fixed tests for declaration-block-property-groups-structure which were broken by previous fix ¯\_(ツ)_/¯

0.2.1

• Fixed incorrect severity level for declaration-block-properties-order which is called from declaration-block-property-groups-structure

0.2.0

• Breaking: Renamed property-groups-structure to declaration-block-property-groups-structure
• Added declaration-block-properties-specified-order rule
• Fixed unavailability of declaration-block-properties-alphabetical-order rule

0.1.0

• Initial release.