Fix Sass mixed-declaration warning using stylelint-order

Author: bhollis

.stylelintrc

@@ -1,4 +1,5 @@
 {
+  "plugins": ["stylelint-order"],
   "extends": ["stylelint-config-standard-scss", "stylelint-config-css-modules"],
   "rules": {
     "alpha-value-notation": "number",
@@ -47,6 +48,26 @@
       "^dim-([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
       { "message": "Expected function name to be kebab-case and prefixed with 'dim-'" }
     ],
-    "scss/load-partial-extension": null
+    "scss/load-partial-extension": null,
+    "order/order": [
+      "custom-properties",
+      "dollar-variables",
+      "declarations",
+      {
+        "type": "at-rule",
+        "name": "include",
+        "hasBlock": false
+      },
+      {
+        "type": "at-rule",
+        "name": "include",
+        "hasBlock": true
+      },
+      {
+        "type": "at-rule"
+      },
+      "rules"
+    ],
+    "declaration-block-no-shorthand-property-overrides": true
   }
 }

package.json

@@ -179,6 +179,7 @@
     "stylelint": "^16.8.2",
     "stylelint-config-css-modules": "^4.4.0",
     "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint-order": "^6.0.4",
     "svgo": "^3.3.2",
     "svgo-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.3.10",

pnpm-lock.yaml

@@ -4,8 +4,16 @@
   padding-left: env(safe-area-inset-left);
   padding-right: env(safe-area-inset-right);
 
+  @include phone-portrait {
+    --inventory-column-padding: 12px;
+  }
+
+  @media (min-width: 1440px) {
+    --inventory-column-padding: 24px;
+    --column-padding: calc(2 * var(--inventory-column-padding) - var(--item-margin));
+  }
+
   &::before {
-    @include below-header;
     background: var(--theme-app-bg);
     background-position: center top;
     background-repeat: no-repeat;
@@ -16,14 +24,7 @@
     position: fixed;
     will-change: transform;
     z-index: -1;
-  }
 
-  @media (min-width: 1440px) {
-    --inventory-column-padding: 24px;
-    --column-padding: calc(2 * var(--inventory-column-padding) - var(--item-margin));
-  }
-
-  @include phone-portrait {
-    --inventory-column-padding: 12px;
+    @include below-header;
   }
 }

src/app/App.m.scss

@@ -20,16 +20,16 @@
   border: 1px solid white;
   text-decoration: none;
 
-  &:focus,
-  &:active {
-    outline: none;
-  }
-
   @include interactive($hover: true, $focus: true) {
     border-color: var(--theme-accent-primary);
     color: var(--theme-accent-primary);
     background-color: rgba(255, 255, 255, 0.1);
   }
+
+  &:focus,
+  &:active {
+    outline: none;
+  }
 }
 
 .accountDetails {

src/app/accounts/SelectAccount.m.scss

@@ -66,9 +66,9 @@
 
   h1 {
     grid-area: title;
+    margin: 0 0 4px 0;
 
     @include destiny-header;
-    margin: 0 0 4px 0;
   }
 
   :global(.item) {
@@ -94,10 +94,10 @@
   flex-wrap: wrap;
   align-items: center;
   margin-bottom: 4px;
+  gap: 4px;
   > * {
     margin: 0;
   }
-  gap: 4px;
 }
 
 .element {

src/app/armory/Armory.m.scss

@@ -9,12 +9,8 @@
   list-style: none;
   gap: 4px;
 
-  li {
-    white-space: nowrap;
-    img {
-      vertical-align: text-bottom;
-      margin-right: 0.2em;
-    }
+  @include phone-portrait {
+    margin-right: 38px;
   }
 
   @media (max-width: 675px) {
@@ -27,7 +23,11 @@
     }
   }
 
-  @include phone-portrait {
-    margin-right: 38px;
+  li {
+    white-space: nowrap;
+    img {
+      vertical-align: text-bottom;
+      margin-right: 0.2em;
+    }
   }
 }

src/app/armory/Links.m.scss

@@ -28,16 +28,16 @@
   gap: 0 6px;
   padding: 0 6px;
 
+  // Use the emblem as a background
+  background-size: $emblem-width $emblem-height;
+  background-position: left center;
+  background-repeat: no-repeat;
+
   @include phone-portrait {
     grid-template-areas:
       'emblem class power'
       'emblem bottom maxTotalPower';
   }
-
-  // Use the emblem as a background
-  background-size: $emblem-width $emblem-height;
-  background-position: left center;
-  background-repeat: no-repeat;
 }
 
 .vaultTile {
@@ -50,10 +50,6 @@
   box-sizing: border-box;
   gap: 0 6px;
   padding: 0 6px;
-
-  @include phone-portrait {
-    grid-template-areas: 'emblem class vaultCapacity' !important;
-  }
   // The vault needs a little border to stand out against some backgrounds
   border: 1px solid rgba(0, 0, 0, 0.3);
   border-right: none;
@@ -62,6 +58,10 @@
 
   background-color: rgb(49, 50, 51);
   background-image: url('images/vault-background.svg');
+
+  @include phone-portrait {
+    grid-template-areas: 'emblem class vaultCapacity' !important;
+  }
 }
 
 // The "current character" triangle

src/app/character-tile/CharacterTile.m.scss

@@ -22,10 +22,6 @@
   background-color: var(--theme-dropdown-menu-bg);
   will-change: transform;
 
-  [role='button'] {
-    outline: none;
-  }
-
   // The phone layout version
   @include phone-portrait {
     position: fixed;
@@ -35,6 +31,10 @@
       var(--viewport-height) - 54px - var(--header-height) - env(safe-area-inset-bottom)
     );
   }
+
+  [role='button'] {
+    outline: none;
+  }
 }
 
 .characterHeader {

src/app/character-tile/StoreHeading.m.scss

@@ -66,15 +66,15 @@
     font-size: 12px;
     // button's children's spacing margin
     gap: 4px;
-    img {
-      margin: 0;
-    }
 
     @include interactive($hover: true) {
       img {
         filter: drop-shadow(0 0 1px black);
       }
     }
+    img {
+      margin: 0;
+    }
   }
 }
 

src/app/compare/Compare.m.scss

@@ -172,16 +172,16 @@ $and-color: #814bcf;
       font-size: 12px;
     }
     .currency {
-      img {
-        vertical-align: text-bottom;
-        height: 16px;
-        width: 16px;
-      }
       position: absolute;
       top: 4px;
       right: 40px;
       font-weight: 200;
       font-size: 14px;
+      img {
+        vertical-align: text-bottom;
+        height: 16px;
+        width: 16px;
+      }
     }
     .legendaryMarks {
       position: absolute;

src/app/destiny1/loadout-builder/loadout-builder.scss

@@ -1,13 +1,13 @@
 @use '../../variables.scss' as *;
 
 .loadoutOptions {
+  display: flex;
+  flex-flow: row wrap;
+
   @include phone-portrait {
     font-size: 14px;
   }
 
-  display: flex;
-  flex-flow: row wrap;
-
   input {
     vertical-align: middle;
   }
@@ -19,11 +19,11 @@
   align-items: center;
   margin-right: 4px;
   margin-bottom: 4px;
+
+  gap: 4px;
   &:last-child {
     margin-bottom: 0;
   }
-
-  gap: 4px;
 }
 
 .loadoutName {

src/app/destiny1/loadout-drawer/LoadoutDrawerOptions.m.scss

@@ -57,12 +57,12 @@
   display: flex;
   box-sizing: border-box;
   margin-right: 16px;
+  flex-direction: column;
+  flex: 0;
 
   @include phone-portrait {
     margin-right: 0;
   }
-  flex-direction: column;
-  flex: 0;
 
   .loadout-bucket-name {
     text-transform: uppercase;

src/app/destiny1/loadout-drawer/loadout-drawer.scss

@@ -25,13 +25,13 @@
 
 .frame {
   max-width: 250px;
+  margin: 8px auto;
+  overflow: visible !important;
+  position: relative;
 
   @include phone-portrait {
     max-width: 260px;
   }
-  margin: 8px auto;
-  overflow: visible !important;
-  position: relative;
 }
 
 .track {

src/app/dim-ui/CharacterSelect.m.scss

@@ -13,17 +13,17 @@
     padding: 6px 10px 6px 16px;
   }
 
+  // Don't do hover
+  @include interactive($hover: true, $active: true) {
+    background-color: rgba(255, 255, 255, 0.2) !important;
+    color: var(--theme-text) !important;
+  }
+
   > *:nth-last-child(n + 2) {
     margin-right: auto;
   }
   > *:last-child {
     margin-left: 6px;
     flex-shrink: 0;
   }
-
-  // Don't do hover
-  @include interactive($hover: true, $active: true) {
-    background-color: rgba(255, 255, 255, 0.2) !important;
-    color: var(--theme-text) !important;
-  }
 }