Specify the order of content within declaration blocks

visionappscz · May 6, 2024 · a786465 · a786465
1 parent 4c226d3
commit a786465
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -46,7 +46,17 @@ check for properties order:
 }
 ```
 
-The `order` config enforces properties order given by following categories:
+The `order` config enforces a consistent order of content in your declaration blocks:
+
+1. Sass variables,
+2. CSS custom properties,
+3. Sass `@extend`,
+4. single-line Sass `@include`,
+5. declarations,
+6. nested rules,
+7. any other at-rules.
+
+Furthermore, properties in the declarations must be ordered by following categories:
 
 1. `all` properties,
 2. `content`,

diff --git a/order.js b/order.js
@@ -3,6 +3,25 @@ module.exports = {
     'stylelint-order',
   ],
   rules: {
+    'order/order': [
+      'dollar-variables',
+      'custom-properties',
+      {
+        name: 'extend',
+        type: 'at-rule',
+      },
+      {
+        hasBlock: false,
+        name: 'include',
+        type: 'at-rule',
+      },
+      'declarations',
+      'rules',
+      {
+        hasBlock: true,
+        type: 'at-rule',
+      },
+    ],
     'order/properties-order': [
 
       // All properties