style(frontend): Always order CSS properties in one way

PostHog · Nov 15, 2023 · e4671b4 · e4671b4
1 parent 74c0309
commit e4671b4
Show file tree

Hide file tree

Showing 179 changed files with 1,741 additions and 1,721 deletions.
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -1,8 +1,8 @@
 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"],
+    extends: ['stylelint-config-standard-scss', 'stylelint-config-recess-order'],
+    plugins: ['stylelint-order'],
     rules: {
-        'no-descending-specificity': null,
+        'no-descending-specificity': null, // TODO: Enable separately, as the diff will be significant
         'number-max-precision': 5,
         'value-keyword-case': [
             'lower',
@@ -42,7 +42,6 @@ module.exports = {
         '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"],
+        'order/order': ['dollar-variables', 'custom-properties', 'declarations', 'rules', 'at-rules'],
     },
 }
diff --git a/frontend/src/exporter/ExportedInsight/ExportedInsight.scss b/frontend/src/exporter/ExportedInsight/ExportedInsight.scss
@@ -1,19 +1,19 @@
 .ExportedInsight {
     position: relative;
-    min-width: 0;
-    max-width: 100%;
-    border-radius: var(--radius);
-    border: 1px solid var(--border);
     z-index: 3;
-    background: var(--bg-light);
     display: flex;
     flex-direction: column;
+    min-width: 0;
+    max-width: 100%;
+    background: var(--bg-light);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
 
     .ExportedInsight__header {
-        padding: 1rem;
-        border-bottom: 1px solid var(--border);
         display: flex;
         justify-content: space-between;
+        padding: 1rem;
+        border-bottom: 1px solid var(--border);
 
         .ExportedInsight__header__title {
             font-size: 1rem;
@@ -22,9 +22,9 @@
     }
 
     .ExportedInsight__content {
-        flex: 1;
         position: relative;
         z-index: 1;
+        flex: 1;
 
         .FunnelBarChart {
             min-height: 50vw;
@@ -47,13 +47,13 @@
 
     .ExportedInsight__watermark {
         position: absolute;
-        right: 0;
         top: 0;
+        right: 0;
         z-index: 2;
 
         svg {
-            font-size: 0.75rem;
             margin: 0.25rem;
+            font-size: 0.75rem;
         }
     }
 
@@ -66,10 +66,10 @@
             flex-direction: column;
 
             .FunnelBarChart {
+                flex: 1;
                 height: 100%;
-                max-height: 100%;
                 min-height: auto;
-                flex: 1;
+                max-height: 100%;
             }
 
             .InsightViz {

diff --git a/frontend/src/exporter/Exporter.scss b/frontend/src/exporter/Exporter.scss
@@ -15,9 +15,9 @@
 
         @include screen($md) {
             display: flex;
-            justify-content: space-between;
-            align-items: center;
             gap: 1rem;
+            align-items: center;
+            justify-content: space-between;
 
             .SharedDashboard-header-title {
                 max-width: 50%;

diff --git a/frontend/src/layout/ErrorBoundary/ErrorBoundary.scss b/frontend/src/layout/ErrorBoundary/ErrorBoundary.scss
@@ -1,26 +1,26 @@
 .ErrorBoundary {
-    background: var(--danger-highlight);
-    border-radius: var(--radius);
-    margin: 1.5rem;
-    padding: 0.75rem 1rem 1rem;
     min-width: 0;
     height: fit-content;
+    padding: 0.75rem 1rem 1rem;
+    margin: 1.5rem;
+    background: var(--danger-highlight);
+    border-radius: var(--radius);
 
     .main-app-content > & {
         margin: 1.5rem 0;
     }
 
     h2 {
         margin-bottom: 0.75rem;
-        color: var(--danger);
         font-weight: 600;
+        color: var(--danger);
     }
 
     pre {
+        padding: 0.75rem 1rem;
         margin-bottom: 0.75rem;
         background: var(--border-light);
         border-radius: var(--radius);
-        padding: 0.75rem 1rem;
     }
 
     .help-button {