Add @use order to .stylelintrc to be first, Ref: DEV-431

Author: ronilaukkarinen

.stylelintrc

@@ -14,6 +14,10 @@
   "customSyntax": "postcss-scss",
   "rules": {
     "order/order": [
+      {
+        "type": "at-rule",
+        "name": "use"
+      },
       {
         "type": "at-rule",
         "name": "import"

CHANGELOG.md

@@ -10,6 +10,7 @@
 * Update caniuse lite to 1.0.30001737, Ref: DEV-10
 * Upgrade gulp-sass to 6.0.1, Ref: DEV-426
 * Ignore merge commits from husky checks, Ref: DEV-427
+* Add `@use` order to .stylelintrc to be first, Ref: DEV-431
 
 ### 9.6.1: 2025-08-08
 

blocks/cta/src/style.scss

@@ -6,6 +6,14 @@
  */
 
 .wp-block-air-light-cta {
+  // Import components
+  @use '../../../sass/components/button';
+
+  // Import variables
+  @use '../../../sass/variables/breakpoints';
+  @use '../../../sass/variables/colors';
+  @use '../../../sass/variables/typography';
+
   // Get colors
   @include colors();
 
@@ -21,13 +29,13 @@
   max-width: var(--width-grid-base);
 
   .container {
-    background-color: #F2F2F2;
+    background-color: #f2f2f2;
     padding: 4rem 1.25rem;
   }
 
   h2,
   p {
-    color: #222222;
+    color: #222;
   }
 
   h2 {
@@ -49,11 +57,11 @@
   }
 
   .has-color-dark {
-    background-color: #222222;
+    background-color: #222;
 
     h2,
     p {
-      color: #F2F2F2;
+      color: #f2f2f2;
     }
 
     .wp-block-button__link {

blocks/image-content/src/style.scss

@@ -6,22 +6,6 @@
  */
 
 .wp-block-air-light-image-content {
-  // TODO: Replace with includePaths in config
-
-  // Needed helpers
-  // @import '../../../sass/helpers/font';
-  // @import '../../../sass/helpers/variablefont';
-
-  // Variables
-  @import '../../../sass/variables/breakpoints';
-  @import '../../../sass/variables/colors';
-  // @import '../../../sass/variables/typography';
-
-  // Needed elements
-  // @import '../../../sass/layout/typography';
-  @import '../../../sass/helpers/images';
-  @import '../../../sass/helpers/animations';
-  @import '../../../sass/components/button';
 
   // Get colors
   @include colors();
@@ -135,4 +119,20 @@
       order: 2;
     }
   }
+  // TODO: Replace with includePaths in config
+
+  // Needed helpers
+  // @use '../../../sass/helpers/font';
+  // @use '../../../sass/helpers/variablefont';
+
+  // Variables
+  @use '../../../sass/variables/breakpoints';
+  @use '../../../sass/variables/colors';
+  // @use '../../../sass/variables/typography';
+
+  // Needed elements
+  // @use '../../../sass/layout/typography';
+  @use '../../../sass/helpers/images';
+  @use '../../../sass/helpers/animations';
+  @use '../../../sass/components/button';
 }

functions.php

@@ -141,25 +141,26 @@
     // Accepts both string (all*/none-options only) and array (options + specific blocks)
     'allowed_blocks' => [
       'post' => [
-        'core/column',
-        'core/columns',
-        'core/coverImage',
-        'core/embed',
-        'core/freeform',
-        'core/gallery',
-        'core/heading',
-        'core/html',
-        'core/image',
-        'core/list',
-        'core/list-item',
-        'core/paragraph',
-        'core/quote',
-        'core/block',
-        'core/table',
-        'core/textColumns',
+        // 'core/column',
+        // 'core/columns',
+        // 'core/coverImage',
+        // 'core/embed',
+        // 'core/freeform',
+        // 'core/gallery',
+        // 'core/heading',
+        // 'core/html',
+        // 'core/image',
+        // 'core/list',
+        // 'core/list-item',
+        // 'core/paragraph',
+        // 'core/quote',
+        // 'core/block',
+        // 'core/table',
+        // 'core/textColumns',
       ],
       'page' => [
-        'all-core-blocks',
+        'air-light/cta',
+        // 'all-core-blocks',
       ],
       // 'page' => [
       //   'all-acf-blocks',