From 63a5374fad2bc8febcf8e8d2f0e066de341829d8 Mon Sep 17 00:00:00 2001 From: Deimos Date: Sun, 9 Jun 2019 18:22:32 -0600 Subject: [PATCH] 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 | 42 ++++++++++++++++++++++- tildes/scss/_base.scss | 2 +- tildes/scss/_spectre_variables.scss | 3 +- tildes/scss/modules/_comment.scss | 23 +++++++------ tildes/scss/modules/_menu.scss | 2 +- tildes/scss/modules/_post.scss | 2 +- tildes/scss/modules/_site-header.scss | 2 +- tildes/scss/styles.scss | 2 +- tildes/scss/themes/_atom_one_dark.scss | 3 ++ tildes/scss/themes/_default.scss | 1 - tildes/scss/themes/_dracula.scss | 3 ++ tildes/scss/themes/_solarized.scss | 47 ++++++++++++++------------ tildes/scss/themes/_theme_base.scss | 8 ++--- 13 files changed, 96 insertions(+), 44 deletions(-) diff --git a/tildes/package.json b/tildes/package.json index 0c0dab7..c68e1da 100644 --- a/tildes/package.json +++ b/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 } } } diff --git a/tildes/scss/_base.scss b/tildes/scss/_base.scss index 6976a75..bd0e606 100644 --- a/tildes/scss/_base.scss +++ b/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; diff --git a/tildes/scss/_spectre_variables.scss b/tildes/scss/_spectre_variables.scss index d474fec..4a307cc 100644 --- a/tildes/scss/_spectre_variables.scss +++ b/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 diff --git a/tildes/scss/modules/_comment.scss b/tildes/scss/modules/_comment.scss index c7e49e5..206c74c 100644 --- a/tildes/scss/modules/_comment.scss +++ b/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; diff --git a/tildes/scss/modules/_menu.scss b/tildes/scss/modules/_menu.scss index 3c2529d..c1aaa90 100644 --- a/tildes/scss/modules/_menu.scss +++ b/tildes/scss/modules/_menu.scss @@ -3,7 +3,7 @@ .menu { .menu-item { - & > a:hover, & > a:focus { + > a:hover, > a:focus { background-color: transparent; } } diff --git a/tildes/scss/modules/_post.scss b/tildes/scss/modules/_post.scss index 1562abb..f7d9183 100644 --- a/tildes/scss/modules/_post.scss +++ b/tildes/scss/modules/_post.scss @@ -2,7 +2,7 @@ // SPDX-License-Identifier: AGPL-3.0-or-later .post-listing { - & > li { + > li { margin-bottom: 1rem; } diff --git a/tildes/scss/modules/_site-header.scss b/tildes/scss/modules/_site-header.scss index fd183a8..f0f65b1 100644 --- a/tildes/scss/modules/_site-header.scss +++ b/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 diff --git a/tildes/scss/styles.scss b/tildes/scss/styles.scss index b742625..7537321 100644 --- a/tildes/scss/styles.scss +++ b/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"; diff --git a/tildes/scss/themes/_atom_one_dark.scss b/tildes/scss/themes/_atom_one_dark.scss index cfc3b1b..fd1f8ec 100644 --- a/tildes/scss/themes/_atom_one_dark.scss +++ b/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, diff --git a/tildes/scss/themes/_default.scss b/tildes/scss/themes/_default.scss index b2f94ea..368c81f 100644 --- a/tildes/scss/themes/_default.scss +++ b/tildes/scss/themes/_default.scss @@ -1,5 +1,4 @@ // Contains the default Tildes theme - $default-theme: ( "alert": #e66b00, "background-primary": #fff, diff --git a/tildes/scss/themes/_dracula.scss b/tildes/scss/themes/_dracula.scss index 533ee7b..8e8cc2a 100644 --- a/tildes/scss/themes/_dracula.scss +++ b/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, diff --git a/tildes/scss/themes/_solarized.scss b/tildes/scss/themes/_solarized.scss index 99a6142..4a335c0 100644 --- a/tildes/scss/themes/_solarized.scss +++ b/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); diff --git a/tildes/scss/themes/_theme_base.scss b/tildes/scss/themes/_theme_base.scss index eb3be0a..db9a02d 100644 --- a/tildes/scss/themes/_theme_base.scss +++ b/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"); } }