Refactor: Fix linting issues introduced with new versions.

package.json

@@ -58,7 +58,8 @@
     "rules": {
       "scss/at-rule-no-unknown": null,
       "at-rule-no-unknown": null,
-      "block-no-empty": null
+      "block-no-empty": null,
+      "no-descending-specificity": null
     }
   },
   "xo": {
@@ -83,6 +84,8 @@
           "SwitchCase": 1
         }
       ],
+      "@typescript-eslint/member-ordering": "off",
+      "unicorn/prefer-modern-dom-apis": "off",
       "capitalized-comments": "off",
       "no-await-in-loop": "off"
     },

scripts/bump-version.ts

@@ -23,7 +23,8 @@ import git from 'simple-git/promise';
 
   if (manifestJSON.version !== packageJSON.version) {
     console.log(
-      `manifest.json and package.json versions are not the same:\n${manifestJSON.version} | ${packageJSON.version}`
+      `manifest.json and package.json versions are not the same:\n` +
+        `${String(manifestJSON.version)} | ${String(packageJSON.version)}`
     );
     return;
   }
@@ -39,7 +40,7 @@ import git from 'simple-git/promise';
         description: `${currentVersion} -> ${semver.inc(
           currentVersion,
           'major'
-        )}`,
+        )!}`,
         value: 'major'
       },
       {
@@ -47,7 +48,7 @@ import git from 'simple-git/promise';
         description: `${currentVersion} -> ${semver.inc(
           currentVersion,
           'minor'
-        )}`,
+        )!}`,
         value: 'minor'
       },
       {
@@ -55,7 +56,7 @@ import git from 'simple-git/promise';
         description: `${currentVersion} -> ${semver.inc(
           currentVersion,
           'patch'
-        )}`,
+        )!}`,
         value: 'patch'
       }
     ] as Array<prompts.Choice & {description?: string}> | undefined,
@@ -70,7 +71,7 @@ import git from 'simple-git/promise';
     case 'patch':
       break;
     default:
-      console.log(`Unknown input: ${input.type}`);
+      console.log(`Unknown input: ${String(input.type)}`);
       return;
   }
 

source/scss/_options.scss

@@ -6,7 +6,7 @@ html {
 }
 
 body {
-  background-color: darken($background, 5%);
+  background-color: adjust-color($background, $lightness: -5%);
   color: $foreground;
   font-family: sans-serif;
   font-size: 2rem;
@@ -14,7 +14,7 @@ body {
 
 a,
 a:visited {
-  color: lighten($blue, 10%);
+  color: adjust-color($blue, $lightness: 10%);
 
   &:hover {
     color: $magenta;
@@ -39,7 +39,7 @@ button {
 }
 
 code {
-  background-color: darken($background, 5%);
+  background-color: adjust-color($background, $lightness: -5%);
 }
 
 details {
@@ -123,8 +123,8 @@ p > .red-re {
   margin-right: 1rem;
 
   > a {
-    background-color: lighten($background, 5%);
-    border-bottom: 0.25rem solid darken($background, 5%);
+    background-color: adjust-color($background, $lightness: 5%);
+    border-bottom: 0.25rem solid adjust-color($background, $lightness: -5%);
     color: $foreground;
     padding: 2rem;
 
@@ -133,12 +133,12 @@ p > .red-re {
     }
 
     &:hover:not(.active) {
-      background-color: darken($blue, 20%);
+      background-color: adjust-color($blue, $lightness: -20%);
       cursor: pointer;
     }
 
     &.active {
-      background-color: darken($blue, 10%);
+      background-color: adjust-color($blue, $lightness: -10%);
     }
   }
 }
@@ -163,7 +163,7 @@ p > .red-re {
       min-width: 10rem;
 
       &:hover {
-        background-color: darken($red, 10%);
+        background-color: adjust-color($red, $lightness: -10%);
       }
     }
   }
@@ -175,7 +175,7 @@ p > .red-re {
       background-color: $green;
 
       &:hover {
-        background-color: darken($green, 10%);
+        background-color: adjust-color($green, $lightness: -10%);
       }
     }
   }
@@ -223,7 +223,7 @@ p > .red-re {
     padding: 1rem;
 
     &:hover {
-      background-color: darken($cyan, 10%);
+      background-color: adjust-color($cyan, $lightness: -10%);
     }
 
     &:last-child {
@@ -254,7 +254,7 @@ p > .red-re {
   background-color: $blue;
 
   &:hover {
-    background-color: darken($blue, 10%);
+    background-color: adjust-color($blue, $lightness: -10%);
   }
 }
 
@@ -262,7 +262,7 @@ p > .red-re {
   background-color: $red;
 
   &:hover {
-    background-color: darken($red, 10%);
+    background-color: adjust-color($red, $lightness: -10%);
   }
 }
 

source/scss/_utilities.scss

@@ -40,7 +40,7 @@ $extra-large-breakpoint: 1800px;
   }
 
   &.trx-flash-error {
-    background-color: darken($red, 25%);
+    background-color: adjust-color($red, $lightness: -25%);
     border-color: $red;
   }
 }

source/ts/options.ts

@@ -118,7 +118,7 @@ window.addEventListener(
         // Set the button text to enable/disable based on the current setting.
         const toggleButton: HTMLButtonElement = querySelector(`#${id}-button`);
         toggleButton.addEventListener('click', toggleButtonClickHandler);
-        toggleButton.textContent = value === true ? 'Enabled' : 'Disabled';
+        toggleButton.textContent = value ? 'Enabled' : 'Disabled';
 
         // Add a checkmark to the list item if the feature is enabled.
         const listItem: HTMLAnchorElement = querySelector(`#${id}-list`);
@@ -156,7 +156,7 @@ async function toggleButtonClickHandler(event: MouseEvent): Promise<void> {
   await setSettings(settings);
 
   // Update the button text.
-  target.textContent = wantedSettingValue === true ? 'Enabled' : 'Disabled';
+  target.textContent = wantedSettingValue ? 'Enabled' : 'Disabled';
 
   // Grab the equivalent list item and update the checkmark.
   const listItem: HTMLAnchorElement = querySelector(
@@ -274,12 +274,12 @@ function createReportTemplate(): string {
 <h3>Info</h3>\n
 | Type | Value |
 |------|-------|
-| Operating System | ${platform.os} |
-| Browser | ${platform.name} ${platform.version} (${platform.layout}) |\n`;
+| Operating System | ${platform.os!.toString()} |
+| Browser | ${platform.name!} ${platform.version!} (${platform.layout!}) |\n`;
   // The platform manufacturer and product can be null in certain cases (such as
   // desktops) so only when they're both not null include them.
   if (platform.manufacturer !== null && platform.product !== null) {
-    reportTemplate += `| Device | ${platform.manufacturer} ${platform.product} |\n`;
+    reportTemplate += `| Device | ${platform.manufacturer!} ${platform.product!} |\n`;
   }
 
   reportTemplate += `\n<h3>The Problem</h3>