setup Stylelint for website, adjust rules, fix warnings (#5140)

* setup Stylelint for website, adjust rules, fix warnings

* also lint swizzled CSS files

* fix CI checks command

* move stylelint deps, deduplicate lock

Author: Simek

website/.stylelintrc.json

@@ -0,0 +1,14 @@
+{
+  "plugins": ["stylelint-scss"],
+  "extends": ["stylelint-config-standard-scss"],
+  "rules": {
+    "at-rule-no-unknown": null,
+    "custom-property-pattern": null,
+    "alpha-value-notation": "number",
+    "layer-name-pattern": null,
+    "media-feature-range-notation": "prefix",
+    "selector-class-pattern": null,
+    "selector-pseudo-element-colon-notation": "single",
+    "scss/at-rule-no-unknown": true
+  }
+}

website/package.json

@@ -25,10 +25,11 @@
     "format:examples": "eslint-examples-jsx --fix && eslint-examples-tsx --fix",
     "prettier": "yarn format:style",
     "lint": "yarn --cwd ../ lint:website",
+    "lint:styles": "stylelint **/*.{scss,css}",
     "lint:examples": "eslint-examples-jsx && eslint-examples-tsx && tsc-examples",
     "lint:markdown:images": "node ../scripts/src/image-check.ts",
     "lint:markdown:links": "remark ../docs --quiet -r .remarkrc.withBrokenLinks.mjs",
-    "ci:lint": "yarn lint && yarn lint:examples && yarn lint:markdown:images && prettier --check src/**/*.scss",
+    "ci:lint": "yarn lint && yarn lint:styles && yarn lint:examples && yarn lint:markdown:images && prettier --check src/**/*.scss",
     "pwa:generate": "npx pwa-asset-generator ./static/img/header_logo.svg ./static/img/pwa --padding '40px' --background 'rgb(32, 35, 42)' --icon-only --opaque true",
     "update-redirects": "node ../scripts/src/update-redirects.ts",
     "build:vercel": "docusaurus build",
@@ -76,6 +77,9 @@
     "prettier": "^3.8.4",
     "remark-cli": "^12.0.1",
     "sass": "1.101.0",
+    "stylelint": "^17.13.0",
+    "stylelint-config-standard-scss": "^17.0.0",
+    "stylelint-scss": "^7.2.0",
     "typescript": "^6.0.3"
   }
 }

website/src/components/Home/Community/styles.module.css

@@ -20,7 +20,7 @@
 @media only screen and (max-width: 900px) {
   .featureContainer {
     flex-direction: column;
-    gap: 0rem;
+    gap: 0;
     max-width: 600px;
   }
 

website/src/components/Home/Framework/styles.module.css

@@ -16,7 +16,7 @@
   border: 1px solid var(--home-border);
   border-radius: 12px;
   overflow: hidden;
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.03);
+  box-shadow: 0 4px 8px rgb(0 0 0 / 0.03);
   background-color: var(--home-background);
   display: flex;
   flex-direction: column;

website/src/components/Home/Hero/styles.module.css

@@ -121,7 +121,6 @@
 }
 
 .secondaryButton {
-  border: none;
   padding: 10px 24px;
   border-radius: 99rem;
   font-weight: bold;

website/src/components/Home/Platforms/styles.module.css

@@ -32,10 +32,9 @@
   background-color: var(--home-background);
   border-radius: 0.5rem;
   border: 1px solid var(--home-border);
-  overflow: hidden;
   position: relative;
   height: calc(100% + 4rem);
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.03);
+  box-shadow: 0 4px 8px rgb(0 0 0 / 0.03);
   overflow: hidden;
 }
 
@@ -121,9 +120,10 @@
 @media only screen and (max-width: 450px) {
   .codeEditorContentContainer pre,
   .codeEditorContentContainer code {
-    padding: 16px 16px;
+    padding: 16px;
     font-size: 3.2vw;
   }
+
   .deviceContainer {
     width: calc(100% - 2rem);
   }

website/src/components/Home/Watch/styles.module.css

@@ -15,7 +15,7 @@
 .videoContainer {
   border: 1px solid var(--home-border);
   border-radius: 12px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
+  box-shadow: 0 4px 8px rgb(0 0 0 / 0.03);
   padding: 16px;
   display: flex;
   flex-direction: column;

website/src/css/_shared.scss

@@ -26,7 +26,7 @@
 
 %hash-link-style {
   &,
-  &::before {
+  &:before {
     color: var(--subtle);
     border-bottom: 0 !important;
   }