Enforce ordering of declaration blocks with stylelint-order

Author: thibaudcolas

CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Features
+
+- Enforce ordering of declaration blocks with [stylelint-order](https://github.com/hudochenkov/stylelint-order).
+
 ## [0.1.0](https://github.com/torchbox/stylelint-config-torchbox/releases/tag/v0.1.0) (YYYY-MM-DD)
 
 First release

README.md

@@ -38,6 +38,7 @@ To get the most out of this config, it is assumed that projects have the followi
 > See [`config.js`](./config.js) for the config definition. This package depends on:
 >
 > - [`stylelint-scss`](https://github.com/kristerkari/stylelint-scss)
+> - [`stylelint-order`](https://github.com/hudochenkov/stylelint-order)
 > - [`stylelint-config-standard`](https://github.com/stylelint/stylelint-config-standard)
 > - [`stylelint-config-prettier`](https://github.com/prettier/stylelint-config-prettier)
 
@@ -67,6 +68,7 @@ To get the most out of this config, it is assumed that projects have the followi
 - [`scss/dollar-variable-no-missing-interpolation`](https://github.com/kristerkari/stylelint-scss#readme)
 - [`scss/at-mixin-argumentless-call-parentheses`](https://github.com/kristerkari/stylelint-scss#readme): `always`
 - [`scss/media-feature-value-dollar-variable`](https://github.com/kristerkari/stylelint-scss#readme): `always`
+- [`order/order`](https://github.com/hudochenkov/stylelint-order): `dollar-variables, custom-properties, type: at-rule, hasBlock: false, declarations, rules, type: at-rule, hasBlock: true`
 
 #### Rules of `stylelint-config-standard`
 

config.js

@@ -3,7 +3,7 @@
 // See https://stylelint.io/user-guide/rules/.
 module.exports = {
     extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
-    plugins: ['stylelint-scss'],
+    plugins: ['stylelint-scss', 'stylelint-order'],
     rules: {
         'color-named': 'never',
         'declaration-block-no-shorthand-property-overrides': true,
@@ -28,5 +28,15 @@ module.exports = {
         'scss/dollar-variable-no-missing-interpolation': true,
         'scss/at-mixin-argumentless-call-parentheses': 'always',
         'scss/media-feature-value-dollar-variable': 'always',
+        'order/order': [
+            'dollar-variables',
+            'custom-properties',
+            // @-rules that have no nesting.
+            { type: 'at-rule', hasBlock: false },
+            'declarations',
+            'rules',
+            // @-rules that have nested elements, e.g. media queries
+            { type: 'at-rule', hasBlock: true },
+        ],
     },
 };

package-lock.json

@@ -35,6 +35,7 @@
   "dependencies": {
     "stylelint-config-prettier": "^5.2.0",
     "stylelint-config-standard": "^18.3.0",
+    "stylelint-order": "^3.1.1",
     "stylelint-scss": "^3.10.0"
   },
   "peerDependencies": {