From e40cafccd5040c9d7f84a0cd172a0a0f07b5b99d Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Sat, 22 Jan 2022 21:26:35 +0800
Subject: [PATCH] chore: enable stylelint standard config (#6442)

* chore: enable stylelint standard config

* remove empty line

* fix
---
 .stylelintrc.js                               |  7 ++-
 package.json                                  |  2 +-
 .../src/theme/DebugLayout/styles.module.css   |  2 +-
 .../theme/BackToTopButton/styles.module.css   |  2 +-
 .../theme/BlogPostAuthors/styles.module.css   |  3 +-
 .../src/theme/BlogSidebar/styles.module.css   |  2 +
 .../src/theme/CodeBlock/styles.module.css     |  6 +-
 .../src/theme/DocCard/styles.module.css       |  6 +-
 .../src/theme/DocPage/styles.module.css       |  1 +
 .../src/theme/DocSidebar/styles.module.css    |  1 +
 .../theme/DocSidebarItem/styles.module.css    |  1 +
 .../theme/DocSidebarItems/styles.module.css   |  1 +
 .../src/theme/Heading/styles.css              |  2 +-
 .../theme/TOCCollapsible/styles.module.css    |  4 +-
 .../src/theme/Tag/styles.module.css           |  8 +--
 .../src/theme/Toggle/styles.module.css        | 12 ++--
 .../src/components/Details/styles.module.css  |  6 +-
 .../src/theme/Playground/styles.module.css    |  2 +-
 .../src/theme/SearchPage/styles.module.css    |  4 +-
 packages/docusaurus/src/client/nprogress.css  |  4 +-
 .../markdown-features-tabs-styles.module.css  |  3 +
 .../src/components/APITable/styles.module.css |  2 +-
 .../BrowserWindow/styles.module.css           |  2 +-
 website/src/css/custom.css                    | 59 ++++++++-----------
 .../ShowcaseFilterToggle/styles.module.css    |  2 +-
 .../ShowcaseTagSelect/styles.module.css       |  4 +-
 website/src/pages/showcase/styles.module.css  |  4 +-
 website/src/pages/styles.module.css           | 10 ++--
 .../markdown-features-tabs-styles.module.css  |  3 +
 yarn.lock                                     |  7 +++
 30 files changed, 94 insertions(+), 78 deletions(-)

diff --git a/.stylelintrc.js b/.stylelintrc.js
index 4340c05386..06a3f69e8c 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -6,7 +6,7 @@
  */
 
 module.exports = {
-  extends: ['stylelint-config-recommended', 'stylelint-config-prettier'],
+  extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
   plugins: ['stylelint-copyright'],
   rules: {
     'docusaurus/copyright-header': [
@@ -26,5 +26,10 @@ module.exports = {
         ignorePseudoClasses: ['global'],
       },
     ],
+    'selector-class-pattern': null,
+    'custom-property-empty-line-before': null,
+    'selector-id-pattern': null,
+    'declaration-empty-line-before': null,
+    'comment-empty-line-before': null,
   },
 };
diff --git a/package.json b/package.json
index 5edaefe95c..c4e772d5fd 100644
--- a/package.json
+++ b/package.json
@@ -111,7 +111,7 @@
     "sharp": "^0.29.1",
     "stylelint": "^14.2.0",
     "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-recommended": "^6.0.0",
+    "stylelint-config-standard": "^24.0.0",
     "tslib": "^2.3.1",
     "typescript": "^4.5.2"
   },
diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugLayout/styles.module.css b/packages/docusaurus-plugin-debug/src/theme/DebugLayout/styles.module.css
index f665f6e1b2..40326effb3 100644
--- a/packages/docusaurus-plugin-debug/src/theme/DebugLayout/styles.module.css
+++ b/packages/docusaurus-plugin-debug/src/theme/DebugLayout/styles.module.css
@@ -36,7 +36,7 @@
   font-size: clamp(12px, 4vw, 16px);
   text-align: center;
   border-radius: 4px;
-  padding: 6px 6px;
+  padding: 6px;
 }
 
 .navlink:hover {
diff --git a/packages/docusaurus-theme-classic/src/theme/BackToTopButton/styles.module.css b/packages/docusaurus-theme-classic/src/theme/BackToTopButton/styles.module.css
index 9cb0866a25..e5c6ee0bf2 100644
--- a/packages/docusaurus-theme-classic/src/theme/BackToTopButton/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/BackToTopButton/styles.module.css
@@ -21,7 +21,7 @@
   transform: scale(0);
 }
 
-.backToTopButton:after {
+.backToTopButton::after {
   content: ' ';
   display: inline-block;
   mask: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem no-repeat;
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostAuthors/styles.module.css b/packages/docusaurus-theme-classic/src/theme/BlogPostAuthors/styles.module.css
index 97160e3c9f..b1bd1106f0 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogPostAuthors/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/BlogPostAuthors/styles.module.css
@@ -12,8 +12,7 @@
 
 .imageOnlyAuthorRow {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
 }
 
 .imageOnlyAuthorCol {
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/BlogSidebar/styles.module.css
index faab836cbf..3ca0d4b8d5 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/BlogSidebar/styles.module.css
@@ -30,9 +30,11 @@
 .sidebarItemLink {
   color: var(--ifm-font-color-base);
 }
+
 .sidebarItemLink:hover {
   text-decoration: none;
 }
+
 .sidebarItemLinkActive {
   color: var(--ifm-color-primary) !important;
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
index b812a9a09e..a1bd413658 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
@@ -13,7 +13,7 @@
 
 .codeBlockContent {
   position: relative;
-  /*rtl:ignore*/
+  /* rtl:ignore */
   direction: ltr;
 }
 
@@ -43,7 +43,7 @@
 }
 
 .copyButton {
-  background: rgba(0, 0, 0, 0.3);
+  background: rgb(0 0 0 / 30%);
   border-radius: var(--ifm-global-radius);
   color: var(--ifm-color-white);
   opacity: 0;
@@ -63,7 +63,7 @@
 
 .codeBlockLines {
   font: inherit;
-  /*rtl:ignore*/
+  /* rtl:ignore */
   float: left;
   min-width: 100%;
   padding: var(--ifm-pre-padding);
diff --git a/packages/docusaurus-theme-classic/src/theme/DocCard/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocCard/styles.module.css
index 6ac7776a09..92145f2d68 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocCard/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/DocCard/styles.module.css
@@ -7,14 +7,13 @@
 
 .cardContainer {
   height: 8rem;
-
   color: var(--ifm-color-emphasis-800);
   --ifm-link-color: var(--ifm-color-emphasis-800);
   --ifm-link-hover-color: var(--ifm-color-emphasis-800);
   --ifm-link-hover-decoration: none;
 
   /* box-shadow: var(--ifm-global-shadow-lw); */
-  box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
   border: 1px solid var(--ifm-color-emphasis-200);
   transition: box-shadow var(--ifm-transition-fast) ease,
     background-color var(--ifm-transition-fast) ease;
@@ -22,8 +21,9 @@
 
 .cardContainer.cardContainerLink:hover {
   /* box-shadow: var(--ifm-global-shadow-md); */
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
 }
+
 html[data-theme='dark'] .cardContainer.cardContainerLink:hover {
   --ifm-card-background-color: #2d2d2d; /* original, non-hovered color is #242526 */
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css
index 778a2bbbe1..5d6f675ee8 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css
@@ -68,6 +68,7 @@
   .expandSidebarButtonIcon {
     transform: rotate(0);
   }
+
   html[dir='rtl'] .expandSidebarButtonIcon {
     transform: rotate(180deg);
   }
diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css
index 500afc336d..f9a09be722 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css
@@ -71,6 +71,7 @@
     transform: rotate(180deg);
     margin-top: 4px;
   }
+
   html[dir='rtl'] .collapseSidebarButtonIcon {
     transform: rotate(0);
   }
diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/styles.module.css
index 2fcd42e59f..e197c843f8 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/styles.module.css
@@ -9,6 +9,7 @@
   .menuLinkText {
     cursor: initial;
   }
+
   .menuLinkText:hover {
     background: none;
   }
diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebarItems/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocSidebarItems/styles.module.css
index 2fcd42e59f..e197c843f8 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocSidebarItems/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/DocSidebarItems/styles.module.css
@@ -9,6 +9,7 @@
   .menuLinkText {
     cursor: initial;
   }
+
   .menuLinkText:hover {
     background: none;
   }
diff --git a/packages/docusaurus-theme-classic/src/theme/Heading/styles.css b/packages/docusaurus-theme-classic/src/theme/Heading/styles.css
index e931a2a5be..8d988d6ba7 100644
--- a/packages/docusaurus-theme-classic/src/theme/Heading/styles.css
+++ b/packages/docusaurus-theme-classic/src/theme/Heading/styles.css
@@ -12,7 +12,7 @@
   user-select: none;
 }
 
-.hash-link:before {
+.hash-link::before {
   content: '#';
 }
 
diff --git a/packages/docusaurus-theme-classic/src/theme/TOCCollapsible/styles.module.css b/packages/docusaurus-theme-classic/src/theme/TOCCollapsible/styles.module.css
index a0002b940d..ed77b71fbe 100644
--- a/packages/docusaurus-theme-classic/src/theme/TOCCollapsible/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/TOCCollapsible/styles.module.css
@@ -20,7 +20,7 @@
   width: 100%;
 }
 
-.tocCollapsibleButton:after {
+.tocCollapsibleButton::after {
   content: '';
   background: var(--ifm-menu-link-sublist-icon) 50% 50% / 2rem 2rem no-repeat;
   filter: var(--ifm-menu-link-sublist-icon-filter);
@@ -45,6 +45,6 @@
   display: block;
 }
 
-.tocCollapsibleExpanded .tocCollapsibleButton:after {
+.tocCollapsibleExpanded .tocCollapsibleButton::after {
   transform: none;
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/Tag/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Tag/styles.module.css
index e5870d6b3a..db7f2bcbc1 100644
--- a/packages/docusaurus-theme-classic/src/theme/Tag/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/Tag/styles.module.css
@@ -33,8 +33,8 @@
   border-left: 0;
 }
 
-.tagWithCount:before,
-.tagWithCount:after {
+.tagWithCount::before,
+.tagWithCount::after {
   content: '';
   position: absolute;
   top: 50%;
@@ -42,7 +42,7 @@
   transition: inherit;
 }
 
-.tagWithCount:before {
+.tagWithCount::before {
   right: 100%;
   transform: translate(50%, -50%) rotate(-45deg);
   width: 1.18rem;
@@ -51,7 +51,7 @@
   border-bottom: 0;
 }
 
-.tagWithCount:after {
+.tagWithCount::after {
   left: 0;
   transform: translateY(-50%);
   width: 0.5rem;
diff --git a/packages/docusaurus-theme-classic/src/theme/Toggle/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Toggle/styles.module.css
index 5eef9f7810..c293660b85 100644
--- a/packages/docusaurus-theme-classic/src/theme/Toggle/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/Toggle/styles.module.css
@@ -39,8 +39,8 @@
   position: absolute;
   width: 14px;
   height: 10px;
-  top: 0px;
-  bottom: 0px;
+  top: 0;
+  bottom: 0;
   margin: auto 0;
   left: 8px;
   opacity: 0;
@@ -57,8 +57,8 @@
   position: absolute;
   width: 10px;
   height: 10px;
-  top: 0px;
-  bottom: 0px;
+  top: 0;
+  bottom: 0;
   margin: auto 0;
   right: 10px;
   opacity: 1;
@@ -84,7 +84,7 @@
 
 .toggleFocused .toggleTrackThumb,
 .toggle:hover .toggleTrackThumb {
-  box-shadow: 0px 0px 2px 3px var(--ifm-color-primary);
+  box-shadow: 0 0 2px 3px var(--ifm-color-primary);
 }
 
 /* stylelint-disable-next-line no-descending-specificity */
@@ -94,7 +94,7 @@
 }
 
 .toggle:active:not(.toggleDisabled) .toggleTrackThumb {
-  box-shadow: 0px 0px 5px 5px var(--ifm-color-primary);
+  box-shadow: 0 0 5px 5px var(--ifm-color-primary);
 }
 
 .toggleIcon {
diff --git a/packages/docusaurus-theme-common/src/components/Details/styles.module.css b/packages/docusaurus-theme-common/src/components/Details/styles.module.css
index 4f7311b9b6..58bb358ad6 100644
--- a/packages/docusaurus-theme-common/src/components/Details/styles.module.css
+++ b/packages/docusaurus-theme-common/src/components/Details/styles.module.css
@@ -26,7 +26,7 @@ CSS variables, meant to be overridden by final theme
   display: none;
 }
 
-.details > summary:before {
+.details > summary::before {
   position: absolute;
   top: 0.45rem;
   left: 0;
@@ -45,9 +45,9 @@ CSS variables, meant to be overridden by final theme
 }
 
 /* When JS disabled/failed to load: we use the open property for arrow animation: */
-.details[open]:not(.isBrowser) > summary:before,
+.details[open]:not(.isBrowser) > summary::before,
 /* When JS works: we use the data-attribute for arrow animation */
-.details[data-collapsed='false'].isBrowser > summary:before {
+.details[data-collapsed='false'].isBrowser > summary::before {
   transform: rotate(90deg);
 }
 
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css
index 8d9dfe4437..f3298c779e 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css
@@ -30,7 +30,7 @@
 .playgroundEditor {
   font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
     var(--ifm-font-family-monospace) !important;
-  /*rtl:ignore*/
+  /* rtl:ignore */
   direction: ltr;
 }
 
diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/styles.module.css b/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/styles.module.css
index 968f542b3e..6377499371 100644
--- a/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/styles.module.css
+++ b/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/styles.module.css
@@ -58,7 +58,7 @@
 }
 
 .searchResultItemSummary {
-  margin: 0.5rem 0 0 0;
+  margin: 0.5rem 0 0;
   font-style: italic;
 }
 
@@ -114,6 +114,6 @@
 
 :global(.search-result-match) {
   color: var(--docsearch-hit-color);
-  background: rgba(255, 215, 142, 0.25);
+  background: rgb(255 215 142 / 25%);
   padding: 0.09em 0;
 }
diff --git a/packages/docusaurus/src/client/nprogress.css b/packages/docusaurus/src/client/nprogress.css
index 376e577a72..a6a0ffbf1c 100644
--- a/packages/docusaurus/src/client/nprogress.css
+++ b/packages/docusaurus/src/client/nprogress.css
@@ -27,10 +27,10 @@
 
 #nprogress .peg {
   position: absolute;
-  right: 0px;
+  right: 0;
   width: 100px;
   height: 100%;
   box-shadow: 0 0 10px #29d, 0 0 5px #29d;
   opacity: 1;
-  transform: rotate(3deg) translate(0px, -4px);
+  transform: rotate(3deg) translate(0, -4px);
 }
diff --git a/website/docs/guides/markdown-features/markdown-features-tabs-styles.module.css b/website/docs/guides/markdown-features/markdown-features-tabs-styles.module.css
index 524f54cd07..713f6cd1d4 100644
--- a/website/docs/guides/markdown-features/markdown-features-tabs-styles.module.css
+++ b/website/docs/guides/markdown-features/markdown-features-tabs-styles.module.css
@@ -8,6 +8,7 @@
 .red {
   color: red;
 }
+
 .red[aria-selected='true'] {
   border-bottom-color: red;
 }
@@ -15,6 +16,7 @@
 .orange {
   color: orange;
 }
+
 .orange[aria-selected='true'] {
   border-bottom-color: orange;
 }
@@ -22,6 +24,7 @@
 .yellow {
   color: yellow;
 }
+
 .yellow[aria-selected='true'] {
   border-bottom-color: yellow;
 }
diff --git a/website/src/components/APITable/styles.module.css b/website/src/components/APITable/styles.module.css
index 1f85c66705..4048c94243 100644
--- a/website/src/components/APITable/styles.module.css
+++ b/website/src/components/APITable/styles.module.css
@@ -16,7 +16,7 @@
 .apiTable tbody tr:focus,
 .apiTable tbody tr:hover {
   outline: none;
-  box-shadow: 0px 0px 7px 0px inset var(--ifm-color-warning);
+  box-shadow: 0 0 7px 0 inset var(--ifm-color-warning);
   cursor: pointer;
   transition: box-shadow 0.2s;
 }
diff --git a/website/src/components/BrowserWindow/styles.module.css b/website/src/components/BrowserWindow/styles.module.css
index 0624f3446c..ef32d1a197 100644
--- a/website/src/components/BrowserWindow/styles.module.css
+++ b/website/src/components/BrowserWindow/styles.module.css
@@ -20,7 +20,7 @@
   padding: 0.5rem 1rem;
 }
 
-.row:after {
+.row::after {
   content: '';
   display: table;
   clear: both;
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index eedd259a06..67d7650839 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -10,46 +10,42 @@
   See css var + hsl color palette technique:
   https://blog.maximeheckel.com/posts/the-power-of-composition-with-css-variables/
    */
-  --site-primary-hue-saturation: 167, 68%;
-  --site-primary-hue-saturation-light: 167, 56%; /* do we really need this extra one? */
+  --site-primary-hue-saturation: 167 68%;
+  --site-primary-hue-saturation-light: 167 56%; /* do we really need this extra one? */
 
-  --ifm-color-primary: hsl(var(--site-primary-hue-saturation), 30%);
-  --ifm-color-primary-dark: hsl(var(--site-primary-hue-saturation), 26%);
-  --ifm-color-primary-darker: hsl(var(--site-primary-hue-saturation), 23%);
-  --ifm-color-primary-darkest: hsl(var(--site-primary-hue-saturation), 17%);
+  --ifm-color-primary: hsl(var(--site-primary-hue-saturation) 30%);
+  --ifm-color-primary-dark: hsl(var(--site-primary-hue-saturation) 26%);
+  --ifm-color-primary-darker: hsl(var(--site-primary-hue-saturation) 23%);
+  --ifm-color-primary-darkest: hsl(var(--site-primary-hue-saturation) 17%);
 
-  --ifm-color-primary-light: hsl(var(--site-primary-hue-saturation-light), 39%);
+  --ifm-color-primary-light: hsl(var(--site-primary-hue-saturation-light) 39%);
   --ifm-color-primary-lighter: hsl(
-    var(--site-primary-hue-saturation-light),
-    47%
+    var(--site-primary-hue-saturation-light) 47%
   );
   --ifm-color-primary-lightest: hsl(
-    var(--site-primary-hue-saturation-light),
-    58%
+    var(--site-primary-hue-saturation-light) 58%
   );
 
   --ifm-color-feedback-background: #fff;
   --site-color-favorite-background: #f6fdfd;
   --site-color-tooltip: #fff;
   --site-color-tooltip-background: #353738;
-  --site-color-svgIcon-favorite: #e9669e;
+  --site-color-svg-icon-favorite: #e9669e;
   --site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 25%);
 }
 
 html[data-theme='dark'] {
-  --ifm-color-primary: hsl(var(--site-primary-hue-saturation), 45%);
-  --ifm-color-primary-dark: hsl(var(--site-primary-hue-saturation), 41%);
-  --ifm-color-primary-darker: hsl(var(--site-primary-hue-saturation), 38%);
-  --ifm-color-primary-darkest: hsl(var(--site-primary-hue-saturation), 32%);
+  --ifm-color-primary: hsl(var(--site-primary-hue-saturation) 45%);
+  --ifm-color-primary-dark: hsl(var(--site-primary-hue-saturation) 41%);
+  --ifm-color-primary-darker: hsl(var(--site-primary-hue-saturation) 38%);
+  --ifm-color-primary-darkest: hsl(var(--site-primary-hue-saturation) 32%);
 
-  --ifm-color-primary-light: hsl(var(--site-primary-hue-saturation-light), 54%);
+  --ifm-color-primary-light: hsl(var(--site-primary-hue-saturation-light) 54%);
   --ifm-color-primary-lighter: hsl(
-    var(--site-primary-hue-saturation-light),
-    62%
+    var(--site-primary-hue-saturation-light) 62%
   );
   --ifm-color-primary-lightest: hsl(
-    var(--site-primary-hue-saturation-light),
-    73%
+    var(--site-primary-hue-saturation-light) 73%
   );
   --site-color-feedback-background: #f0f8ff;
   --site-color-favorite-background: #1d1e1e;
@@ -57,21 +53,21 @@ html[data-theme='dark'] {
 }
 
 .docusaurus-highlight-code-line {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: rgb(0 0 0 / 10%);
   display: block;
   margin: 0 calc(-1 * var(--ifm-pre-padding));
   padding: 0 var(--ifm-pre-padding);
 }
 
 html[data-theme='dark'] .docusaurus-highlight-code-line {
-  background-color: rgba(66, 66, 66, 0.3);
+  background-color: rgb(66 66 66 / 30%);
 }
 
 .header-github-link:hover {
   opacity: 0.6;
 }
 
-.header-github-link:before {
+.header-github-link::before {
   content: '';
   width: 24px;
   height: 24px;
@@ -80,7 +76,7 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
     no-repeat;
 }
 
-html[data-theme='dark'] .header-github-link:before {
+html[data-theme='dark'] .header-github-link::before {
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
     no-repeat;
 }
@@ -113,7 +109,7 @@ html[data-theme='light'] .DocSearch {
   /* --docsearch-primary-color: var(--ifm-color-primary); */
   /* --docsearch-text-color: var(--ifm-font-color-base); */
   --docsearch-muted-color: var(--ifm-color-emphasis-700);
-  --docsearch-container-background: rgba(94, 100, 112, 0.7);
+  --docsearch-container-background: rgb(94 100 112 / 70%);
   /* Modal */
   --docsearch-modal-background: var(--ifm-color-secondary-lighter);
   /* Search box */
@@ -130,7 +126,7 @@ html[data-theme='light'] .DocSearch {
 html[data-theme='dark'] .DocSearch {
   --docsearch-text-color: var(--ifm-font-color-base);
   --docsearch-muted-color: var(--ifm-color-secondary-darkest);
-  --docsearch-container-background: rgba(47, 55, 69, 0.7);
+  --docsearch-container-background: rgb(47 55 69 / 70%);
   /* Modal */
   --docsearch-modal-background: var(--ifm-background-color);
   /* Search box */
@@ -151,12 +147,10 @@ html[data-theme='dark'] .DocSearch {
 
 div[class^='announcementBar_'] {
   --site-announcement-bar-stripe-color1: hsl(
-    var(--site-primary-hue-saturation),
-    85%
+    var(--site-primary-hue-saturation) 85%
   );
   --site-announcement-bar-stripe-color2: hsl(
-    var(--site-primary-hue-saturation),
-    95%
+    var(--site-primary-hue-saturation) 95%
   );
   background: repeating-linear-gradient(
     35deg,
@@ -175,8 +169,7 @@ div[class^='announcementBar_'] {
 .screen-reader-only {
   border: 0;
   clip: rect(0 0 0 0);
-  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
-  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
+  clip-path: polygon(0 0, 0 0, 0 0);
   height: 1px;
   margin: -1px;
   overflow: hidden;
diff --git a/website/src/pages/showcase/_components/ShowcaseFilterToggle/styles.module.css b/website/src/pages/showcase/_components/ShowcaseFilterToggle/styles.module.css
index e3e1be181c..4fde44d184 100644
--- a/website/src/pages/showcase/_components/ShowcaseFilterToggle/styles.module.css
+++ b/website/src/pages/showcase/_components/ShowcaseFilterToggle/styles.module.css
@@ -26,7 +26,7 @@
 .checkboxLabel:hover {
   opacity: 1;
   box-shadow: var(--ifm-global-shadow-md),
-    0px 0px 2px 1px var(--ifm-color-primary-dark);
+    0 0 2px 1px var(--ifm-color-primary-dark);
 }
 
 .checkboxLabel::after {
diff --git a/website/src/pages/showcase/_components/ShowcaseTagSelect/styles.module.css b/website/src/pages/showcase/_components/ShowcaseTagSelect/styles.module.css
index dcde35e1a0..7367147036 100644
--- a/website/src/pages/showcase/_components/ShowcaseTagSelect/styles.module.css
+++ b/website/src/pages/showcase/_components/ShowcaseTagSelect/styles.module.css
@@ -7,7 +7,7 @@
 
 .checkboxLabel:hover {
   opacity: 1;
-  box-shadow: 0px 0px 2px 1px var(--ifm-color-secondary-darkest);
+  box-shadow: 0 0 2px 1px var(--ifm-color-secondary-darkest);
 }
 
 input[type='checkbox'] + .checkboxLabel {
@@ -34,5 +34,5 @@ input:checked + .checkboxLabel {
 
 input:checked + .checkboxLabel:hover {
   opacity: 0.75;
-  box-shadow: 0px 0px 2px 1px var(--ifm-color-primary-dark);
+  box-shadow: 0 0 2px 1px var(--ifm-color-primary-dark);
 }
diff --git a/website/src/pages/showcase/styles.module.css b/website/src/pages/showcase/styles.module.css
index 538c4ec571..f9e5e70e9d 100644
--- a/website/src/pages/showcase/styles.module.css
+++ b/website/src/pages/showcase/styles.module.css
@@ -32,7 +32,7 @@
 
 .checkboxList,
 .showcaseList {
-  padding: 0px;
+  padding: 0;
   list-style: none;
 }
 
@@ -88,7 +88,7 @@
 
 .svgIconFavoriteXs,
 .svgIconFavorite {
-  color: var(--site-color-svgIcon-favorite);
+  color: var(--site-color-svg-icon-favorite);
 }
 
 .svgIconFavoriteXs {
diff --git a/website/src/pages/styles.module.css b/website/src/pages/styles.module.css
index 9df7892b17..82ae472bac 100644
--- a/website/src/pages/styles.module.css
+++ b/website/src/pages/styles.module.css
@@ -39,7 +39,7 @@
 .announcementDark {
   background-color: #20232a;
   color: #fff;
-  --ifm-link-color: hsl(var(--site-primary-hue-saturation), 45%);
+  --ifm-link-color: hsl(var(--site-primary-hue-saturation) 45%);
 }
 
 .announcementInner {
@@ -50,8 +50,8 @@
 .hero {
   background-color: #2b3137;
   padding: 48px;
-  --ifm-color-primary: hsl(var(--site-primary-hue-saturation), 45%);
-  --ifm-color-primary-dark: hsl(var(--site-primary-hue-saturation), 41%);
+  --ifm-color-primary: hsl(var(--site-primary-hue-saturation) 45%);
+  --ifm-color-primary-dark: hsl(var(--site-primary-hue-saturation) 41%);
 }
 
 .heroInner {
@@ -70,7 +70,7 @@
   color: var(--ifm-color-primary);
 }
 
-@keyframes jackInTheBox {
+@keyframes jack-in-the-box {
   from {
     opacity: 0;
     transform: scale(0.1) rotate(30deg);
@@ -93,7 +93,7 @@
 
 .heroLogo {
   animation-duration: 2s;
-  animation-name: jackInTheBox;
+  animation-name: jack-in-the-box;
   float: right;
   margin-top: 20px;
   padding: 0 20px 20px;
diff --git a/website/versioned_docs/version-2.0.0-beta.14/guides/markdown-features/markdown-features-tabs-styles.module.css b/website/versioned_docs/version-2.0.0-beta.14/guides/markdown-features/markdown-features-tabs-styles.module.css
index 524f54cd07..713f6cd1d4 100644
--- a/website/versioned_docs/version-2.0.0-beta.14/guides/markdown-features/markdown-features-tabs-styles.module.css
+++ b/website/versioned_docs/version-2.0.0-beta.14/guides/markdown-features/markdown-features-tabs-styles.module.css
@@ -8,6 +8,7 @@
 .red {
   color: red;
 }
+
 .red[aria-selected='true'] {
   border-bottom-color: red;
 }
@@ -15,6 +16,7 @@
 .orange {
   color: orange;
 }
+
 .orange[aria-selected='true'] {
   border-bottom-color: orange;
 }
@@ -22,6 +24,7 @@
 .yellow {
   color: yellow;
 }
+
 .yellow[aria-selected='true'] {
   border-bottom-color: yellow;
 }
diff --git a/yarn.lock b/yarn.lock
index cd16a7f759..541254f101 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -17375,6 +17375,13 @@ stylelint-config-recommended@^6.0.0:
   resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-6.0.0.tgz#fd2523a322836005ad9bf473d3e5534719c09f9d"
   integrity sha512-ZorSSdyMcxWpROYUvLEMm0vSZud2uB7tX1hzBZwvVY9SV/uly4AvvJPPhCcymZL3fcQhEQG5AELmrxWqtmzacw==
 
+stylelint-config-standard@^24.0.0:
+  version "24.0.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-24.0.0.tgz#6823f207ab997ae0b641f9a636d007cc44d77541"
+  integrity sha512-+RtU7fbNT+VlNbdXJvnjc3USNPZRiRVp/d2DxOF/vBDDTi0kH5RX2Ny6errdtZJH3boO+bmqIYEllEmok4jiuw==
+  dependencies:
+    stylelint-config-recommended "^6.0.0"
+
 stylelint@^13.2.1:
   version "13.13.1"
   resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-13.13.1.tgz#fca9c9f5de7990ab26a00f167b8978f083a18f3c"