Stylelint fixes

Author: adamlaki

.stylelintrc.json

@@ -1,10 +1,30 @@
 {
     "extends": "stylelint-config-sass-guidelines",
+    "plugins": ["stylelint-order"],
     "rules": {
-        "indentation": 2,
-        "max-nesting-depth": 6,
-        "selector-class-pattern": [
-            "^[a-z0-9\\:-]+$"
-        ]
+      "selector-max-compound-selectors": 5,
+      "max-nesting-depth": 4,
+      "selector-no-vendor-prefix": [
+        true,
+        {
+          "ignoreSelectors": ["/-moz-.*/", "/-ms-.*/", "/-webkit-.*/"]
+        }
+      ],
+      "selector-no-qualifying-type": [
+        true,
+        {
+          "ignore": ["attribute"]
+        }
+      ],
+      "value-no-vendor-prefix": [
+        true,
+        {
+          "ignoreValues": ["box"]
+        }
+      ],
+      "selector-class-pattern": null,
+      "scss/percent-placeholder-pattern": null,
+      "order/properties-alphabetical-order": true,
+      "@stylistic/function-parentheses-space-inside": null
     }
-}
+  }

package-lock.json

@@ -39,7 +39,8 @@
     },
     "devDependencies": {
         "stylelint": "^16.10.0",
-        "stylelint-config-sass-guidelines": "^12.1.0"
+        "stylelint-config-sass-guidelines": "^12.1.0",
+        "stylelint-order": "^6.0.4"
     },
     "engines": {
         "node": "^18.0 || ^19.0 || ^20.0 || ^21.0"

package.json

@@ -33,7 +33,7 @@
   line-height: config('line-height-md', $typography);
   position: relative;
 
-  &[aria-checked="true"],
+  &[aria-checked='true'],
   &:focus-visible {
     @include focus-ring(
       $type: config('focus-ring-type', $btn, false),

resources/sass/component/_media-uploader.scss

@@ -167,11 +167,11 @@
     margin-inline-start: calc(var(--icon-size) / 2);
     padding-inline-start: calc(var(--icon-size) / 2);
 
-    &[aria-hidden="true"] {
+    &[aria-hidden='true'] {
       grid-template-rows: 0fr;
     }
 
-    &[aria-hidden="false"] {
+    &[aria-hidden='false'] {
       grid-template-rows: 1fr;
       margin-block-start: spacer('s');
     }

resources/sass/component/_notification.scss

@@ -12,7 +12,7 @@
     }
   }
 
-  [aria-current="page"] {
+  [aria-current='page'] {
     background-color: color('primary-background', 'btn');
     color: color('primary-foreground', 'btn');
   }

resources/sass/component/_pagination.scss

@@ -49,7 +49,7 @@
     z-index: 5;
   }
 
-  [role="listbox"] {
+  [role='listbox'] {
     @include clear-list;
     @include scrollbar;
     display: flex;
@@ -64,7 +64,7 @@
     }
   }
 
-  [role="option"] {
+  [role='option'] {
     align-items: center;
     border-radius: config('border-radius', $form-control);
     display: flex;
@@ -73,7 +73,7 @@
     padding-inline: spacer('xs');
     user-select: none;
 
-    &[aria-selected="true"] {
+    &[aria-selected='true'] {
       background-color: color('light-background', 'btn');
       color: color('light-foreground', 'btn');
     }

resources/sass/component/form/_combobox.scss

@@ -21,7 +21,7 @@
     inset: 0 auto 0 0;
     position: absolute;
 
-    &:not([style*="inline-size"]) {
+    &:not([style*='inline-size']) {
       animation: 1s progress infinite linear alternate;
       inline-size: 20%;
     }

resources/sass/extend/_progress.scss

@@ -1,7 +1,7 @@
 @use 'sprucecss/scss/spruce' as *;
 
 .app-header {
-  backdrop-filter: saturate(180%) blur(.25rem);
+  backdrop-filter: saturate(180%) blur(0.25rem);
   background-color: color('background', 'header');
   border-block-end: 1px solid color('border');
   inset-block-start: 0;