test(frontend): Add stylelint (#18627)

* test(frontend): Add stylelint

* Remove ordering from the first step

* Further specify a few rules

* Fix a bunch of simple issues

* Add stylelint to pre-commit hooks and CI

* Remove orphaned package-lock.json

* Update UI snapshots for `webkit` (2)

* Update UI snapshots for `webkit` (2)

* Retain `currentColor`

* Revert media queries change, and enforce modern colors

* Add TODOs to the config

* Fix a few more colors

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

.github/workflows/ci-frontend.yml

@@ -50,7 +50,10 @@ jobs:
               run: pnpm prettier:check
 
             - name: Lint with ESLint
-              run: pnpm eslint
+              run: pnpm lint:js
+
+            - name: Lint with Stylelint
+              run: pnpm lint:css
 
             - name: Generate logic types and run typescript with strict
               run: pnpm typegen:write && pnpm typescript:check

.stylelintignore

@@ -0,0 +1 @@
+frontend/dist/

.stylelintrc.js

@@ -0,0 +1,48 @@
+module.exports = {
+    extends: 'stylelint-config-standard-scss', // TODO: Enable separately, as the diff will be significant
+    // TODO: Enable separately, as the diff will be significant "plugins": ["stylelint-order"],
+    rules: {
+        'no-descending-specificity': null,
+        'number-max-precision': 5,
+        'value-keyword-case': [
+            'lower',
+            {
+                // CSS Color Module Level 3 says currentColor, Level 4 candidate says currentcolor
+                // Sticking to Level 3 for now
+                camelCaseSvgKeywords: true,
+            },
+        ],
+        // Sadly Safari only started supporting the range syntax of media queries in 2023, so let's switch to that
+        // ('context' value) in 2024, once support is better https://caniuse.com/?search=range%20context
+        'media-feature-range-notation': 'prefix',
+        'selector-class-pattern': [
+            '^[A-Za-z0-9_-]+(__[A-Za-z0-9_-]+)?(--[A-Za-z0-9-]+)?$',
+            {
+                message: 'Expected class selector to match Block__Element--Modifier or plain snake-case',
+            },
+        ],
+        'selector-id-pattern': [
+            '^[A-Za-z0-9_-]+(__[A-Za-z0-9_-]+)?(--[A-Za-z0-9_-]+)?$',
+            {
+                message: 'Expected id selector to match Block__Element--Modifier or plain kebak-case',
+            },
+        ],
+        'keyframes-name-pattern': [
+            '^[A-Za-z0-9_-]+__[A-Za-z0-9_-]+$',
+            {
+                message: 'Expected keyframe name to match Block__Animation',
+            },
+        ],
+        'scss/dollar-variable-pattern': [
+            '^[A-Za-z_]+[A-Za-z0-9_-]+$',
+            {
+                message: 'Expected variable to match kebab-case or snake_case',
+            },
+        ],
+        'scss/operator-no-newline-after': null, // Doesn't always play well with prettier
+        'scss/at-extend-no-missing-placeholder': null,
+        'scss/comment-no-empty': null,
+        // "order/order": ["dollar-variables", "custom-properties", "declarations", "rules", "at-rules"],
+        // "order/properties-order": ["width", "height"],
+    },
+}

frontend/src/exporter/ExportedInsight/ExportedInsight.scss

@@ -25,6 +25,7 @@
         flex: 1;
         position: relative;
         z-index: 1;
+
         .FunnelBarChart {
             min-height: 50vw;
         }
@@ -49,6 +50,7 @@
         right: 0;
         top: 0;
         z-index: 2;
+
         svg {
             font-size: 0.75rem;
             margin: 0.25rem;

frontend/src/exporter/Exporter.scss

@@ -1,33 +1,5 @@
 @import '../styles/mixins';
 
-html.export-type-image {
-    // We don't want scrollbars to show in image captures
-    ::-webkit-scrollbar {
-        display: none;
-    }
-
-    body {
-        // We put Inter first so that rendered images are the same no matter which platform it is rendered on.
-        font-family: 'Inter', 'Segoe UI', 'Roboto', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-            'Segoe UI Symbol';
-    }
-}
-
-html.export-type-embed {
-    overflow: hidden;
-    overflow-y: auto;
-
-    .Exporter {
-        padding: 0;
-
-        // Insights can resize to fit any height, whereas dashboards cannot
-        &--insight {
-            height: 100vh;
-            max-height: 100vh;
-        }
-    }
-}
-
 .Exporter {
     padding: 1rem;
 
@@ -58,3 +30,31 @@ html.export-type-embed {
         }
     }
 }
+
+html.export-type-image {
+    // We don't want scrollbars to show in image captures
+    ::-webkit-scrollbar {
+        display: none;
+    }
+
+    body {
+        // We put Inter first so that rendered images are the same no matter which platform it is rendered on.
+        font-family: Inter, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+            'Segoe UI Symbol';
+    }
+}
+
+html.export-type-embed {
+    overflow: hidden;
+    overflow-y: auto;
+
+    .Exporter {
+        padding: 0;
+
+        // Insights can resize to fit any height, whereas dashboards cannot
+        &--insight {
+            height: 100vh;
+            max-height: 100vh;
+        }
+    }
+}

frontend/src/layout/ErrorBoundary/ErrorBoundary.scss

@@ -5,20 +5,24 @@
     padding: 0.75rem 1rem 1rem;
     min-width: 0;
     height: fit-content;
+
     .main-app-content > & {
         margin: 1.5rem 0;
     }
+
     h2 {
         margin-bottom: 0.75rem;
         color: var(--danger);
         font-weight: 600;
     }
+
     pre {
         margin-bottom: 0.75rem;
         background: var(--border-light);
         border-radius: var(--radius);
         padding: 0.75rem 1rem;
     }
+
     .help-button {
         margin-top: 0.75rem;
     }