chore: add baseline stylelint rules (#6372)

* chore: add baseline stylelint rules

Use the Prettier config so not to conflict with rules.
Add the Stylelint baseline recommended rules to catch additional lissues

* enable those two rules

* ooops

* refactor scripts

* revert script changes

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

.stylelintignore

@@ -1,2 +1,11 @@
+__fixtures__
+build
+coverage
+examples/
+
+packages/lqip-loader/lib/
+packages/docusaurus/lib/
+packages/docusaurus-*/lib/*
+packages/docusaurus-*/lib-next/
+packages/create-docusaurus/lib/*
 packages/create-docusaurus/templates/
-examples

.stylelintrc.js

@@ -6,8 +6,16 @@
  */
 
 module.exports = {
+  extends: ['stylelint-config-recommended', 'stylelint-config-prettier'],
   plugins: ['stylelint-copyright'],
   rules: {
     'docusaurus/copyright-header': true,
+    'selector-pseudo-class-no-unknown': [
+      true,
+      {
+        // :global is a CSS modules feature to escape from class name hashing
+        ignorePseudoClasses: ['global'],
+      },
+    ],
   },
 };

package.json

@@ -109,6 +109,8 @@
     "serve": "^12.0.1",
     "sharp": "^0.29.1",
     "stylelint": "^14.2.0",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-recommended": "^6.0.0",
     "tslib": "^2.3.1",
     "typescript": "^4.5.2"
   },

packages/docusaurus-cssnano-preset/src/remove-overridden-custom-properties/__tests__/index.test.js

@@ -12,7 +12,7 @@ const postCssRemoveOverriddenCustomProperties = require('../index');
 
 const processFixture = (name) => {
   const input = vfile.readSync(
-    path.join(__dirname, 'fixtures', `${name}.css`),
+    path.join(__dirname, '__fixtures__', `${name}.css`),
     'utf8',
   );
   const output = postcss([postCssRemoveOverriddenCustomProperties]).process(

packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css

@@ -26,17 +26,17 @@
   border-top-right-radius: var(--ifm-global-radius);
 }
 
-.codeBlockTitle + .codeBlockContent .codeBlock {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
 .codeBlock {
   margin: 0;
   padding: 0;
   border-radius: var(--ifm-global-radius);
 }
 
+.codeBlockTitle + .codeBlockContent .codeBlock {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
 .codeBlockStandalone {
   padding: 0;
   border-radius: var(--ifm-global-radius);
@@ -55,9 +55,9 @@
   transition: opacity 200ms ease-in-out;
 }
 
-.codeBlockTitle:hover + .codeBlockContent .copyButton,
+.copyButton:focus,
 .codeBlockContent:hover > .copyButton,
-.copyButton:focus {
+.codeBlockTitle:hover + .codeBlockContent .copyButton {
   opacity: 1;
 }
 

packages/docusaurus-theme-classic/src/theme/DocItem/styles.module.css

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.docItemContainer article > *:first-child,
-.docItemContainer header + * {
+.docItemContainer header + *,
+.docItemContainer article > *:first-child {
   margin-top: 0;
 }
 

packages/docusaurus-theme-classic/src/theme/Toggle/styles.module.css

@@ -47,8 +47,8 @@
   transition: opacity 0.25s ease;
 }
 
-[data-theme='dark'] .toggle .toggleTrackCheck,
-.toggleChecked .toggleTrackCheck {
+.toggleChecked .toggleTrackCheck,
+[data-theme='dark'] .toggle .toggleTrackCheck {
   opacity: 1;
   transition: opacity 0.25s ease;
 }
@@ -65,8 +65,8 @@
   transition: opacity 0.25s ease;
 }
 
-[data-theme='dark'] .toggle .toggleTrackX,
-.toggleChecked .toggleTrackX {
+.toggleChecked .toggleTrackX,
+[data-theme='dark'] .toggle .toggleTrackX {
   opacity: 0;
 }
 
@@ -82,16 +82,17 @@
   transition: all 0.25s ease;
 }
 
-[data-theme='dark'] .toggle .toggleTrackThumb,
-.toggleChecked .toggleTrackThumb {
-  left: 27px;
-}
-
 .toggleFocused .toggleTrackThumb,
 .toggle:hover .toggleTrackThumb {
   box-shadow: 0px 0px 2px 3px var(--ifm-color-primary);
 }
 
+/* stylelint-disable-next-line no-descending-specificity */
+.toggleChecked .toggleTrackThumb,
+[data-theme='dark'] .toggle .toggleTrackThumb {
+  left: 27px;
+}
+
 .toggle:active:not(.toggleDisabled) .toggleTrackThumb {
   box-shadow: 0px 0px 5px 5px var(--ifm-color-primary);
 }

website/src/components/BrowserWindow/styles.module.css

@@ -46,7 +46,7 @@ html[data-theme='light'] {
   background-color: var(--ifm-background-color);
   color: var(--ifm-color-gray-800);
   padding: 5px 15px;
-  font: 400 13px Arial;
+  font: 400 13px Arial, sans-serif;
   user-select: none;
 }
 

website/src/pages/showcase/_components/ShowcaseCard/styles.module.css

@@ -52,6 +52,10 @@
   border: none;
 }
 
+.showcaseCardSrcBtn:focus-visible {
+  background-color: var(--ifm-color-secondary-dark);
+}
+
 html[data-theme='dark'] .showcaseCardSrcBtn {
   background-color: var(--ifm-color-emphasis-200) !important;
   color: inherit;
@@ -61,10 +65,6 @@ html[data-theme='dark'] .showcaseCardSrcBtn:hover {
   background-color: var(--ifm-color-emphasis-300) !important;
 }
 
-.showcaseCardSrcBtn:focus-visible {
-  background-color: var(--ifm-color-secondary-dark);
-}
-
 .showcaseCardBody {
   font-size: smaller;
   line-height: 1.66;

website/src/pages/showcase/_components/ShowcaseFilterToggle/styles.module.css

@@ -29,16 +29,6 @@
     0px 0px 2px 1px var(--ifm-color-primary-dark);
 }
 
-input:focus-visible ~ .checkboxLabel::after {
-  outline: 2px solid currentColor;
-}
-
-.checkboxLabel > * {
-  font-size: 0.8rem;
-  color: inherit;
-  transition: opacity 150ms ease-in 50ms;
-}
-
 .checkboxLabel::after {
   position: absolute;
   content: '';
@@ -52,6 +42,16 @@ input:focus-visible ~ .checkboxLabel::after {
   transform: translateX(calc(var(--width) / 2 - var(--border)));
 }
 
+input:focus-visible ~ .checkboxLabel::after {
+  outline: 2px solid currentColor;
+}
+
+.checkboxLabel > * {
+  font-size: 0.8rem;
+  color: inherit;
+  transition: opacity 150ms ease-in 50ms;
+}
+
 input:checked ~ .checkboxLabel::after {
   transform: translateX(calc(-1 * var(--border)));
 }

website/src/pages/showcase/_components/ShowcaseTagSelect/styles.module.css

@@ -5,6 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+.checkboxLabel:hover {
+  opacity: 1;
+  box-shadow: 0px 0px 2px 1px var(--ifm-color-secondary-darkest);
+}
+
 input[type='checkbox'] + .checkboxLabel {
   display: flex;
   align-items: center;
@@ -17,11 +22,6 @@ input[type='checkbox'] + .checkboxLabel {
   border: 2px solid var(--ifm-color-secondary-darkest);
 }
 
-.checkboxLabel:hover {
-  opacity: 1;
-  box-shadow: 0px 0px 2px 1px var(--ifm-color-secondary-darkest);
-}
-
 input:focus-visible + .checkboxLabel {
   outline: 2px solid currentColor;
 }

website/src/pages/showcase/styles.module.css

@@ -41,9 +41,6 @@
   white-space: nowrap;
   height: 32px;
   font-size: 0.8rem;
-}
-
-.checkboxListItem {
   margin-top: 0.5rem;
   margin-right: 0.5rem;
 }

yarn.lock

@@ -17374,6 +17374,16 @@ stylehacks@^5.0.1:
     browserslist "^4.16.0"
     postcss-selector-parser "^6.0.4"
 
+stylelint-config-prettier@^9.0.3:
+  version "9.0.3"
+  resolved "https://registry.yarnpkg.com/stylelint-config-prettier/-/stylelint-config-prettier-9.0.3.tgz#0dccebeff359dcc393c9229184408b08964d561c"
+  integrity sha512-5n9gUDp/n5tTMCq1GLqSpA30w2sqWITSSEiAWQlpxkKGAUbjcemQ0nbkRvRUa0B1LgD3+hCvdL7B1eTxy1QHJg==
+
+stylelint-config-recommended@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-6.0.0.tgz#fd2523a322836005ad9bf473d3e5534719c09f9d"
+  integrity sha512-ZorSSdyMcxWpROYUvLEMm0vSZud2uB7tX1hzBZwvVY9SV/uly4AvvJPPhCcymZL3fcQhEQG5AELmrxWqtmzacw==
+
 stylelint@^13.2.1:
   version "13.13.1"
   resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-13.13.1.tgz#fca9c9f5de7990ab26a00f167b8978f083a18f3c"