From c3ba7ae03239b5aa130dd21a7d0ec2dd1ccfe659 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20F=C3=BCting?= <simon.fueting@tngtech.com>
Date: Mon, 9 Dec 2024 12:53:32 +0100
Subject: [PATCH] feat-400: configure stylelint

---
 web/package.json               |  2 +
 web/src/styles/_theme.scss     | 82 +++++++++++++++----------------
 web/src/styles/_variables.scss | 17 +++----
 web/src/styles/global.scss     |  5 +-
 web/src/styles/lightrope.scss  | 17 ++++---
 web/stylelint.config.js        | 15 ++++++
 web/yarn.lock                  | 88 ++++++++++++++++++++++++++++++++--
 7 files changed, 163 insertions(+), 63 deletions(-)
 create mode 100644 web/stylelint.config.js

diff --git a/web/package.json b/web/package.json
index 5ae3f6c006..82ed1c0ae8 100644
--- 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
index 64c4d86d83..877edc7bef 100644
--- 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,7 +359,7 @@ 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;
@@ -365,7 +367,7 @@ input[type='number'],
 }
 
 .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
index d870ebe03e..6aae5347cb 100644
--- 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
index 17f3af2268..c65654e22c 100644
--- 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
index dbc1fa67a8..77d5cd0f86 100644
--- a/web/src/styles/lightrope.scss
+++ b/web/src/styles/lightrope.scss
@@ -4,9 +4,9 @@ $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;
@@ -14,7 +14,7 @@ $globe-color-3: rgb(210, 61, 27);
   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);
diff --git a/web/stylelint.config.js b/web/stylelint.config.js
new file mode 100644
index 0000000000..584f4a0795
--- /dev/null
+++ b/web/stylelint.config.js
@@ -0,0 +1,15 @@
+/** @type {import('stylelint').Config} */
+export default {
+  extends: ['stylelint-config-standard', 'stylelint-config-sass-guidelines'],
+  rules: {
+    'no-invalid-position-at-import-rule': [
+      true,
+      {
+        ignoreAtRules: ['use'],
+      },
+    ],
+    'import-notation': 'string',
+    'selector-max-compound-selectors': 4,
+    'max-nesting-depth': 3,
+  },
+}
diff --git a/web/yarn.lock b/web/yarn.lock
index 21d060b586..9334d6de1f 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -1818,16 +1818,21 @@
     "@csstools/color-helpers" "^5.0.1"
     "@csstools/css-calc" "^2.1.0"
 
-"@csstools/css-parser-algorithms@^3.0.4":
+"@csstools/css-parser-algorithms@^3.0.1", "@csstools/css-parser-algorithms@^3.0.4":
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.4.tgz#74426e93bd1c4dcab3e441f5cc7ba4fb35d94356"
   integrity sha512-Up7rBoV77rv29d3uKHUIVubz1BTcgyUK72IvCQAbfbMv584xHcGKCKbWh7i8hPrRJ7qU4Y8IO3IY9m+iTB7P3A==
 
-"@csstools/css-tokenizer@^3.0.3":
+"@csstools/css-tokenizer@^3.0.1", "@csstools/css-tokenizer@^3.0.3":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@csstools/css-tokenizer/-/css-tokenizer-3.0.3.tgz#a5502c8539265fecbd873c1e395a890339f119c2"
   integrity sha512-UJnjoFsmxfKUdNYdWgOB0mWUypuLvAfQPH1+pyvRJs6euowbFkFC6P13w1l8mJyi3vxYMxc9kld5jZEGRQs6bw==
 
+"@csstools/media-query-list-parser@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@csstools/media-query-list-parser/-/media-query-list-parser-3.0.1.tgz#9474e08e6d7767cf68c56bf1581b59d203360cb0"
+  integrity sha512-HNo8gGD02kHmcbX6PvCoUuOQvn4szyB9ca63vZHKX5A81QytgDG4oxG4IaEfHTlEZSZ6MjPEMWIVU+zF2PZcgw==
+
 "@csstools/media-query-list-parser@^4.0.2":
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/@csstools/media-query-list-parser/-/media-query-list-parser-4.0.2.tgz#e80e17eba1693fceafb8d6f2cfc68c0e7a9ab78a"
@@ -3668,6 +3673,20 @@
     "@smithy/util-buffer-from" "^3.0.0"
     tslib "^2.6.2"
 
+"@stylistic/stylelint-plugin@^3.0.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@stylistic/stylelint-plugin/-/stylelint-plugin-3.1.1.tgz#2503ef353d50bbdf495db4bb1b87ca7f639f16d6"
+  integrity sha512-XagAHHIa528EvyGybv8EEYGK5zrVW74cHpsjhtovVATbhDRuJYfE+X4HCaAieW9lCkwbX6L+X0I4CiUG3w/hFw==
+  dependencies:
+    "@csstools/css-parser-algorithms" "^3.0.1"
+    "@csstools/css-tokenizer" "^3.0.1"
+    "@csstools/media-query-list-parser" "^3.0.1"
+    is-plain-object "^5.0.0"
+    postcss-selector-parser "^6.1.2"
+    postcss-value-parser "^4.2.0"
+    style-search "^0.1.0"
+    stylelint "^16.8.2"
+
 "@svgr/babel-plugin-add-jsx-attribute@8.0.0":
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz#4001f5d5dd87fa13303e36ee106e3ff3a7eb8b22"
@@ -10298,6 +10317,11 @@ mdn-data@2.12.1:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.12.1.tgz#10cb462215c13d95c92ff60d0fb3becac1bbb924"
   integrity sha512-rsfnCbOHjqrhWxwt5/wtSLzpoKTzW7OXdT5lLOIH1OTYhWu9rRJveGq0sKvDZODABH7RX+uoR+DYcpFnq4Tf6Q==
 
+mdn-data@^2.12.2:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.13.0.tgz#10af1de5d0d5e4ceb4fe01f3086b34f1178473d9"
+  integrity sha512-OmD1FDyP706JqPqtLqgev/QCK0qudBdUuKKag6InQ/elEw3Cm2AhXYktcSggdc/vWniYqIsofkcteMEOioW5vQ==
+
 mdurl@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
@@ -11557,6 +11581,11 @@ postcss-logical@^8.0.0:
   dependencies:
     postcss-value-parser "^4.2.0"
 
+postcss-media-query-parser@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244"
+  integrity sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==
+
 postcss-modules-extract-imports@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz#b4497cb85a9c0c4b5aabeb759bb25e8d89f15002"
@@ -11709,6 +11738,11 @@ postcss-safe-parser@^7.0.1:
   resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-7.0.1.tgz#36e4f7e608111a0ca940fd9712ce034718c40ec0"
   integrity sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==
 
+postcss-scss@^4.0.9:
+  version "4.0.9"
+  resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-4.0.9.tgz#a03c773cd4c9623cb04ce142a52afcec74806685"
+  integrity sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==
+
 postcss-selector-not@^8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/postcss-selector-not/-/postcss-selector-not-8.0.1.tgz#f2df9c6ac9f95e9fe4416ca41a957eda16130172"
@@ -11716,6 +11750,14 @@ postcss-selector-not@^8.0.1:
   dependencies:
     postcss-selector-parser "^7.0.0"
 
+postcss-selector-parser@^6.1.2:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz#27ecb41fb0e3b6ba7a1ec84fff347f734c7929de"
+  integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss-selector-parser@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-7.0.0.tgz#41bd8b56f177c093ca49435f65731befe25d6b9c"
@@ -13477,6 +13519,11 @@ style-loader@^4.0.0:
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-4.0.0.tgz#0ea96e468f43c69600011e0589cb05c44f3b17a5"
   integrity sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==
 
+style-search@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
+  integrity sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==
+
 style-to-object@0.3.0, style-to-object@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.3.0.tgz#b1b790d205991cc783801967214979ee19a76e46"
@@ -13506,7 +13553,42 @@ styled-jsx@5.1.6:
   dependencies:
     client-only "0.0.1"
 
-stylelint@^16.11.0:
+stylelint-config-recommended@^14.0.1:
+  version "14.0.1"
+  resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-14.0.1.tgz#d25e86409aaf79ee6c6085c2c14b33c7e23c90c6"
+  integrity sha512-bLvc1WOz/14aPImu/cufKAZYfXs/A/owZfSMZ4N+16WGXLoX5lOir53M6odBxvhgmgdxCVnNySJmZKx73T93cg==
+
+stylelint-config-sass-guidelines@12.1.0:
+  version "12.1.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-sass-guidelines/-/stylelint-config-sass-guidelines-12.1.0.tgz#6c7f108f2293684b9a6db5b290d293475d9fde22"
+  integrity sha512-NTxEtVT6uNSqRvq+A3ScyKhjUrY/Z845TnpWEwnMgIPZ/+/Waa4+51r6OPuQRMu4XZS3D8DK1UaT4TWFBvuuAw==
+  dependencies:
+    "@stylistic/stylelint-plugin" "^3.0.1"
+    postcss-scss "^4.0.9"
+    stylelint-scss "^6.2.1"
+
+stylelint-config-standard@36.0.1:
+  version "36.0.1"
+  resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-36.0.1.tgz#727cbb2a1ef3e210f5ce8329cde531129f156609"
+  integrity sha512-8aX8mTzJ6cuO8mmD5yon61CWuIM4UD8Q5aBcWKGSf6kg+EC3uhB+iOywpTK4ca6ZL7B49en8yanOFtUW0qNzyw==
+  dependencies:
+    stylelint-config-recommended "^14.0.1"
+
+stylelint-scss@^6.2.1:
+  version "6.10.0"
+  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-6.10.0.tgz#ba5b807793e145421e9879dd15ae672af6820a45"
+  integrity sha512-y03if6Qw9xBMoVaf7tzp5BbnYhYvudIKzURkhSHzcHG0bW0fAYvQpTUVJOe7DyhHaxeThBil4ObEMvGbV7+M+w==
+  dependencies:
+    css-tree "^3.0.1"
+    is-plain-object "^5.0.0"
+    known-css-properties "^0.35.0"
+    mdn-data "^2.12.2"
+    postcss-media-query-parser "^0.2.3"
+    postcss-resolve-nested-selector "^0.1.6"
+    postcss-selector-parser "^7.0.0"
+    postcss-value-parser "^4.2.0"
+
+stylelint@^16.11.0, stylelint@^16.8.2:
   version "16.11.0"
   resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-16.11.0.tgz#7eb653b007dc0b4366dc3aa7bfa94ced0c52f087"
   integrity sha512-zrl4IrKmjJQ+h9FoMp69UMCq5SxeHk0URhxUBj4d3ISzo/DplOFBJZc7t7Dr6otB+1bfbbKNLOmCDpzKSlW+Nw==