feat: add a css linter (#56823)

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

.lintstagedrc.js

@@ -25,7 +25,7 @@ module.exports = {
       ];
     }
   },
-  '*.!(js|ts|tsx)': files => {
+  '*.!(js|ts|tsx|css)': files => {
     if (completedStages.has('not-js')) return [];
 
     if (files.length > 10) {
@@ -49,5 +49,16 @@ module.exports = {
         filename => `node ./tools/scripts/lint/index.js '${filename}'`
       );
     }
+  },
+
+  '*.css': files => {
+    if (completedStages.has('css')) return [];
+
+    if (files.length > 10) {
+      completedStages.add('css');
+      return 'pnpm run stylelint --fix .';
+    } else {
+      return files.map(filename => `stylelint '${filename}'`);
+    }
   }
 };

client/.stylelintrc.json

@@ -0,0 +1,23 @@
+{
+  "rules": {
+    "no-invalid-double-slash-comments": true,
+    "no-duplicate-selectors": true,
+    "font-family-no-duplicate-names": true,
+    "declaration-block-no-shorthand-property-overrides": true,
+    "declaration-block-no-duplicate-custom-properties": true,
+    "declaration-block-no-duplicate-properties": [
+      true,
+      {
+        "ignore": ["consecutive-duplicates-with-different-values"]
+      }
+    ],
+    "comment-no-empty": true,
+    "color-no-invalid-hex": true,
+    "block-no-empty": true,
+    "shorthand-property-no-redundant-values": true,
+    "keyframe-declaration-no-important": true,
+    "no-duplicate-at-import-rules": true,
+    "named-grid-areas-no-invalid": true,
+    "no-invalid-position-at-import-rule": true
+  }
+}

client/package.json

@@ -34,7 +34,8 @@
     "serve-ci": "serve -l 8000 -c serve.json public",
     "prestand-alone": "pnpm run prebuild",
     "stand-alone": "gatsby develop",
-    "validate-keys": "ts-node --project ../tsconfig.json ../tools/scripts/lint/validate-keys"
+    "validate-keys": "ts-node --project ../tsconfig.json ../tools/scripts/lint/validate-keys",
+    "lint-css": "stylelint '**/*.css'"
   },
   "dependencies": {
     "@babel/plugin-proposal-export-default-from": "7.23.3",
@@ -169,6 +170,7 @@
     "react-test-renderer": "16.14.0",
     "redux-saga-test-plan": "4.0.6",
     "serve": "13.0.4",
+    "stylelint": "16.12.0",
     "ts-node": "10.9.2",
     "webpack": "5.90.3"
   }

client/src/components/profile/components/camper.css

@@ -32,7 +32,7 @@
 .supporter svg {
   height: 1.2em;
   width: auto;
-  margin: 0 0.2em -0.3em 0.2em;
+  margin: 0 0.2em -0.3em;
 }
 
 .profile-meta-container {

client/src/components/search/searchBar/searchbar-base.css

@@ -86,11 +86,15 @@
   display: block;
   width: 70px;
   height: auto;
+  margin-inline-start: 0.3rem;
 }
 .ais-RatingMenu-starIcon {
   display: block;
-  width: 20px;
   height: 20px;
+  position: relative;
+  top: -1px;
+  width: 15px;
+  fill: #ffc168;
 }
 .ais-SearchBox-input::-ms-clear,
 .ais-SearchBox-input::-ms-reveal {
@@ -113,21 +117,23 @@
   height: 6px;
   top: 0px;
   width: 100%;
+  position: relative;
+  background-color: #ffffff;
+  border: 1px solid #aaa;
+  border-color: #878faf;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
 }
 .ais-RangeSlider .rheostat-handle {
   margin-inline-start: -12px;
   top: -7px;
-}
+  border-color: #878faf;
-.ais-RangeSlider .rheostat-background {
-  position: relative;
-  background-color: #ffffff;
-  border: 1px solid #aaa;
 }
 .ais-RangeSlider .rheostat-progress {
   position: absolute;
   top: 1px;
   height: 4px;
-  background-color: #333;
+  background-color: #495588;
 }
 .rheostat-handle {
   position: relative;
@@ -539,20 +545,6 @@ a[class^='ais-'] {
 .ais-Stats-text {
   font-size: 0.8rem;
 }
-.ais-PoweredBy-logo {
-  margin-inline-start: 0.3rem;
-}
-.ais-RangeSlider .rheostat-progress {
-  background-color: #495588;
-}
-.ais-RangeSlider .rheostat-background {
-  border-color: #878faf;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-.ais-RangeSlider .rheostat-handle {
-  border-color: #878faf;
-}
 .ais-RangeSlider .rheostat-marker {
   background-color: #878faf;
 }
@@ -572,12 +564,6 @@ a[class^='ais-'] {
 .ais-RatingMenu-link > * + * {
   margin-inline-start: 0.3rem;
 }
-.ais-RatingMenu-starIcon {
-  position: relative;
-  top: -1px;
-  width: 15px;
-  fill: #ffc168;
-}
 .ais-RatingMenu-item--disabled .ais-RatingMenu-starIcon {
   fill: #c4c8d8;
 }

package.json

@@ -52,6 +52,7 @@
     "knip:all": "npx -y knip@5 ",
     "prelint": "pnpm run -F=client predevelop",
     "lint": "NODE_OPTIONS=\"--max-old-space-size=7168\" npm-run-all create:shared -p lint:*",
+    "lint:client-css": "cd ./client && pnpm run lint-css",
     "lint:challenges": "cd ./curriculum && pnpm run lint",
     "lint:js": "eslint --cache --max-warnings 0 .",
     "lint:ts": "tsc && tsc -p shared && tsc -p api",