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

.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

frontend/src/styles/fonts.scss

@@ -1,7 +1,7 @@
 @use "sass:map";
 
 @font-face {
-  font-family: "Vazirharf";
+  font-family: Vazirharf;
   font-style: normal;
   font-weight: 400;
   font-display: block;

frontend/src/styles/inputs.scss

@@ -25,7 +25,6 @@ textarea {
     top: -1.75rem;
     right: 0.25rem;
     color: var(--sub-color);
-    -webkit-user-select: none;
     user-select: none;
     &.error {
       color: var(--error-color);
@@ -41,13 +40,13 @@ textarea {
 }
 
 input[type="range"] {
-  -webkit-appearance: none;
+  appearance: none;
   padding: 0;
   width: 100%;
   height: 1.25em;
   border-radius: var(--roundness);
   &::-webkit-slider-thumb {
-    -webkit-appearance: none;
+    appearance: none;
     padding: 0;
     border: none;
     width: 25%;
@@ -63,7 +62,7 @@ input[type="range"] {
   }
 
   &::-moz-range-thumb {
-    -webkit-appearance: none;
+    appearance: none;
     padding: 0;
     border: none;
     width: 25%;
@@ -110,14 +109,13 @@ input[type="checkbox"] {
   position: relative;
   transition: background 0.125s;
   flex-shrink: 0;
-  &:after {
+  &::after {
     font-family: "Font Awesome";
     content: "\f00c";
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    display: block;
     border-radius: calc((var(--roundness) / 2) - 0.1em);
     font-weight: 900;
     position: absolute;
@@ -129,23 +127,23 @@ input[type="checkbox"] {
     color: transparent;
   }
 
-  &:checked:after {
+  &:checked::after {
     color: var(--main-color);
   }
-  &:hover:after {
+  &:hover::after {
     color: var(--bg-color);
   }
-  &:hover:checked:after {
+  &:hover:checked::after {
     color: var(--text-color);
   }
 
   &[disabled] {
     opacity: 0.33;
     pointer-events: none;
-    &:hover:after {
+    &:hover::after {
       color: var(--sub-alt-color);
     }
-    &:hover:checked:after {
+    &:hover:checked::after {
       color: var(--main-color);
     }
   }
@@ -176,15 +174,11 @@ textarea:disabled {
 
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  -moz-appearance: none;
   appearance: none;
   margin: 0;
 }
 
 input[type="number"] {
-  -moz-appearance: textfield;
-  -webkit-appearance: textfield;
   appearance: textfield;
 }
 
@@ -202,13 +196,12 @@ select:-webkit-autofill:focus {
   outline: 0.15em solid var(--main-color);
   font-family: inherit;
   -webkit-text-fill-color: var(--text-color);
-  -webkit-box-shadow: 0 0 0 1000000px var(--sub-alt-color) inset;
+  box-shadow: 0 0 0 1000000px var(--sub-alt-color) inset;
   caret-color: var(--text-color);
 }
 
 // slim-select styles
 .ss-main {
-  border-radius: var(--roundness);
   outline: none;
   border: none;
   border-radius: var(--roundness);
@@ -316,7 +309,7 @@ select:-webkit-autofill:focus {
         color: var(--sub-color);
       }
       &::-webkit-search-cancel-button {
-        -webkit-appearance: none;
+        appearance: none;
       }
     }
   }

frontend/src/styles/keymap.scss

@@ -7,7 +7,6 @@
   // height: 140px;
   gap: 0.25rem;
   margin-top: 1rem;
-  -webkit-user-select: none;
   user-select: none;
 
   .row {

frontend/src/styles/media-queries-gray.scss

@@ -1,5 +1,5 @@
-//this is very overkill for the modern world so dont worry too much about this width
 @use "./media.scss" as *;
 
 @include media-query(gray) {
+  // this is very overkill for the modern world so dont worry too much about this width
 }