chore: add stylelint linter for css/scss (@nadalaba) (monkeytypegame#7718)

supersedes monkeytypegame#7716

---------

Co-authored-by: Jack <jack@monkeytype.com>

Author: 2 people

.github/workflows/monkey-ci.yml

@@ -28,7 +28,7 @@ jobs:
       should-build-be: ${{ steps.export-changes.outputs.should-build-be }}
       should-build-fe: ${{ steps.export-changes.outputs.should-build-fe }}
       should-build-pkg: ${{ steps.export-changes.outputs.should-build-pkg }}
-      assets-json: ${{ steps.export-changes.outputs.assets-json }}
+      assets-or-styles: ${{ steps.export-changes.outputs.assets-or-styles }}
 
     steps:
       - name: Full checkout
@@ -41,8 +41,9 @@ jobs:
         id: filter
         with:
           filters: |
-            json:
+            assets-or-styles:
               - 'frontend/static/**/*'
+              - '**/*.{scss,css}'
             be-src:
               - 'backend/**/*.{ts,js,json,lua,css,html}'
               - 'backend/package.json'
@@ -64,13 +65,13 @@ jobs:
           echo "should-build-pkg=${{ steps.filter.outputs.pkg-src }}" >> $GITHUB_OUTPUT
           echo "should-build-be=${{ steps.filter.outputs.be-src }}" >> $GITHUB_OUTPUT
           echo "should-build-fe=${{ steps.filter.outputs.fe-src }}" >> $GITHUB_OUTPUT
-          echo "assets-json=${{ steps.filter.outputs.json }}" >> $GITHUB_OUTPUT
+          echo "assets-or-styles=${{ steps.filter.outputs.assets-or-styles }}" >> $GITHUB_OUTPUT
 
   prime-cache:
     name: prime-cache
     runs-on: ubuntu-latest
     needs: [pre-ci]
-    if: needs.pre-ci.outputs.should-build-be == 'true' || needs.pre-ci.outputs.should-build-fe == 'true' || needs.pre-ci.outputs.should-build-pkg == 'true' || needs.pre-ci.outputs.assets-json == 'true' || contains(github.event.pull_request.labels.*.name, 'force-full-ci')
+    if: needs.pre-ci.outputs.should-build-be == 'true' || needs.pre-ci.outputs.should-build-fe == 'true' || needs.pre-ci.outputs.should-build-pkg == 'true' || needs.pre-ci.outputs.assets-or-styles == 'true' || contains(github.event.pull_request.labels.*.name, 'force-full-ci')
     steps:
       - name: Checkout pnpm-lock
         uses: actions/checkout@v4
@@ -216,7 +217,7 @@ jobs:
     name: ci-assets
     needs: [pre-ci, prime-cache]
     runs-on: ubuntu-latest
-    if: needs.pre-ci.outputs.assets-json == 'true' || contains(github.event.pull_request.labels.*.name, 'force-full-ci')
+    if: needs.pre-ci.outputs.assets-or-styles == 'true' || contains(github.event.pull_request.labels.*.name, 'force-full-ci')
     steps:
       - uses: actions/checkout@v4
         with:
@@ -228,6 +229,10 @@ jobs:
         id: filter
         with:
           filters: |
+            styles:
+              - '**/*.{scss,css}'
+            json:
+              - 'frontend/static/**/*.json'
             languages:
               - 'frontend/static/languages/**'
             quotes:
@@ -265,7 +270,12 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Lint styles
+        if: steps.filter.outputs.styles == 'true'
+        run: npm run lint-styles
+
       - name: Lint JSON
+        if: steps.filter.outputs.json == 'true'
         run: npm run lint-json-assets
 
       - name: Validate language assets

backend/private/style.css

@@ -81,7 +81,7 @@ body {
   bottom: 3rem;
   background-color: var(--sub-alt-color);
   color: var(--text-color);
-  font-style: bold;
+  font-weight: bold;
   border-radius: 3px;
   padding: 1rem 2rem;
   cursor: pointer;
@@ -189,10 +189,6 @@ input[type="checkbox"] {
   }
 }
 
-.tooltip:hover .tooltip-text {
-  display: block;
-}
-
 .tooltip-text {
   display: none;
   color: var(--text-color);
@@ -202,3 +198,7 @@ input[type="checkbox"] {
   padding: 10px;
   border-radius: var(--roundness);
 }
+
+.tooltip:hover .tooltip-text {
+  display: block;
+}

frontend/package.json

@@ -6,6 +6,8 @@
   "scripts": {
     "lint": "oxlint . --type-aware --type-check",
     "lint-fast": "oxlint .",
+    "lint-styles": "stylelint \"**/*.{scss,css}\"",
+    "lint-styles-fix": "stylelint \"**/*.{scss,css}\" --fix",
     "lint-json": "eslint static/**/*.json",
     "check-assets": "tsx ./scripts/check-assets.ts",
     "audit": "vite-bundle-visualizer",

frontend/src/styles/account-settings.scss

@@ -141,7 +141,6 @@
               td {
                 padding: 0.5rem;
                 background: var(--bg-color);
-                position: -webkit-sticky;
                 position: sticky;
                 top: 0;
                 z-index: 99;
@@ -159,7 +158,6 @@
             tfoot {
               td {
                 padding: 1rem 0.5rem;
-                position: -webkit-sticky;
                 position: sticky;
                 bottom: -5px;
                 background: var(--bg-color);

frontend/src/styles/account.scss

@@ -152,7 +152,7 @@
 
     &.history {
       table td {
-        -webkit-appearance: unset;
+        appearance: unset;
       }
 
       table tr {
@@ -170,10 +170,8 @@
         padding: 0.5rem;
         border-radius: var(--roundness);
         cursor: pointer;
-        -webkit-transition: 0.25s;
         transition: 0.25s;
-        -webkit-user-select: none;
-        display: -ms-grid;
+        user-select: none;
         display: grid;
         -ms-flex-line-pack: center;
         align-content: center;

frontend/src/styles/buttons.scss

@@ -27,7 +27,6 @@ button,
 input[type="button"],
 input[type="reset"],
 input[type="submit"] {
-  text-align: center;
   color: var(--text-color);
   cursor: pointer;
   transition:
@@ -38,11 +37,9 @@ input[type="submit"] {
   border-radius: var(--roundness);
   background: var(--sub-alt-color);
   text-align: center;
-  -webkit-user-select: none;
   user-select: none;
   align-content: center;
   align-items: center;
-  height: -moz-min-content;
   height: min-content;
   line-height: 1.25;
   appearance: none;
@@ -115,10 +112,8 @@ button.text,
   border-radius: var(--roundness);
   background: none;
   text-align: center;
-  -webkit-user-select: none;
   user-select: none;
   align-content: center;
-  height: -moz-min-content;
   height: min-content;
   line-height: 1.25;
   appearance: none;

frontend/src/styles/caret.scss

@@ -65,7 +65,6 @@
 
   &.block {
     width: 0.5em;
-    border-radius: 0;
     z-index: -1;
     border-radius: 0.05em;
   }

frontend/src/styles/commandline.scss

@@ -60,13 +60,11 @@
     }
 
     .suggestions {
-      display: block;
       @extend .ffscroll;
       overflow-y: scroll;
       max-height: calc(100vh - 12rem - 3rem);
       display: grid;
       cursor: pointer;
-      -webkit-user-select: none;
       user-select: none;
 
       .command {

frontend/src/styles/core.scss

@@ -292,7 +292,6 @@ kbd {
     grid-column: 1/2;
     grid-row: 1/2;
     place-self: center center;
-    display: grid;
     place-content: center center;
     overflow: hidden;
     display: inline-block;
@@ -321,7 +320,6 @@ kbd {
   color: var(--text-color);
   border-radius: calc(var(--roundness) / 2);
   // padding: 0.15em 0.5em;
-  -webkit-user-select: none;
   user-select: none;
   display: grid;
   grid-template-columns: max-content auto;
@@ -375,7 +373,7 @@ kbd {
 }
 
 // mouseover texts
-[aria-label][data-balloon-pos]:after {
+[aria-label][data-balloon-pos]::after {
   font-family: var(--font);
   font-size: var(--balloon-font-size);
   line-height: var(--balloon-font-size);
@@ -401,7 +399,6 @@ table {
   z-index: 0;
   td.sortable:hover {
     cursor: pointer;
-    -webkit-user-select: none;
     user-select: none;
     background-color: var(--sub-alt-color);
   }

frontend/src/styles/fontawesome-5.scss

@@ -2,7 +2,7 @@
 @import "@fortawesome/fontawesome-free/scss/_mixins.scss";
 @import "@fortawesome/fontawesome-free/scss/_core.scss";
 
-/** fixed-with **/
+/** fixed-width **/
 @import "@fortawesome/fontawesome-free/scss/_fixed-width.scss"; //fa-fw
 /** animated **/
 @import "@fortawesome/fontawesome-free/scss/_animated.scss"; //fa-spin