Enable stylelint-scss rules, do necessary fixups

I haven't gone through the base stylelint rules yet, but this was from a
full look through all of the stylelint-scss ones, enabling all of the
ones that suit the SCSS style and doing the necessary fixups to the
code. Not many fixes were necessary, most was related to redundant "& >"
selectors that I didn't realize were unnecessary.

tildes/package.json

@@ -50,9 +50,49 @@
       "stylelint-scss"
     ],
     "rules": {
+      "block-closing-brace-newline-after": [
+        "always",
+        {"ignoreAtRules": ["else", "if"]}
+      ],
       "indentation": 2,
       "no-descending-specificity": null,
-      "string-quotes": "double"
+      "string-quotes": "double",
+      "scss/at-else-closing-brace-newline-after": "always-last-in-chain",
+      "scss/at-else-closing-brace-space-after": "always-intermediate",
+      "scss/at-else-empty-line-before": "never",
+      "scss/at-else-if-parentheses-space-before": "always",
+      "scss/at-extend-no-missing-placeholder": true,
+      "scss/at-function-parentheses-space-before": "never",
+      "scss/at-function-pattern": "^[a-z-]+$",
+      "scss/at-if-closing-brace-newline-after": "always-last-in-chain",
+      "scss/at-if-closing-brace-space-after": "always-intermediate",
+      "scss/at-import-no-partial-leading-underscore": true,
+      "scss/at-mixin-argumentless-call-parentheses": "never",
+      "scss/at-mixin-parentheses-space-before": "never",
+      "scss/at-mixin-pattern": "^[a-z-]+$",
+      "scss/at-rule-no-unknown": true,
+      "scss/declaration-nested-properties": "never",
+      "scss/dollar-variable-colon-newline-after": "always-multi-line",
+      "scss/dollar-variable-colon-space-after": "always-single-line",
+      "scss/dollar-variable-colon-space-before": "never",
+      "scss/dollar-variable-empty-line-before": [
+        "always",
+        {"except": ["after-comment", "after-dollar-variable", "first-nested"]}
+      ],
+      "scss/dollar-variable-no-missing-interpolation": true,
+      "scss/dollar-variable-pattern": "^[a-z-]+$",
+      "scss/double-slash-comment-empty-line-before": [
+        "always", {
+          "except": ["first-nested"],
+          "ignore": ["between-comments", "stylelint-commands"]
+        }
+      ],
+      "scss/double-slash-comment-whitespace-inside": "always",
+      "scss/operator-no-newline-after": true,
+      "scss/operator-no-newline-before": true,
+      "scss/operator-no-unspaced": true,
+      "scss/percent-placeholder-pattern": "^[a-z-]+$",
+      "scss/selector-no-redundant-nesting-selector": true
     }
   }
 }

tildes/scss/_base.scss

@@ -20,7 +20,7 @@ blockquote {
   border-left: 1px dotted;
 
   // nested blockquotes need reduced margin/padding
-  & > blockquote {
+  > blockquote {
     margin: 0;
     margin-bottom: 0.2rem;
     padding-top: 0;

tildes/scss/_spectre_variables.scss

@@ -5,6 +5,7 @@
 
 $primary-color: #268bd2;  // Solarized
 
+// Remove the rounded corners on various elements
 $border-radius: 0;
 
 // Responsive breakpoints
@@ -13,4 +14,4 @@ $size-sm: 600px;
 $size-md: $show-sidebar-width;
 $size-lg: 960px;
 $size-xl: 1200px;
-$size-2x: 1500px;
+$size-2x: 1500px;  // stylelint-disable scss/dollar-variable-pattern

tildes/scss/modules/_comment.scss

@@ -155,7 +155,7 @@
 }
 
 .is-comment-by-op {
-  & > .comment-itself {
+  > .comment-itself {
     margin-left: -2px;
     border-left: 3px solid;
 
@@ -208,7 +208,7 @@
 // uses @extend to only collapse everything inside the collapsed comment itself and
 // not its replies
 .is-comment-collapsed-individual:not(:target) {
-  & > .comment-itself {
+  > .comment-itself {
     @extend %collapsed;
   }
 }
@@ -219,21 +219,21 @@
 }
 
 .is-comment-mine {
-  & > .comment-itself {
+  > .comment-itself {
     margin-left: -2px;
     border-left: 3px solid;
   }
 }
 
 .is-comment-new {
-  & > .comment-itself {
+  > .comment-itself {
     margin-left: -2px;
     border-left: 3px solid;
   }
 }
 
 .is-comment-exemplary {
-  & > .comment-itself {
+  > .comment-itself {
     margin-left: -2px;
     border-left: 3px solid;
   }
@@ -251,18 +251,19 @@
   @if ($depth < 2) {
     @error "Starting depth must be at least 2";
   }
+
   $depth: $depth - 2;
 
   .comment[data-comment-depth="#{$depth}"] {
     .comment[data-comment-replies="1"] > .comment-tree-replies > .comment-tree-item {
-      & > .comment[data-comment-replies="1"] {
-        & > .comment-tree-replies {
+      > .comment[data-comment-replies="1"] {
+        > .comment-tree-replies {
           margin-left: -1px;  // compensate for border
 
-          & > .comment-tree-item > .comment > .comment-itself {
-            & > .comment-text::before,
-            & > header > .is-comment-deleted::before,
-            & > header > .is-comment-removed::before {
+          > .comment-tree-item > .comment > .comment-itself {
+            > .comment-text::before,
+            > header > .is-comment-deleted::before,
+            > header > .is-comment-removed::before {
               content: "(Reply to above comment)";
               font-size: 0.6rem;
               font-style: italic;

tildes/scss/modules/_menu.scss

@@ -3,7 +3,7 @@
 
 .menu {
   .menu-item {
-    & > a:hover, & > a:focus {
+    > a:hover, > a:focus {
       background-color: transparent;
     }
   }

tildes/scss/modules/_post.scss

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 .post-listing {
-  & > li {
+  > li {
     margin-bottom: 1rem;
   }
 

tildes/scss/modules/_site-header.scss

@@ -24,7 +24,7 @@
 }
 
 .site-header-logo {
-  background-image: url(/favicon-32x32.png);
+  background-image: url("/favicon-32x32.png");
   background-repeat: no-repeat;
 
   // keep the logo pixelated - "pixelated" is best but Firefox only supports

tildes/scss/styles.scss

@@ -1,5 +1,5 @@
 @import "variables";
-@import "spectre-0.5.1/_variables.scss";
+@import "spectre-0.5.1/variables";
 
 @import "mixins";
 @import "placeholders";

tildes/scss/themes/_atom_one_dark.scss

@@ -1,10 +1,12 @@
 // Colours from Atom One Dark Syntax: https://github.com/atom/atom/blob/master/packages/one-dark-syntax/styles/colors.less
 
+// Base colors
 $background: hsl(220, 13%, 18%);
 $background-alt: #21242b;
 $foreground: hsl(220, 14%, 71%);
 $foreground-alt: hsl(220, 9%, 55%);
 
+// Accent colors
 $cyan: hsl(187, 47%, 55%);
 $blue: hsl(207, 82%, 66%);
 $purple: hsl(286, 60%, 67%);
@@ -12,6 +14,7 @@ $green: hsl(95, 38%, 62%);
 $red: hsl(355, 65%, 65%);
 $orange: hsl(29, 54%, 61%);
 
+// Actual theme definition
 $theme-atom-one-dark: (
   "alert": $orange,
   "background-primary": $background,

tildes/scss/themes/_default.scss

@@ -1,5 +1,4 @@
 // Contains the default Tildes theme
-
 $default-theme: (
   "alert": #e66b00,
   "background-primary": #fff,

tildes/scss/themes/_dracula.scss

@@ -1,10 +1,12 @@
 // Color palette is Zeno Rocha's "Dracula" (https://draculatheme.com/)
 
+// Base colors
 $background: #282a36;
 $background-alt: #44475a;
 $foreground: #f8f8f2;
 $foreground-alt: #6272a4;
 
+// Accent colors
 $cyan: #8be9fd;
 $green: #50fa7b;
 $orange: #ffb86c;
@@ -13,6 +15,7 @@ $purple: #bd93f9;
 $red: #ff5555;
 $yellow: #f1fa8c;
 
+// Actual theme definition
 $theme-dracula: (
   "alert": $orange,
   "background-primary": $background,

tildes/scss/themes/_solarized.scss

@@ -2,6 +2,7 @@
 // (http://ethanschoonover.com/solarized)
 
 // "Official" color names from Solarized
+// stylelint-disable scss/dollar-variable-pattern
 $base03: #002b36;
 $base02: #073642;
 $base01: #586e75;
@@ -10,7 +11,9 @@ $base0: #839496;
 $base1: #93a1a1;
 $base2: #eee8d5;
 $base3: #fdf6e3;
+// stylelint-enable scss/dollar-variable-pattern
 
+// Accent colors
 $blue: #268bd2;
 $cyan: #2aa198;
 $green: #859900;
@@ -25,14 +28,12 @@ $bg-darkest: $base03;
 $bg-dark: $base02;
 $bg-light: $base2;
 $bg-lightest: $base3;
-
 $fg-darkest: $base01;
 $fg-dark: $base00;
 $fg-light: $base0;
 $fg-lightest: $base1;
 
-// Actual themes below:
-
+// Shared between both "light" and "dark" variants
 $solarized-base: (
   "alert": $orange,
   "comment-label-exemplary": $blue,
@@ -52,29 +53,33 @@ $solarized-base: (
   "warning": $yellow,
 );
 
-$theme-dark: map-merge($solarized-base, (
-  "background-input": #001f27,
-  "background-primary": $bg-darkest,
-  "background-secondary": $bg-dark,
-  "border": #33555e,
-  "foreground-highlight": $fg-lightest,
-  "foreground-primary": $fg-light,
-  "foreground-secondary": $fg-darkest,
-));
+// Dark theme definition
+$theme-dark:
+  map-merge($solarized-base, (
+    "background-input": #001f27,
+    "background-primary": $bg-darkest,
+    "background-secondary": $bg-dark,
+    "border": #33555e,
+    "foreground-highlight": $fg-lightest,
+    "foreground-primary": $fg-light,
+    "foreground-secondary": $fg-darkest,
+  ));
 
 body.theme-dark {
   @include use-theme($theme-dark);
 }
 
-$theme-light: map-merge($solarized-base, (
-  "background-input": #fefbf1,
-  "background-primary": $bg-lightest,
-  "background-secondary": $bg-light,
-  "border": #cbc5b6,
-  "foreground-highlight": $fg-darkest,
-  "foreground-primary": $fg-dark,
-  "foreground-secondary": $fg-lightest,
-));
+// Light theme definition
+$theme-light:
+  map-merge($solarized-base, (
+    "background-input": #fefbf1,
+    "background-primary": $bg-lightest,
+    "background-secondary": $bg-light,
+    "border": #cbc5b6,
+    "foreground-highlight": $fg-darkest,
+    "foreground-primary": $fg-dark,
+    "foreground-secondary": $fg-lightest,
+  ));
 
 body.theme-light {
   @include use-theme($theme-light);

tildes/scss/themes/_theme_base.scss

@@ -271,7 +271,7 @@
   }
 
   .is-comment-collapsed-individual:not(:target) {
-    & > .comment-itself {
+    > .comment-itself {
       @extend %collapsed-theme;
     }
   }
@@ -478,7 +478,7 @@
   }
 
   .topic-listing {
-    & > li:nth-of-type(2n) {
+    > li:nth-of-type(2n) {
       color: mix(map-get($theme, "foreground-primary"), map-get($theme, "foreground-highlight"));
       background-color: mix(map-get($theme, "background-primary"), map-get($theme, "background-secondary"));
     }
@@ -539,7 +539,7 @@
   }
 
   .is-comment-new {
-    & > .comment-itself {
+    > .comment-itself {
       border-left-color: map-get($theme, "alert");
     }
 
@@ -549,7 +549,7 @@
   }
 
   .is-comment-exemplary {
-    & > .comment-itself {
+    > .comment-itself {
       border-left-color: map-get($theme, "comment-label-exemplary");
     }
   }