Enable stylelint rules, do necessary fixups

Well, that was quite a slog.

tildes/package.json

@@ -50,13 +50,111 @@
       "stylelint-scss"
     ],
     "rules": {
+      "at-rule-empty-line-before": [
+        "always", {
+          "except": ["blockless-after-same-name-blockless", "first-nested"],
+          "ignore": ["after-comment"],
+          "ignoreAtRules": ["else"]
+        }
+      ],
+      "at-rule-name-case": "lower",
+      "at-rule-name-space-after": "always",
+      "at-rule-semicolon-newline-after": "always",
+      "at-rule-semicolon-space-before": "never",
+      "block-closing-brace-empty-line-before": "never",
       "block-closing-brace-newline-after": [
         "always",
         {"ignoreAtRules": ["else", "if"]}
       ],
+      "block-closing-brace-newline-before": "always",
+      "block-no-empty": true,
+      "block-opening-brace-newline-after": "always",
+      "block-opening-brace-space-before": "always",
+      "color-hex-case": "lower",
+      "color-named": "never",
+      "color-no-invalid-hex": true,
+      "comment-empty-line-before": "always",
+      "comment-no-empty": true,
+      "comment-whitespace-inside": "always",
+      "declaration-bang-space-after": "never",
+      "declaration-bang-space-before": "always",
+      "declaration-block-no-duplicate-properties": true,
+      "declaration-block-no-shorthand-property-overrides": true,
+      "declaration-block-semicolon-newline-after": "always",
+      "declaration-block-semicolon-newline-before": "never-multi-line",
+      "declaration-block-semicolon-space-before": "never",
+      "declaration-block-trailing-semicolon": "always",
+      "declaration-colon-newline-after": "always-multi-line",
+      "declaration-colon-space-before": "never",
+      "font-family-no-duplicate-names": true,
+      "font-family-no-missing-generic-family-keyword": true,
+      "font-weight-notation": "named-where-possible",
+      "function-calc-no-unspaced-operator": true,
+      "function-comma-newline-after": "always-multi-line",
+      "function-comma-space-after": "always-single-line",
+      "function-comma-space-before": "never",
+      "function-max-empty-lines": 0,
+      "function-name-case": "lower",
+      "function-parentheses-newline-inside": "always-multi-line",
+      "function-parentheses-space-inside": "never-single-line",
+      "function-url-quotes": "always",
+      "function-url-scheme-whitelist": "https",
+      "function-whitespace-after": "always",
       "indentation": 2,
-      "no-descending-specificity": null,
+      "length-zero-no-unit": true,
+      "linebreaks": "unix",
+      "max-empty-lines": 1,
+      "max-line-length": 88,
+      "media-feature-colon-space-after": "always",
+      "media-feature-colon-space-before": "never",
+      "media-feature-name-case": "lower",
+      "media-feature-name-no-unknown": true,
+      "media-feature-parentheses-space-inside": "never",
+      "media-feature-range-operator-space-after": "always",
+      "media-feature-range-operator-space-before": "always",
+      "no-duplicate-at-import-rules": true,
+      "no-duplicate-selectors": true,
+      "no-empty-first-line": true,
+      "no-empty-source": true,
+      "no-eol-whitespace": true,
+      "no-extra-semicolons": true,
+      "no-invalid-double-slash-comments": true,
+      "no-missing-end-of-source-newline": true,
+      "number-leading-zero": "always",
+      "number-no-trailing-zeros": true,
+      "number-max-precision": 1,
+      "property-case": "lower",
+      "property-no-unknown": true,
+      "rule-empty-line-before": [
+        "always",
+        {"except": ["first-nested"], "ignore": ["after-comment"]}
+      ],
+      "selector-attribute-brackets-space-inside": "never",
+      "selector-attribute-operator-space-after": "never",
+      "selector-attribute-operator-space-before": "never",
+      "selector-attribute-quotes": "always",
+      "selector-combinator-space-after": "always",
+      "selector-combinator-space-before": "always",
+      "selector-descendant-combinator-no-non-space": true,
+      "selector-list-comma-newline-before": "never-multi-line",
+      "selector-max-empty-lines": 0,
+      "selector-pseudo-class-case": "lower",
+      "selector-pseudo-class-no-unknown": true,
+      "selector-pseudo-class-parentheses-space-inside": "never",
+      "selector-pseudo-element-case": "lower",
+      "selector-pseudo-element-colon-notation": "double",
+      "selector-pseudo-element-no-unknown": true,
+      "selector-type-case": "lower",
+      "selector-type-no-unknown": true,
+      "shorthand-property-no-redundant-values": true,
+      "string-no-newline": true,
       "string-quotes": "double",
+      "unit-case": "lower",
+      "unit-no-unknown": true,
+      "unit-whitelist": ["%", "fr", "px", "rem", "vh", "vw"],
+      "value-keyword-case": "lower",
+      "value-list-max-empty-lines": 0,
+      "value-no-vendor-prefix": true,
       "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",

tildes/scss/_base.scss

@@ -116,7 +116,7 @@ h6 {
 
 hr {
   border-style: solid;
-  border-width: 0 0 1px 0;
+  border-width: 0 0 1px;
 }
 
 legend {

tildes/scss/_layout.scss

@@ -25,7 +25,10 @@ body {
 }
 
 .l-no-sidebar {
-  grid-template-columns: 1fr minmax(auto, calc(#{$main-max-width} + #{$sidebar-width} + 0.4rem)) 1fr;
+  grid-template-columns:
+    1fr
+    minmax(auto, calc(#{$main-max-width} + #{$sidebar-width} + 0.4rem))
+    1fr;
   grid-template-areas:
     ". header ."
     ". main   ."
@@ -73,8 +76,9 @@ body {
 }
 
 #sidebar {
-  /* hidden by default, show on wider screens */
+  // hidden by default, show on wider screens
   display: none;
+
   @media (min-width: $show-sidebar-width) {
     display: block;
     grid-area: sidebar;

tildes/scss/_mixins.scss

@@ -4,16 +4,17 @@
 // shrinks a font size by 0.1rem on mobile screen sizes
 @mixin font-shrink-on-mobile($base-size) {
   font-size: $base-size - 0.1rem;
+
   @media (min-width: $size-md) {
     font-size: $base-size;
   }
 }
 
-
 // makes sure the element is the "minimum touch size" on mobile
 @mixin min-touch-size() {
   min-width: $min-touch-size;
   min-height: $min-touch-size;
+
   @media (min-width: $size-md) {
     min-width: 0;
     min-height: 0;

tildes/scss/modules/_btn.scss

@@ -39,6 +39,7 @@
   }
 
   margin-right: 0.4rem;
+
   @media (min-width: $size-md) {
     margin-right: 0.2rem;
     min-width: 0.8rem;

tildes/scss/modules/_comment.scss

@@ -22,6 +22,7 @@
 
   // no padding on mobile - the collapse button will do the job
   padding: 0 0.2rem 0 0;
+
   @media (min-width: $size-md) {
     padding: 0.2rem;
   }
@@ -82,6 +83,7 @@
   font-size: 0.6rem;
 
   margin-left: 0.4rem;
+
   @media (min-width: $size-md) {
     margin-left: 1rem;
   }
@@ -279,26 +281,33 @@
 @media (max-width: $size-xs) {
   @include flatten-single-replies-above-depth(4);
 }
+
 @media (min-width: $size-xs) and (max-width: $size-sm) {
   @include flatten-single-replies-above-depth(7);
 }
+
 @media (min-width: $size-sm) and (max-width: $size-md) {
   @include flatten-single-replies-above-depth(10);
 }
+
 @media (min-width: $size-md) and (max-width: $size-lg) {
   // drop back down because sidebar shows up, which actually gives less space
   @include flatten-single-replies-above-depth(7);
 }
+
 @media (min-width: $size-lg) and (max-width: $size-xl) {
   @include flatten-single-replies-above-depth(9);
 }
+
 @media (min-width: $size-xl) and (max-width: $size-2x) {
   // don't increase much yet since left indent increases, so space is reduced again
   @include flatten-single-replies-above-depth(12);
 }
+
 @media (min-width: $size-2x) and (max-width: $size-max) {
   @include flatten-single-replies-above-depth(20);
 }
+
 @media (min-width: $size-max) {
   @include flatten-single-replies-above-depth(30);
 }

tildes/scss/modules/_listing.scss

@@ -9,6 +9,7 @@
 
   // right-align the period dropdown at small sizes, left-align at larger
   justify-content: flex-end;
+
   @media (min-width: $size-md) {
     justify-content: flex-start;
   }

tildes/scss/modules/_sidebar.scss

@@ -35,6 +35,7 @@
 
 .sidebar-controls {
   display: flex;
+
   @media (min-width: $show-sidebar-width) {
     display: none;
   }
@@ -48,7 +49,6 @@
 
 .is-sidebar-displayed {
   @media (max-width: $show-sidebar-width) {
-
     display: block !important;
     position: absolute;
     right: 0;

tildes/scss/modules/_site-header.scss

@@ -9,6 +9,7 @@
   .logged-in-user-info {
     // hidden on small screens
     display: none;
+
     @media (min-width: $show-sidebar-width) {
       display: flex;
     }
@@ -30,6 +31,7 @@
   // keep the logo pixelated - "pixelated" is best but Firefox only supports
   // "crisp-edges" as of Firefox 68
   image-rendering: pixelated;
+
   @supports not (image-rendering: pixelated) {
     image-rendering: crisp-edges;
   }

tildes/scss/modules/_tab.scss

@@ -24,6 +24,7 @@
 
   // have the tabs span the full width at small sizes
   width: 100%;
+
   @media (min-width: $size-md) {
     width: auto;
   }
@@ -33,6 +34,7 @@
 
     a {
       margin-right: 0;
+
       @media (min-width: $size-md) {
         margin-right: 1rem;
       }

tildes/scss/modules/_topic.scss

@@ -33,6 +33,7 @@
   position: relative;
 
   padding: 0.2rem;
+
   @media (min-width: $size-sm) {
     padding: 0.4rem;
   }
@@ -163,6 +164,7 @@
   @extend %text-container;
 
   display: none;
+
   @media (min-width: $size-md) {
     display: block;
   }
@@ -173,7 +175,7 @@
   font-style: italic;
 
   h1 {
-    margin: 0 0 0.4rem 0;
+    margin: 0 0 0.4rem;
   }
 
   summary {
@@ -207,6 +209,7 @@
 .topic-info {
   display: grid;
   grid-template-columns: 1fr 1.5fr 0.7fr;
+
   @media (min-width: $size-sm) {
     grid-template-columns: 1fr 1.2fr 1fr;
   }

tildes/scss/styles.scss

@@ -1,3 +1,4 @@
+// stylelint-disable at-rule-empty-line-before
 @import "variables";
 @import "spectre-0.5.1/variables";
 

tildes/scss/themes/_atom_one_dark.scss

@@ -1,4 +1,5 @@
-// Colours from Atom One Dark Syntax: https://github.com/atom/atom/blob/master/packages/one-dark-syntax/styles/colors.less
+// 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%);

tildes/scss/themes/_solarized.scss

@@ -54,33 +54,31 @@ $solarized-base: (
 );
 
 // 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,
-  ));
+$solarized-dark: (
+  "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);
+  @include use-theme(map-merge($solarized-base, $solarized-dark));
 }
 
 // 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,
-  ));
+$solarized-light: (
+  "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);
+  @include use-theme(map-merge($solarized-base, $solarized-light));
 }

tildes/scss/themes/_theme_base.scss

@@ -215,6 +215,7 @@
 
       $active-color: #fff;
       $is-active-bg-light: lightness(map-get($theme, "button")) > 50;
+
       @if ($is-active-bg-light) {
         $active-color: #000;
       }
@@ -479,8 +480,16 @@
 
   .topic-listing {
     > 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"));
+      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")
+        );
     }
   }
 
@@ -657,7 +666,7 @@
       font-style: italic;
     } // Generic.Emph
     .syntax-gr {
-      color:  map-get($theme, "syntax-constant");
+      color: map-get($theme, "syntax-constant");
     } // Generic.Error
     .syntax-gh {
       color: map-get($theme, "syntax-constant");
@@ -685,7 +694,7 @@
       color: map-get($theme, "syntax-constant");
     } // Keyword.Constant
     .syntax-kd {
-      color:  map-get($theme, "syntax-keyword");
+      color: map-get($theme, "syntax-keyword");
     } // Keyword.Declaration
     .syntax-kn {
       color: map-get($theme, "syntax-comment");
@@ -694,7 +703,7 @@
       color: map-get($theme, "syntax-comment");
     } // Keyword.Pseudo
     .syntax-kr {
-      color:  map-get($theme, "syntax-keyword");
+      color: map-get($theme, "syntax-keyword");
     } // Keyword.Reserved
     .syntax-kt {
       color: map-get($theme, "syntax-keyword");
@@ -712,16 +721,16 @@
       color: map-get($theme, "foreground");
     } // Name.Attribute
     .syntax-nb {
-      color:  map-get($theme, "syntax-builtin");
+      color: map-get($theme, "syntax-builtin");
     } // Name.Builtin
     .syntax-nc {
-      color:  map-get($theme, "syntax-keyword");
+      color: map-get($theme, "syntax-keyword");
     } // Name.Class
     .syntax-no {
       color: map-get($theme, "syntax-constant");
     } // Name.Constant
     .syntax-nd {
-      color:  map-get($theme, "syntax-keyword");
+      color: map-get($theme, "syntax-keyword");
     } // Name.Decorator
     .syntax-ni {
       color: map-get($theme, "syntax-builtin");
@@ -730,7 +739,7 @@
       color: map-get($theme, "syntax-builtin");
     } // Name.Exception
     .syntax-nf {
-      color:  map-get($theme, "syntax-builtin");
+      color: map-get($theme, "syntax-builtin");
     } // Name.Function
     .syntax-nl {
       color: map-get($theme, "foreground");
@@ -745,10 +754,10 @@
       color: map-get($theme, "foreground");
     } // Name.Property
     .syntax-nt {
-      color:  map-get($theme, "syntax-keyword");
+      color: map-get($theme, "syntax-keyword");
     } // Name.Tag
     .syntax-nv {
-      color:  map-get($theme, "syntax-keyword");
+      color: map-get($theme, "syntax-keyword");
     } // Name.Variable
     .syntax-ow {
       color: map-get($theme, "syntax-comment");
@@ -793,7 +802,7 @@
       color: map-get($theme, "syntax-string");
     } // Literal.String.Other
     .syntax-sr {
-      color:  map-get($theme, "syntax-constant");
+      color: map-get($theme, "syntax-constant");
     } // Literal.String.Regex
     .syntax-s1 {
       color: map-get($theme, "syntax-string");
@@ -802,16 +811,16 @@
       color: map-get($theme, "syntax-string");
     } // Literal.String.Symbol
     .syntax-bp {
-      color:  map-get($theme, "syntax-keyword");
+      color: map-get($theme, "syntax-keyword");
     } // Name.Builtin.Pseudo
     .syntax-vc {
-      color:  map-get($theme, "syntax-keyword");
+      color: map-get($theme, "syntax-keyword");
     } // Name.Variable.Class
     .syntax-vg {
-      color:  map-get($theme, "syntax-keyword");
+      color: map-get($theme, "syntax-keyword");
     } // Name.Variable.Global
     .syntax-vi {
-      color:  map-get($theme, "syntax-keyword");
+      color: map-get($theme, "syntax-keyword");
     } // Name.Variable.Instance
     .syntax-il {
       color: map-get($theme, "syntax-comment");
@@ -844,8 +853,8 @@
     "foreground-secondary"
     "link"
     "link-visited"
-    "warning"
-  ;
+    "warning";
+
   @each $key in $essential-keys {
     @if (not map-has-key($theme, $key)) {
       @error "Missing essential key in theme: #{$key}";
@@ -860,7 +869,9 @@
   $border: map-get-fallback($theme, "border", "foreground-secondary");
   $button: map-get-fallback($theme, "button", "link");
   $button-used: map-get-fallback($theme, "button-used", "link-visited");
-  $foreground-highlight: map-get-fallback($theme, "foreground-highlight", "foreground-primary");
+  // stylelint-disable-next-line
+  $foreground-highlight:
+    map-get-fallback($theme, "foreground-highlight", "foreground-primary");
   $stripe-mine: map-get-fallback($theme, "stripe-mine", "link-visited");
   $stripe-target: map-get-fallback($theme, "stripe-target", "warning");
   $syntax-builtin: map-get-fallback($theme, "syntax-builtin", "foreground-primary");
@@ -872,13 +883,17 @@
   $topic-tag-nsfw: map-get-fallback($theme, "topic-tag-nsfw", "error");
   $topic-tag-spoiler: map-get-fallback($theme, "topic-tag-spoiler", "warning");
 
-  // foreground-extreme: if not defined, use white on a dark background and black on a light one
+  // foreground-extreme: if not defined, use white on a dark bg and black on a light one
   $foreground-extreme: map-get($theme, "foreground-extreme");
   $foreground-extreme: if($is-light, #000, #fff) !default;
 
   // foreground-middle: if not defined, mix foreground-primary and foreground-secondary
   $foreground-middle: map-get($theme, "foreground-middle");
-  $foreground-middle: mix(map-get($theme, "foreground-primary"), map-get($theme, "foreground-secondary")) !default;
+  $foreground-middle:
+    mix(
+      map-get($theme, "foreground-primary"),
+      map-get($theme, "foreground-secondary")
+    ) !default;
 
   // link-hover: if not defined, darken the link color slightly
   $link-hover: map-get($theme, "link-hover");