Unpinned Stylelint and plugins

.stylelintrc

@@ -1,11 +1,12 @@
 {
   "extends": [
+    "@stylistic/stylelint-config",
     "stylelint-config-recess-order",
     "stylelint-config-recommended",
-    "stylelint-config-standard-scss",
+    "stylelint-config-standard-scss"
-    "stylelint-stylistic/config"
   ],
   "plugins": [
+    "@stylistic/stylelint-plugin",
     "stylelint-scss"
   ],
   "rules": {
@@ -46,7 +47,6 @@
     ],
     "custom-property-empty-line-before": null,
     "custom-property-pattern": null,
-    "declaration-colon-space-after": null,
     "declaration-no-important": true,
     "declaration-block-single-line-max-declarations": 0,
     "font-family-name-quotes": "always-where-recommended",
@@ -78,8 +78,6 @@
       }
     ],
     "selector-class-pattern": null,
-    "selector-combinator-space-before": null,
-    "selector-descendant-combinator-no-non-space": null,
     "selector-id-pattern": null,
     "selector-max-id": 0,
     "selector-no-qualifying-type": null,
@@ -106,7 +104,6 @@
         ]
       }
     ],
-    "value-list-comma-newline-after": null,
     "value-no-vendor-prefix": [
       true,
       {
@@ -121,7 +118,6 @@
     "scss/at-function-pattern": "^[a-z][a-z0-9]*(-[a-z0-9]+)*$",
     "scss/at-if-closing-brace-newline-after": "always-last-in-chain",
     "scss/at-if-no-null": true,
-    "scss/at-import-partial-extension": "never",
     "scss/at-mixin-argumentless-call-parentheses": "always",
     "scss/at-mixin-parentheses-space-before": "never",
     "scss/at-mixin-pattern": "^[a-z][a-z0-9]*(-[a-z0-9]+)*$",
@@ -139,6 +135,7 @@
     "scss/double-slash-comment-empty-line-before": null,
     "scss/double-slash-comment-whitespace-inside": "always",
     "scss/at-extend-no-missing-placeholder": null,
+    "scss/load-partial-extension": "never",
     "scss/no-duplicate-mixins": true,
     "scss/no-global-function-names": null,
     "scss/operator-no-newline-after": null,
@@ -146,7 +143,7 @@
     "scss/partial-no-import": true,
     "scss/percent-placeholder-pattern": "^[a-z][a-z0-9]*(-[a-z0-9]+)*$",
     "scss/selector-no-redundant-nesting-selector": true,
-    "stylistic/block-closing-brace-newline-after": [
+    "@stylistic/block-closing-brace-newline-after": [
       "always",
       {
         "ignoreAtRules": [
@@ -156,12 +153,14 @@
         ]
       }
     ],
-    "stylistic/declaration-colon-space-after": null,
+    "@stylistic/declaration-colon-space-after": null,
-    "stylistic/no-empty-first-line": true,
+    "@stylistic/no-empty-first-line": true,
-    "stylistic/linebreaks": "unix",
+    "@stylistic/linebreaks": "unix",
-    "stylistic/selector-max-empty-lines": 0,
+    "@stylistic/selector-combinator-space-before": null,
-    "stylistic/string-quotes": "double",
+    "@stylistic/selector-descendant-combinator-no-non-space": null,
-    "stylistic/unicode-bom": "never",
+    "@stylistic/selector-max-empty-lines": 0,
-    "stylistic/value-list-comma-newline-after": null
+    "@stylistic/string-quotes": "double",
+    "@stylistic/unicode-bom": "never",
+    "@stylistic/value-list-comma-newline-after": null
   }
 }

package.json

@@ -55,6 +55,8 @@
     "@mdi/svg": "^7.4.47",
     "@primer/octicons": "^19.11.0",
     "@stylistic/eslint-plugin-ts": "^2.6.4",
+    "@stylistic/stylelint-config": "^2.0.0",
+    "@stylistic/stylelint-plugin": "^3.0.1",
     "@types/css-modules": "^1.0.5",
     "@types/escape-html": "^1.0.4",
     "@types/fuzzaldrin-plus": "^0.6.5",
@@ -91,12 +93,11 @@
     "rimraf": "^6.0.1",
     "sass": "^1.77.8",
     "simple-icons": "^13.6.0",
-    "stylelint": "15.11.0",
+    "stylelint": "^16.8.2",
-    "stylelint-config-recess-order": "4.2.0",
+    "stylelint-config-recess-order": "^5.1.0",
-    "stylelint-config-recommended": "13.0.0",
+    "stylelint-config-recommended": "^14.0.1",
-    "stylelint-config-standard-scss": "11.1.0",
+    "stylelint-config-standard-scss": "^13.1.0",
-    "stylelint-scss": "5.3.2",
+    "stylelint-scss": "^6.5.0",
-    "stylelint-stylistic": "0.4.3",
     "svgo": "^3.3.2",
     "tiny-glob": "^0.2.9",
     "ts-node": "^10.9.2",

src/overrides/assets/stylesheets/custom/layout/_iconsearch.scss

@@ -59,8 +59,8 @@
     // Hack: promote to own layer to reduce jitter
     backface-visibility: hidden;
     touch-action: pan-y;
-    scrollbar-width: thin;
     scrollbar-color: var(--md-default-fg-color--lighter) transparent;
+    scrollbar-width: thin;
 
     // Icon search result inside tooltip
     .md-tooltip & {

src/templates/assets/stylesheets/main/_typeset.scss

@@ -233,11 +233,11 @@ kbd {
       overflow: auto;
       word-break: normal;
       touch-action: auto;
+      scrollbar-color: var(--md-default-fg-color--lighter) transparent;
+      scrollbar-width: thin;
       outline-color: var(--md-accent-fg-color);
       box-shadow: none;
       box-decoration-break: slice;
-      scrollbar-width: thin;
-      scrollbar-color: var(--md-default-fg-color--lighter) transparent;
 
       // Code block on hover
       &:hover {
@@ -515,10 +515,10 @@ kbd {
       margin-inline-start: 0.5em;
       vertical-align: text-bottom;
       content: "";
-      transition: background-color 125ms;
       mask-image: var(--md-typeset-table-sort-icon);
       mask-repeat: no-repeat;
       mask-size: contain;
+      transition: background-color 125ms;
     }
 
     // Show sort icon on hover

src/templates/assets/stylesheets/main/components/_clipboard.scss

@@ -77,8 +77,8 @@
     content: "";
     background-color: currentcolor;
     mask-image: var(--md-clipboard-icon);
-    mask-position: center;
     mask-repeat: no-repeat;
+    mask-position: center;
     mask-size: contain;
   }
 

src/templates/assets/stylesheets/main/components/_consent.scss

@@ -63,8 +63,8 @@
     width: 100%;
     height: 100%;
     background-color: hsla(0, 0%, 0%, 0.54);
-    opacity: 1;
     backdrop-filter: blur(px2rem(2px));
+    opacity: 1;
     animation: overlay 250ms both;
   }
 

src/templates/assets/stylesheets/main/components/_dialog.scss

@@ -27,6 +27,7 @@
 // Dialog
 .md-dialog {
   position: fixed;
+  inset-inline-end: px2rem(16px);
   bottom: px2rem(16px);
   z-index: 4;
   min-width: px2rem(222px);
@@ -40,7 +41,6 @@
     transform 0ms   400ms,
     opacity   400ms;
   transform: translateY(100%);
-  inset-inline-end: px2rem(16px);
 
   // [print]: Hide dialog
   @media print {

src/templates/assets/stylesheets/main/components/_nav.scss

@@ -86,8 +86,8 @@
     gap: px2rem(8px);
     align-items: flex-start;
     margin-top: 0.625em;
-    transition: color 125ms;
     scroll-snap-align: start;
+    transition: color 125ms;
 
     // Navigation link that was passed
     &--passed {
@@ -148,8 +148,8 @@
         display: block;
         width: 100%;
         height: 100%;
-        mask-image: var(--md-toc-icon);
         background-color: currentcolor;
+        mask-image: var(--md-toc-icon);
       }
 
       // Hide table of contents
@@ -221,8 +221,8 @@
         // Navigation icon
         .md-nav__icon {
           position: absolute;
-          top: px2rem(8px);
           inset-inline-start: px2rem(8px);
+          top: px2rem(8px);
           display: block;
           width: px2rem(24px);
           height: px2rem(24px);
@@ -236,8 +236,8 @@
             content: "";
             background-color: currentcolor;
             mask-image: var(--md-nav-icon--prev);
-            mask-position: center;
             mask-repeat: no-repeat;
+            mask-position: center;
             mask-size: contain;
           }
         }
@@ -246,10 +246,10 @@
         ~ .md-nav__list {
           overflow-y: auto;
           touch-action: pan-y;
+          scroll-snap-type: y mandatory;
           background-color: var(--md-default-bg-color);
           box-shadow:
             0 px2rem(1px) 0 var(--md-default-fg-color--lightest) inset;
-          scroll-snap-type: y mandatory;
 
           // Omit border on first child
           > :first-child {
@@ -325,8 +325,8 @@
             content: "";
             background-color: currentcolor;
             mask-image: var(--md-nav-icon--next);
-            mask-position: center;
             mask-repeat: no-repeat;
+            mask-position: center;
             mask-size: contain;
           }
         }
@@ -656,11 +656,11 @@
         content: "";
         background-color: currentcolor;
         border-radius: 100%;
-        transition: transform 250ms;
         mask-image: var(--md-nav-icon--next);
-        mask-position: center;
         mask-repeat: no-repeat;
+        mask-position: center;
         mask-size: contain;
+        transition: transform 250ms;
 
         // Adjust for right-to-left languages
         [dir="rtl"] & {

src/templates/assets/stylesheets/main/components/_search.scss

@@ -53,6 +53,7 @@
     // [tablet portrait -]: Search modal
     @include break-to-device(tablet portrait) {
       position: absolute;
+      inset-inline-start: px2rem(-44px);
       top: px2rem(-20px);
       width: px2rem(40px);
       height: px2rem(40px);
@@ -64,7 +65,6 @@
         transform 300ms 100ms,
         opacity   200ms 200ms;
       transform-origin: center;
-      inset-inline-start: px2rem(-44px);
 
       // Show overlay when search is active
       [data-md-toggle="search"]:checked ~ .md-header & {
@@ -78,6 +78,7 @@
     // [tablet landscape +]: Header-embedded search
     @include break-from-device(tablet landscape) {
       position: fixed;
+      inset-inline-start: 0;
       top: 0;
       width: 0;
       height: 0;
@@ -87,7 +88,6 @@
         width     0ms 250ms,
         height    0ms 250ms,
         opacity 250ms;
-      inset-inline-start: 0;
 
       // Show overlay when search is active
       [data-md-toggle="search"]:checked ~ .md-header & {
@@ -133,6 +133,7 @@
     // [tablet portrait -]: Search modal
     @include break-to-device(tablet portrait) {
       position: fixed;
+      inset-inline-start: 0;
       top: 0;
       z-index: 2;
       width: 0;
@@ -145,7 +146,6 @@
         transform 150ms 150ms cubic-bezier(0.4, 0, 0.2, 1),
         opacity   150ms 150ms;
       transform: translateX(5%);
-      inset-inline-start: 0;
 
       // Adjust for right-to-left languages
       [dir="rtl"] & {
@@ -307,8 +307,8 @@
     // Search focus button
     &[for="__search"] {
       position: absolute;
-      top: px2rem(6px);
       inset-inline-start: px2rem(10px);
+      top: px2rem(6px);
       z-index: 2;
 
       // Adjust for right-to-left languages
@@ -318,8 +318,8 @@
 
       // [tablet portrait -]: Search modal
       @include break-to-device(tablet portrait) {
-        top: px2rem(12px);
         inset-inline-start: px2rem(16px);
+        top: px2rem(12px);
 
         // Hide the magnifying glass
         svg:first-child {
@@ -342,15 +342,15 @@
   // Search options
   &__options {
     position: absolute;
-    top: px2rem(6px);
     inset-inline-end: px2rem(10px);
+    top: px2rem(6px);
     z-index: 2;
     pointer-events: none;
 
     // [tablet portrait -]: Search modal
     @include break-to-device(tablet portrait) {
-      top: px2rem(12px);
       inset-inline-end: px2rem(16px);
+      top: px2rem(12px);
     }
 
     // Search option buttons
@@ -471,8 +471,8 @@
     // [tablet landscape +]: Limit height to viewport
     @include break-from-device(tablet landscape) {
       max-height: 0;
-      scrollbar-width: thin;
       scrollbar-color: var(--md-default-fg-color--lighter) transparent;
+      scrollbar-width: thin;
 
       // Show scroll wrapper when search is active
       [data-md-toggle="search"]:checked ~ .md-header & {
@@ -514,8 +514,8 @@
     font-size: px2rem(12.8px);
     line-height: px2rem(36px);
     color: var(--md-default-fg-color--light);
-    background-color: var(--md-default-fg-color--lightest);
     scroll-snap-align: start;
+    background-color: var(--md-default-fg-color--lightest);
 
     // [tablet landscape +]: Adjust spacing
     @include break-from-device(tablet landscape) {
@@ -545,9 +545,9 @@
   // Search result link
   &__link {
     display: block;
+    scroll-snap-align: start;
     outline: none;
     transition: background-color 250ms;
-    scroll-snap-align: start;
 
     // Search result link on focus/hover
     &:is(:focus, :hover) {
@@ -567,8 +567,8 @@
     z-index: 1;
     display: block;
     cursor: pointer;
-    outline: none;
     scroll-snap-align: start;
+    outline: none;
 
     // Hide native details marker
     &::marker {
@@ -643,8 +643,8 @@
       content: "";
       background-color: currentcolor;
       mask-image: var(--md-search-result-icon);
-      mask-position: center;
       mask-repeat: no-repeat;
+      mask-position: center;
       mask-size: contain;
 
       // Adjust for right-to-left languages

src/templates/assets/stylesheets/main/components/_select.scss

@@ -96,11 +96,11 @@
     width: 100%;
     padding-inline: px2rem(12px) px2rem(24px);
     cursor: pointer;
+    scroll-snap-align: start;
     outline: none;
     transition:
       background-color 250ms,
       color            250ms;
-    scroll-snap-align: start;
 
     // Link on focus/hover
     &:is(:focus, :hover) {

src/templates/assets/stylesheets/main/components/_sidebar.scss

@@ -44,6 +44,7 @@
     // [tablet -]: Show navigation as drawer
     @include break-to-device(tablet) {
       position: fixed;
+      inset-inline-start: px2rem(-242px);
       top: 0;
       z-index: 5;
       display: block;
@@ -54,7 +55,6 @@
         transform  250ms cubic-bezier(0.4, 0, 0.2, 1),
         box-shadow 250ms;
       transform: translateX(0);
-      inset-inline-start: px2rem(-242px);
 
       // Show sidebar when drawer is active
       [data-md-toggle="drawer"]:checked ~ .md-container & {
@@ -72,8 +72,8 @@
         position: absolute;
         inset: 0;
         margin: 0;
-        scroll-snap-type: none;
         overflow: hidden;
+        scroll-snap-type: none;
       }
     }
   }
@@ -123,15 +123,15 @@
   &__scrollwrap {
     margin: 0 px2rem(4px);
     overflow-y: auto;
-    // Hack: promote to own layer to reduce jitter
+    scrollbar-color: var(--md-default-fg-color--lighter) transparent;
-    backface-visibility: hidden;
+    scrollbar-gutter: stable;
     // Hack: Chrome 81+ exhibits a strange bug, where it scrolls the container
     // to the bottom if `scroll-snap-type` is set on the initial render. For
     // this reason, we disable scroll snapping until this is resolved (#1667).
     // scroll-snap-type: y mandatory;
     scrollbar-width: thin;
-    scrollbar-gutter: stable;
+    // Hack: promote to own layer to reduce jitter
-    scrollbar-color: var(--md-default-fg-color--lighter) transparent;
+    backface-visibility: hidden;
 
     // Webkit scrollbar
     &::-webkit-scrollbar {

src/templates/assets/stylesheets/main/components/_source.scss

@@ -149,8 +149,8 @@
       vertical-align: text-top;
       content: "";
       background-color: currentcolor;
-      mask-position: center;
       mask-repeat: no-repeat;
+      mask-position: center;
       mask-size: contain;
     }
 

src/templates/assets/stylesheets/main/components/_status.scss

@@ -46,8 +46,8 @@
     content: "";
     background-color: var(--md-default-fg-color--light);
     mask-image: var(--md-status);
-    mask-position: center;
     mask-repeat: no-repeat;
+    mask-position: center;
     mask-size: contain;
   }
 

src/templates/assets/stylesheets/main/components/_tag.scss

@@ -90,11 +90,11 @@
       vertical-align: text-bottom;
       content: "";
       background-color: var(--md-default-fg-color--lighter);
-      transition: background-color 125ms;
       mask-image: var(--md-tag-icon);
-      mask-position: center;
       mask-repeat: no-repeat;
+      mask-position: center;
       mask-size: contain;
+      transition: background-color 125ms;
     }
 
     // Linked tag on focus/hover

src/templates/assets/stylesheets/main/components/_tooltip.scss

@@ -211,8 +211,8 @@
         content: "";
         background: var(--md-default-bg-color);
         mask-image: var(--md-annotation-bg-icon);
-        mask-position: center;
         mask-repeat: no-repeat;
+        mask-position: center;
         mask-size: contain;
       }
 
@@ -228,15 +228,15 @@
         height: 2.2ch;
         content: "";
         background-color: var(--md-default-fg-color--lighter);
+        mask-image: var(--md-annotation-icon);
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
         transition:
           background-color 250ms,
           transform        250ms;
         // Hack: promote to own layer to reduce jitter
         transform: scale(1.0001);
-        mask-image: var(--md-annotation-icon);
-        mask-position: center;
-        mask-repeat: no-repeat;
-        mask-size: contain;
 
         // Annotation marker for active tooltip
         .md-tooltip--active + & {
@@ -296,8 +296,8 @@
       // Annotation list marker
       &::before {
         position: absolute;
-        top: px2em(4px);
         inset-inline-start: px2em(-34px);
+        top: px2em(4px);
         min-width: 2ch;
         height: 2ch;
         padding: 0 0.6ch;

src/templates/assets/stylesheets/main/components/_tooltip2.scss

@@ -42,10 +42,10 @@
       var(--md-tooltip-host-y) +
       var(--md-tooltip-y)
     );
-  inline-size: 100%;
   // Hack: set an explicit `z-index` so we can transition it to ensure that any
   // following elements are not overlaying the tooltip during the transition.
   z-index: 0;
+  inline-size: 100%;
   font-family: var(--md-text-font-family);
   color: var(--md-default-fg-color);
   pointer-events: none;
@@ -140,11 +140,11 @@
       );
     max-width: calc(100vw - 2 * #{px2rem(16px)});
     max-height: 40vh;
+    scrollbar-gutter: stable;
+    scrollbar-width: thin;
     background-color: var(--md-default-bg-color);
     border-radius: px2rem(2px);
     box-shadow: var(--md-shadow-z2);
-    scrollbar-width: thin;
-    scrollbar-gutter: stable;
 
     // Webkit scrollbar
     &::-webkit-scrollbar {

src/templates/assets/stylesheets/main/components/_version.scss

@@ -70,8 +70,8 @@
       content: "";
       background-color: currentcolor;
       mask-image: var(--md-version-icon);
-      mask-position: center;
       mask-repeat: no-repeat;
+      mask-position: center;
       mask-size: contain;
     }
   }
@@ -93,6 +93,7 @@
     overflow: auto;
     color: var(--md-default-fg-color);
     list-style-type: none;
+    scroll-snap-type: y mandatory;
     background-color: var(--md-default-bg-color);
     border-radius: px2rem(2px);
     box-shadow: var(--md-shadow-z2);
@@ -100,7 +101,6 @@
     transition:
       max-height 0ms 500ms,
       opacity  250ms 250ms;
-    scroll-snap-type: y mandatory;
 
     // Version selection list on parent focus/hover
     .md-version:is(:focus-within, :hover) & {
@@ -137,11 +137,11 @@
     padding-inline: px2rem(12px) px2rem(24px);
     white-space: nowrap;
     cursor: pointer;
+    scroll-snap-align: start;
     outline: none;
     transition:
       color            250ms,
       background-color 250ms;
-    scroll-snap-align: start;
 
     // Link on focus/hover
     &:is(:focus, :hover) {

src/templates/assets/stylesheets/main/extensions/markdown/_admonition.scss

@@ -140,15 +140,15 @@ $admonitions: (
     // Admonition icon
     &::before {
       position: absolute;
+      inset-inline-start: px2rem(12px);
       top: px2em(10px);
       width: px2rem(20px);
       height: px2rem(20px);
       content: "";
       background-color: $clr-blue-a200;
-      inset-inline-start: px2rem(12px);
       mask-image: var(--md-admonition-icon--note);
-      mask-position: center;
       mask-repeat: no-repeat;
+      mask-position: center;
       mask-size: contain;
     }
 

src/templates/assets/stylesheets/main/extensions/markdown/_footnotes.scss

@@ -129,8 +129,8 @@
       content: "";
       background-color: currentcolor;
       mask-image: var(--md-footnotes-icon);
-      mask-position: center;
       mask-repeat: no-repeat;
+      mask-position: center;
       mask-size: contain;
 
       // Adjust for right-to-left languages

src/templates/assets/stylesheets/main/extensions/pymdownx/_details.scss

@@ -91,18 +91,18 @@
     // Details marker
     &::after {
       position: absolute;
+      inset-inline-end: px2rem(8px);
       top: px2em(10px);
       width: px2rem(20px);
       height: px2rem(20px);
       content: "";
       background-color: currentcolor;
+      mask-image: var(--md-details-icon);
+      mask-repeat: no-repeat;
+      mask-position: center;
+      mask-size: contain;
       transition: transform 250ms;
       transform: rotate(0deg);
-      inset-inline-end: px2rem(8px);
-      mask-image: var(--md-details-icon);
-      mask-position: center;
-      mask-repeat: no-repeat;
-      mask-size: contain;
 
       // Adjust for right-to-left languages
       [dir="rtl"] & {

src/templates/assets/stylesheets/main/extensions/pymdownx/_tabbed.scss

@@ -95,9 +95,9 @@
     display: flex;
     max-width: 100%;
     overflow: auto;
+    scrollbar-width: none;             // Firefox
     box-shadow: 0 px2rem(-1px) var(--md-default-fg-color--lightest) inset;
     -ms-overflow-style: none;          // IE, Edge
-    scrollbar-width: none;             // Firefox
 
     // [print]: Move one layer up for ordering
     @media print {
@@ -146,12 +146,12 @@
       color: var(--md-default-fg-color--light);
       white-space: nowrap;
       cursor: pointer;
+      scroll-margin-inline-start: px2rem(20px);
       border-bottom: px2rem(2px) solid transparent;
       border-radius: px2rem(2px) px2rem(2px) 0 0;
       transition:
         background-color 250ms,
         color            250ms;
-      scroll-margin-inline-start: px2rem(20px);
 
       // [print]: Intersperse labels with containers
       @media print {
@@ -296,13 +296,13 @@
       height: 100%;
       content: "";
       background-color: currentcolor;
+      mask-image: var(--md-tabbed-icon--prev);
+      mask-repeat: no-repeat;
+      mask-position: center;
+      mask-size: contain;
       transition:
         background-color 250ms,
         transform        250ms;
-      mask-image: var(--md-tabbed-icon--prev);
-      mask-position: center;
-      mask-repeat: no-repeat;
-      mask-size: contain;
     }
   }
 

src/templates/assets/stylesheets/main/extensions/pymdownx/_tasklist.scss

@@ -44,8 +44,8 @@
     // everything in ems for correct layout at smaller font sizes
     [type="checkbox"] {
       position: absolute;
-      top: 0.45em;
       inset-inline-start: -2em;
+      top: 0.45em;
     }
   }
 
@@ -58,15 +58,15 @@
   // Tasklist indicator in unchecked state
   .task-list-indicator::before {
     position: absolute;
+    inset-inline-start: px2em(-24px);
     top: 0.15em;
     width: px2em(20px);
     height: px2em(20px);
     content: "";
     background-color: var(--md-default-fg-color--lightest);
-    inset-inline-start: px2em(-24px);
     mask-image: var(--md-tasklist-icon);
-    mask-position: center;
     mask-repeat: no-repeat;
+    mask-position: center;
     mask-size: contain;
   }