feat-400: configure stylelint

hodcroftlab · Dec 9, 2024 · c3ba7ae · c3ba7ae
1 parent 2881ed7
commit c3ba7ae
Show file tree

Hide file tree

Showing 7 changed files with 163 additions and 63 deletions.
diff --git a/web/package.json b/web/package.json
@@ -271,6 +271,8 @@
     "source-map-loader": "^5.0.0",
     "style-loader": "^4.0.0",
     "stylelint": "^16.11.0",
+    "stylelint-config-sass-guidelines": "^12.1.0",
+    "stylelint-config-standard": "^36.0.1",
     "svgo": "^3.3.2",
     "ts-essentials": "^10.0.3",
     "ts-node": "^10.9.2",

diff --git a/web/src/styles/_theme.scss b/web/src/styles/_theme.scss
@@ -1,7 +1,7 @@
 // Some of the things are borrowed from bootswatch Materia theme
 // https://github.com/thomaspark/bootswatch
 
-/* stylelint-disable selector-no-qualifying-type, plugin/stylelint-no-indistinguishable-colors, plugin/no-low-performance-animation-properties */
+/* stylelint-disable selector-no-qualifying-type */
 
 @use './variables' as vars;
 
@@ -25,6 +25,7 @@
     transition:
       background 0.5s,
       opacity 1s;
+
     @include gradient-radial($color 10%, transparent 10.01%);
   }
 
@@ -46,7 +47,7 @@
 
 .navbar {
   border: 0;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 30%);
   padding: 0 1rem;
 
   &-brand {
@@ -66,14 +67,14 @@
     input[type='number'],
     input[type='tel'] {
       color: #fff;
-      box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5);
+      box-shadow: inset 0 -1px 0 rgb(255 255 255 / 50%);
 
       &:focus {
         box-shadow: inset 0 -2px 0 #fff;
       }
 
       &::placeholder {
-        color: rgba(255, 255, 255, 0.5);
+        color: rgb(255 255 255 / 50%);
       }
     }
   }
@@ -85,16 +86,16 @@
   .btn-#{$class} {
     &:focus {
       background-color: $bg;
-      box-shadow: 0 0 0 2px rgba(204, 204, 204, 0.5);
+      box-shadow: 0 0 0 2px rgb(204 204 204 / 50%);
     }
 
     &:hover,
     &:active:hover {
-      background-color: darken($bg, 6%);
+      background-color: darken($bg, 6%); /* stylelint-disable-line scss/no-global-function-names, function-no-unknown */
     }
 
     &:active {
-      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
+      box-shadow: 2px 2px 4px rgb(0 0 0 / 40%);
     }
 
     @include ripple($color);
@@ -116,8 +117,8 @@
 
 .btn {
   border: 0;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-  transition: all 0.4s; // stylelint-disable-line declaration-property-value-blacklist
+  box-shadow: 0 1px 4px rgb(0 0 0 / 40%);
+  transition: all 0.4s;
 
   &-link {
     color: vars.$link-color;
@@ -146,13 +147,13 @@
     &.disabled,
     &[disabled],
     fieldset[disabled] & {
-      color: rgba(0, 0, 0, 0.4);
-      background-color: rgba(0, 0, 0, 0.1);
+      color: rgb(0 0 0 / 40%);
+      background-color: rgb(0 0 0 / 10%);
       opacity: 1;
 
       &:hover,
       &:focus {
-        background-color: rgba(0, 0, 0, 0.1);
+        background-color: rgb(0 0 0 / 10%);
       }
     }
   }
@@ -198,7 +199,7 @@
 
   .btn + .btn,
   .btn + .btn-group > .dropdown-toggle {
-    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
+    box-shadow: 1px 1px 4px rgb(0 0 0 / 40%);
   }
 }
 
@@ -220,7 +221,7 @@ p {
 }
 
 a {
-  transition: all 0.2s; // stylelint-disable-line declaration-property-value-blacklist
+  transition: all 0.2s;
 }
 
 .text-secondary {
@@ -233,10 +234,11 @@ a {
   > tbody > tr,
   > tbody > tr > th,
   > tbody > tr > td {
-    transition: all 0.2s; // stylelint-disable-line declaration-property-value-blacklist
+    transition: all 0.2s;
   }
 }
 
+/* stylelint-disable-next-line no-descending-specificity */
 .thead-inverse th {
   color: vars.$white;
   background-color: vars.$primary;
@@ -259,10 +261,10 @@ a {
 textarea,
 textarea.form-control,
 input.form-control,
-input[type='text'],
-input[type='password'],
-input[type='email'],
-input[type='number'],
+input[type='text'], /* stylelint-disable-line no-descending-specificity */
+input[type='password'], /* stylelint-disable-line no-descending-specificity */
+input[type='email'], /* stylelint-disable-line no-descending-specificity */
+input[type='number'], /* stylelint-disable-line no-descending-specificity */
 [type='text'].form-control,
 [type='password'].form-control,
 [type='email'].form-control,
@@ -277,7 +279,7 @@ input[type='number'],
 .dropdown-menu {
   margin-top: 0;
   border: 0;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
 }
 
 .nav-tabs {
@@ -292,7 +294,7 @@ input[type='number'],
     background-color: transparent;
     border: 0;
     box-shadow: inset 0 -1px 0 #ddd;
-    transition: all 0.2s; // stylelint-disable-line declaration-property-value-blacklist
+    transition: all 0.2s;
 
     &:hover {
       color: vars.$primary;
@@ -318,10 +320,10 @@ input[type='number'],
   }
 
   &.nav-justified {
-    .nav-link,
+    .nav-link, /* stylelint-disable-line no-descending-specificity */
     .nav-link:hover,
     .nav-link:focus,
-    .nav-link.active,
+    .nav-link.active, /* stylelint-disable-line no-descending-specificity */
     .nav-link.active:hover,
     .nav-link.active:focus {
       border: 0;
@@ -357,15 +359,15 @@ input[type='number'],
 .close {
   line-height: 0.5;
   opacity: 0.6;
-  transition: all 0.2s; // stylelint-disable-line declaration-property-value-blacklist
+  transition: all 0.2s;
 
   &:hover {
     opacity: 1;
   }
 }
 
 .card {
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 1px 4px rgb(0 0 0 / 40%);
 
   &.border-primary,
   &.border-secondary,
@@ -385,6 +387,19 @@ input[type='number'],
   }
 }
 
+.carousel {
+  &-caption {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      color: inherit;
+    }
+  }
+}
+
 .list-group {
   &-item-action.active {
     h1,
@@ -400,23 +415,10 @@ input[type='number'],
 
 .modal-content {
   border-radius: 0.2rem;
-  box-shadow: 0 6px 36px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 6px 36px rgb(0 0 0 / 30%);
 }
 
 .popover {
   border: 0;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-}
-
-.carousel {
-  &-caption {
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      color: inherit;
-    }
-  }
+  box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
 }
diff --git a/web/src/styles/_variables.scss b/web/src/styles/_variables.scss
@@ -3,8 +3,6 @@
 // Some of the things are borrowed from bootswatch Materia theme
 // https://github.com/thomaspark/bootswatch
 
-/* stylelint-disable primer/no-unused-vars */
-
 $grid-breakpoints: (
   xs: 0,
   sm: 576px,
@@ -36,12 +34,11 @@ $font-family-default: $font-family-sans-serif;
 $font-family-base: $font-family-default;
 $font-size-base: 1rem;
 
-$white: #ffffff;
-$gray-100: #f8f9fa; // stylelint-disable-line plugin/stylelint-no-indistinguishable-colors
-$gray-150: #eff1f3;
+$white: #fff;
+$gray-100: #f8f9fa;
 $gray-200: #e9ecef;
 $gray-250: #e5e8ea;
-$gray-300: #dee2e6; // stylelint-disable-line plugin/stylelint-no-indistinguishable-colors
+$gray-300: #dee2e6;
 $gray-400: #ced4da;
 $gray-500: #adb5bd;
 $gray-600: #7b838a;
@@ -67,7 +64,7 @@ $success: $green;
 $info: $cyan;
 $warning: $yellow;
 $danger: $red;
-$light: $white; // stylelint-disable-line plugin/stylelint-no-indistinguishable-colors
+$light: $white;
 $dark: $gray-700;
 
 $yiq-contrasted-threshold: 170;
@@ -84,10 +81,10 @@ $code-font-size: $font-size-base * 0.9;
 $blockquote-font-size: $font-size-base * 0.9;
 $blockquote-bg-color: #fff7df;
 
-$navbar-dark-color: rgba($white, 0.75); // stylelint-disable-line plugin/stylelint-no-indistinguishable-colors
-$navbar-dark-hover-color: rgba($white, 1); // stylelint-disable-line plugin/stylelint-no-indistinguishable-colors
+$navbar-dark-color: rgba($white, 0.75);
+$navbar-dark-hover-color: rgba($white, 1);
 
-$navbar-light-hover-color: rgba($black, 0.9); // stylelint-disable-line plugin/stylelint-no-indistinguishable-colors
+$navbar-light-hover-color: rgba($black, 0.9);
 
 $alert-border-width: 0;
 $progress-height: 0.5rem;

diff --git a/web/src/styles/global.scss b/web/src/styles/global.scss
@@ -2,19 +2,17 @@
 @use 'typeface-droid-sans-mono' as droid-sans; // only works because includePaths option is set in next.config.ts
 @use 'bootstrap-icons/font/bootstrap-icons.css'; // only works because includePaths option is set in next.config.ts
 @use './font-family-system';
-
 @use './lightrope';
-
 @use 'react-aspect-ratio/aspect-ratio.css';
 @use 'react-gif-player/src/GifPlayer.scss';
 @use 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css';
-
 @use './components/LanguageSwitcher';
 
 @import './variables';
 @import 'bootstrap/scss/bootstrap';
 @import './theme';
 
+/* stylelint-disable-next-line selector-class-pattern */
 .gif_player {
   margin: 1rem;
 
@@ -38,6 +36,7 @@ body {
   background-color: $body-bg;
 }
 
+/* stylelint-disable-next-line selector-class-pattern, selector-id-pattern, selector-max-id */
 #__next {
   height: 100%;
 }

diff --git a/web/src/styles/lightrope.scss b/web/src/styles/lightrope.scss
@@ -4,17 +4,17 @@ $globe-spacing: 15px;
 $globe-spread: 3px;
 $light-off-opacity: 0.2;
 
-$globe-color-1: rgb(164, 215, 9);
-$globe-color-2: rgb(100, 126, 235);
-$globe-color-3: rgb(210, 61, 27);
+$globe-color-1: rgb(164 215 9);
+$globe-color-2: rgb(100 126 235);
+$globe-color-3: rgb(210 61 27);
 
 .lightrope {
   text-align: center;
   white-space: nowrap;
   overflow: hidden;
   position: absolute;
   z-index: 1;
-  margin: -15px 0 0 0;
+  margin: -15px 0 0;
   padding: 0;
   pointer-events: none;
   width: 100%;
@@ -57,7 +57,7 @@ $globe-color-3: rgb(210, 61, 27);
       animation-duration: 1.2s;
     }
 
-    &:before {
+    &::before {
       content: '';
       position: absolute;
       background: #222;
@@ -68,7 +68,7 @@ $globe-color-3: rgb(210, 61, 27);
       left: 1px;
     }
 
-    &:after {
+    &::after {
       content: '';
       top: (0 - calc($globe-height/2));
       left: $globe-width - 3;
@@ -79,7 +79,7 @@ $globe-color-3: rgb(210, 61, 27);
       border-radius: 50%;
     }
 
-    &:last-child:after {
+    &:last-child::after {
       content: none;
     }
 
@@ -95,6 +95,7 @@ $globe-color-3: rgb(210, 61, 27);
     background: rgba($globe-color-1, 1);
     box-shadow: 0 calc($globe-height/6) $globe-width * 2 $globe-spread rgba($globe-color-1, 1);
   }
+
   50% {
     background: rgba($globe-color-1, $light-off-opacity);
     box-shadow: 0 calc($globe-height/6) $globe-width * 2 $globe-spread rgba($globe-color-1, 0.2);
@@ -107,6 +108,7 @@ $globe-color-3: rgb(210, 61, 27);
     background: rgba($globe-color-2, 1);
     box-shadow: 0 calc($globe-height/6) $globe-width * 2 $globe-spread rgba($globe-color-2, 1);
   }
+
   50% {
     background: rgba($globe-color-2, $light-off-opacity);
     box-shadow: 0 calc($globe-height/6) $globe-width * 2 $globe-spread rgba($globe-color-2, 0.2);
@@ -119,6 +121,7 @@ $globe-color-3: rgb(210, 61, 27);
     background: rgba($globe-color-3, 1);
     box-shadow: 0 calc($globe-height/6) $globe-width * 2 $globe-spread rgba($globe-color-3, 1);
   }
+
   50% {
     background: rgba($globe-color-3, $light-off-opacity);
     box-shadow: 0 calc($globe-height/6) $globe-width * 2 $globe-spread rgba($globe-color-3, 0.2);