Migrate SCSS linting to stylelint 17 and run autofix pass

.stylelintrc.json

@@ -2,12 +2,8 @@
   "extends": "stylelint-config-standard-scss",
   "rules": {
     "no-empty-source": null,
-    "string-quotes": "double",
     "scss/comment-no-empty": null,
-    "max-line-length": null,
     "scss/at-extend-no-missing-placeholder": null,
-    "scss/dollar-variable-colon-space-after": null,
-    "scss/dollar-variable-empty-line-before": null,
     "color-function-notation": null,
     "alpha-value-notation": null,
     "selector-id-pattern": null,
@@ -17,25 +13,19 @@
     "hue-degree-notation": null,
     "value-no-vendor-prefix": null,
     "property-no-vendor-prefix": null,
-    "at-rule-no-unknown": [
+    "custom-property-pattern": null,
+    "keyframes-name-pattern": null,
+    "scss/dollar-variable-pattern": null,
+    "no-descending-specificity": null,
+    "declaration-block-no-redundant-longhand-properties": null,
+    "shorthand-property-no-redundant-values": null,
+    "media-feature-range-notation": null,
+    "color-function-alias-notation": null,
+    "scss/load-partial-extension": null,
+    "scss/at-rule-no-unknown": [
       true,
       {
         "ignoreAtRules": [
-          "extend",
-          "at-root",
-          "debug",
-          "warn",
-          "error",
-          "if",
-          "else",
-          "for",
-          "each",
-          "while",
-          "mixin",
-          "include",
-          "content",
-          "return",
-          "function",
           "tailwind",
           "apply",
           "responsive",
@@ -45,4 +35,4 @@
       }
     ]
   }
-}
+}

assets/scss/common/_breakpoints.scss

@@ -4,5 +4,6 @@ $HideTocWidth: 1024px;
 $MobileLayoutWidth: 672px;
 $ReduceContentPaddingWidth: 1440px;
 $SidebarWidth: 264px;
+
 // Right nav has margins
 $RightNavWidth: calc(264px - 12px - 12px);

assets/scss/common/_custom.scss

@@ -1,21 +1,20 @@
 @font-face {
     font-display: swap;
-    font-family: "Gellix";
+    font-family: Gellix;
     font-style: normal;
     font-weight: 400;
     src: url("/fonts/Gellix-Regular.woff2") format("woff2");
 }
 
 @font-face {
     font-display: swap;
-    font-family: "Gellix";
+    font-family: Gellix;
     font-style: normal;
     font-weight: 700;
     src: url("/fonts/Gellix-Bold.woff2") format("woff2");
 }
 
-@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
-
+@import "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css";
 @import "resets";
 @import "fontfamilies";
 @import "breakpoints";
@@ -49,7 +48,6 @@ html[data-dark-mode] .logo-purple {
 
 // Override for automatic detection
 @media (prefers-color-scheme: light) {
-
     img[src="/logos/linky-flat.svg"],
     .logo-purple {
         filter: none !important;
@@ -62,7 +60,6 @@ html[data-dark-mode] .logo-purple {
 }
 
 @media (prefers-color-scheme: dark) {
-
     html:not([data-dark-mode="false"]) img[src="/logos/linky-flat-white.svg"],
     html:not([data-dark-mode="false"]) .logo-purple {
         filter: brightness(0) invert(1) !important;
@@ -98,7 +95,7 @@ html[data-dark-mode] .logo-purple {
 .docs-content {
     padding-bottom: 0;
     margin-left: 0 em;
-    padding: 0em;
+    padding: 0;
 }
 
 .docs-content>h1:first-child {
@@ -108,17 +105,18 @@ html[data-dark-mode] .logo-purple {
 // tag history page image digests are long, wrap them
 .docs-content>table>tbody>tr>td:nth-child(3)>code {
     max-width: 320px;
-    word-wrap: anywhere;
+    overflow-wrap: anywhere;
 }
 
 .docs-content>table {
     --bs-table-bg: transparent !important;
+
     table-layout: fixed;
-    word-wrap: anywhere;
+    overflow-wrap: anywhere;
 }
 
 .docs-content>table>code {
-    word-wrap: anywhere;
+    overflow-wrap: anywhere;
 }
 
 // Beat <a> reset
@@ -147,7 +145,7 @@ html[data-dark-mode] .logo-purple {
     display: flex;
     justify-content: center;
     align-items: center;
-    background: #ffffff;
+    background: #fff;
     border: 1px solid rgba(13, 22, 28, 0.1);
     border-radius: 12px;
     width: 100%;
@@ -252,6 +250,7 @@ h2[id^="chainctl"] {
     border: 1px solid var(--pills-icon);
     border-radius: 4px;
     cursor: pointer;
+
     // Be under search overlay
     z-index: -1;
     position: relative;
@@ -277,8 +276,8 @@ h2[id^="chainctl"] {
 }
 
 .install-text-container {
-    padding-left: 0px !important;
-    padding-right: 0px !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
     align-items: start;
 }
 
@@ -315,10 +314,10 @@ h2[id^="chainctl"] {
 }
 
 .section-row-container {
-    margin-left: 0px !important;
-    padding-left: 0px !important;
-    margin-right: 0px !important;
-    padding-right: 0px !important;
+    margin-left: 0 !important;
+    padding-left: 0 !important;
+    margin-right: 0 !important;
+    padding-right: 0 !important;
 }
 
 .section-title {
@@ -498,20 +497,13 @@ h2[id^="chainctl"] {
 
 .search-content {
     position: absolute !important;
-    left: 32px !important;
     display: flex;
-    flex-direction: row;
-    align-items: center;
     padding: 4px 8px;
-
-    width: 216px;
-    height: 28px;
     font-family: $TextFont;
     font-style: normal;
     font-weight: 500;
     font-size: 14px;
     line-height: 20px;
-
     top: 160px !important;
     height: auto;
     left: 24px !important;
@@ -662,7 +654,7 @@ header .search-container {
 
     .active {
         color: var(--tab-active-color);
-        box-shadow: 0px 1px 0px var(--tabs-active-color);
+        box-shadow: 0 1px 0 var(--tabs-active-color);
     }
 }
 
@@ -803,14 +795,17 @@ header .search-container {
     overflow-x: visible;
     padding-right: 12px;
     -ms-overflow-style: none;
+
     /* Internet Explorer 10+ */
     scrollbar-width: none;
+
     /* Firefox */
 }
 
 
 #sidebar-default::-webkit-scrollbar {
     display: none;
+
     /* Safari and Chrome */
 }
 
@@ -883,6 +878,7 @@ header .search-container {
 
 .footer-social-icons img {
     padding: .5em;
+
     // transform: scale(1);
 }
 
@@ -894,13 +890,13 @@ header .search-container {
 .footer-column-container {
     display: flex;
     padding: 0 10%;
+
     // gap: .5em;
     justify-content: center;
     flex-wrap: wrap;
 }
 
 @media (min-width: 673px) {
-
     .footer-column-left,
     .footer-column-right {
         display: contents;
@@ -1007,6 +1003,7 @@ header .search-container {
     border-color: var(--suggestions-border);
     background-color: var(--suggestions-background) !important;
     z-index: 1002;
+
     // Account for padding
     max-width: calc(100dvw - 48px);
     position: fixed !important;
@@ -1249,28 +1246,24 @@ header .search-container {
 
 // Pure CSS menu item nesting
 .sidebar-item-list-item {
-
     .sidebar-subcategory,
     .sidebar-item>button {
         padding-left: 12px;
     }
 
     .sidebar-item-list-item {
-
         .sidebar-subcategory,
         .sidebar-item>button {
             padding-left: 24px;
         }
 
         .sidebar-item-list-item {
-
             .sidebar-subcategory,
             .sidebar-item>button {
                 padding-left: 36px;
             }
 
             .sidebar-item-list-item {
-
                 .sidebar-subcategory,
                 .sidebar-item>button {
                     padding-left: 48px;
@@ -1362,7 +1355,6 @@ header .search-container {
 }
 
 @keyframes toast {
-
     0%,
     100% {
         opacity: 0;
@@ -1378,6 +1370,7 @@ header .search-container {
     display: inline-block;
     text-align: center;
     vertical-align: bottom;
+
     // With inherent text spacing, adds up to 12
     margin-right: 5px;
     width: 31px;
@@ -1423,7 +1416,6 @@ header .search-container {
 
 // Cap content to a constant on big screen size
 @media (min-width: $MaxContentLayoutWidth) {
-
     .docs-content,
     .docs-content.has-toc {
         max-width: $MaxContentWidth;
@@ -1432,7 +1424,6 @@ header .search-container {
 
 // Cap content at 100% in mobile layout
 @media (max-width: $MobileLayoutWidth) {
-
     .docs-content,
     .docs-content.has-toc {
         max-width: 100%;
@@ -1447,7 +1438,6 @@ header .search-container {
 }
 
 [data-dark-mode] .docs-content.docs-content {
-
     a.sl-block,
     a.sl-link {
         color: var(--article-link-secondary-color);
@@ -1476,7 +1466,7 @@ blockquote p a {
     font-size: 1.25em;
     text-align: center;
     max-width: 80ch;
-    word-wrap: break-word;
+    overflow-wrap: break-word;
     overflow-wrap: break-word;
 
     a {
@@ -1508,6 +1498,7 @@ blockquote p a {
     width: auto;
     height: auto;
     object-fit: contain;
+
     /* Optional but recommended to prevent any stretching */
     scale: 1;
     transform: scale(1);
@@ -1522,6 +1513,7 @@ blockquote p a {
     width: auto;
     max-width: 100%;
 }
+
 .tabs-nav {
   display: flex;
   flex-wrap: wrap;

assets/scss/common/_fontfamilies.scss

@@ -1,3 +1,3 @@
-$TextFont: "Gellix", "Helvetica Neue", Arial, sans-serif;
-$titleFont: "Gellix", "Helvetica Neue", Arial, sans-serif;
+$TextFont: "Gellix", "Helvetica Neue", arial, sans-serif;
+$titleFont: "Gellix", "Helvetica Neue", arial, sans-serif;
 $monoFont: ui-monospace, "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;