From 947ddfb2244500986a7e16d93a3b880b4462b832 Mon Sep 17 00:00:00 2001 From: Bauke Date: Tue, 3 Mar 2020 19:16:40 +0100 Subject: [PATCH] Refactor: Fix linting issues introduced with new versions. --- package.json | 5 ++++- scripts/bump-version.ts | 11 ++++++----- source/scss/_options.scss | 24 ++++++++++++------------ source/scss/_utilities.scss | 2 +- source/ts/options.ts | 10 +++++----- 5 files changed, 28 insertions(+), 24 deletions(-) diff --git a/package.json b/package.json index 2e32cc4..52d0ac0 100644 --- a/package.json +++ b/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" }, diff --git a/scripts/bump-version.ts b/scripts/bump-version.ts index d4f4caa..b12901f 100644 --- a/scripts/bump-version.ts +++ b/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 | 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; } diff --git a/source/scss/_options.scss b/source/scss/_options.scss index 41b71d0..72292e0 100644 --- a/source/scss/_options.scss +++ b/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%); } } diff --git a/source/scss/_utilities.scss b/source/scss/_utilities.scss index 2ec4f70..153a3fa 100644 --- a/source/scss/_utilities.scss +++ b/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; } } diff --git a/source/ts/options.ts b/source/ts/options.ts index 46d9ce2..0909ab4 100644 --- a/source/ts/options.ts +++ b/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 { 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 {

Info

\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

The Problem