Merge pull request #896 from hxtree/feature/adjust-stylelint-settings

Adjust stylelint settings
hxtree · Apr 3, 2024 · c84dcf7 · c84dcf7
2 parents 5d23a79 + 028837b
commit c84dcf7
Show file tree

Hide file tree

Showing 25 changed files with 237 additions and 192 deletions.
diff --git a/.lintstagedrc.json b/.lintstagedrc.json
@@ -1,4 +1,5 @@
 {
   "*.ts": ["prettier --write", "eslint --format visualstudio --fix"],
-  "*.{json,md}": "prettier --write"
+  "*.{json,md}": "prettier --write",
+  "*.scss": ["prettier --write"]
 }
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -12,5 +12,11 @@ module.exports = {
       files: '**/*.md',
       options: { parser: 'markdown' },
     },
+    {
+      files: ['**/*.scss'],
+      options: {
+        singleQuote: true,
+      },
+    },
   ],
 };
diff --git a/clients/design-system/.stylelintrc.json b/clients/design-system/.stylelintrc.json
@@ -2,6 +2,17 @@
   "extends": "stylelint-config-standard-scss",
   "plugins": ["stylelint-order"],
   "rules": {
+    "color-function-notation": [
+      "legacy",
+      {
+        "ignore": ["with-var-inside"]
+      }
+    ],
+    "no-irregular-whitespace": true,
+    "color-no-invalid-hex": true,
+    "block-no-empty": true,
+    "unit-allowed-list": ["%", "deg", "px", "rem", "s", "ms", "vh", "vw"],
+    "number-max-precision": 3,
     "alpha-value-notation": "number",
     "order/order": [
       "custom-properties",
@@ -10,7 +21,6 @@
       "rules",
       "at-rules"
     ],
-    "order/properties-alphabetical-order": true,
     "order/properties-order": [
       "content",
       "position",

diff --git a/clients/design-system/package.json b/clients/design-system/package.json
@@ -24,7 +24,7 @@
     "test:cov": "jest --coverage --runInBand",
     "watch": "tsc -w",
     "lint": "eslint --format visualstudio \"./src/**/*.tsx\" --fix && stylelint \"./src/**/*.scss\" --fix",
-    "lint:ci": "eslint --format visualstudio \"./src/**/*.tsx\"  --fix-dry-run",
+    "lint:ci": "eslint --format visualstudio \"./src/**/*.tsx\" --fix-dry-run && stylelint \"./src/**/*.scss\" ",
     "size": "size-limit",
     "analyze": "size-limit --why",
     "cdk:bootstrap": "cdk bootstrap",

diff --git a/clients/design-system/src/components/Alert/style.module.scss b/clients/design-system/src/components/Alert/style.module.scss
@@ -1,37 +1,37 @@
 .alert {
- border: none;
- border-radius: 3px;
- box-shadow: rgb(0 0 0 / 0.12) 0 4px 30px 0;
+  border: none;
+  border-radius: 3px;
+  box-shadow: rgb(0, 0, 0, 0.12) 0 4px 30px 0;
 
- &.alert-success {
-  background-color: #f9fef9  !important;
+  &.alert-success {
+    background-color: #f9fef9 !important;
 
-  svg {
+    svg {
       color: #59ca97;
-   }
+    }
   }
 
- &.alert-warning {
-  background-color: #fefbf9 !important;
+  &.alert-warning {
+    background-color: #fefbf9 !important;
 
-  svg {
-    color: #f1963b;
-   }
+    svg {
+      color: #f1963b;
+    }
   }
 
- &.alert-info {
-  background-color: #fafdff !important;
+  &.alert-info {
+    background-color: #fafdff !important;
 
-  svg {
-    color: #1174ff;
+    svg {
+      color: #1174ff;
+    }
   }
- }
 
- &.alert-danger {
-  background-color: #fffafb !important;
+  &.alert-danger {
+    background-color: #fffafb !important;
 
-  svg {
-    color: #bf1722;
+    svg {
+      color: #bf1722;
+    }
   }
- }
-}
+}
diff --git a/clients/design-system/src/components/AppBar/style.module.scss b/clients/design-system/src/components/AppBar/style.module.scss
@@ -2,23 +2,23 @@
 
 @keyframes pulsate {
   0% {
-    box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0);
+    box-shadow: inset 0 -3px 0 rgb(0, 0, 0, 0);
   }
 
   50% {
-    box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.2);
+    box-shadow: inset 0 -3px 0 rgb(0, 0, 0, 0.2);
   }
 
   100% {
-    box-shadow: inset 0 -3px 0 $color-blue;;
+    box-shadow: inset 0 -3px 0 $color-blue;
   }
 }
 
 .app-bar {
   background-color: $color-white;
 
   .navbar-menu {
-    box-shadow: rgb(0 0 0 / 0.12) 0 4px 30px 0
+    box-shadow: rgb(0, 0, 0, 0.12) 0 4px 30px 0;
   }
 
   .navbar-brand {
@@ -31,8 +31,10 @@
 
 .app-bar-light {
   padding: 0;
-  background-color: rgb(255 253 251);
-  box-shadow: rgb(0 0 0 / 0.12) 0 0 2px 0, rgb(0 0 0 / 0.14) 0 1.008px 2px 0;
+  background-color: rgb(255, 253, 251);
+  box-shadow:
+    rgb(0, 0, 0, 0.12) 0 0 2px 0,
+    rgb(0, 0, 0, 0.14) 0 1.008px 2px 0;
 
   ul {
     margin: 0;
@@ -53,11 +55,11 @@
           color: $color-blue;
           transition: border-color 0.5s ease;
           animation: pulsate 0.5s ease-in-out forwards;
-          box-shadow: inset 0 -4px 0 rgb(0 123 255 / 0.5);
+          box-shadow: inset 0 -4px 0 rgb(0, 123, 255, 0.5);
         }
 
         &.active {
-          box-shadow: inset 0 -4px 0 rgb(0 123 255 / 0.5);
+          box-shadow: inset 0 -4px 0 rgb(0, 123, 255, 0.5);
           color: $color-blue;
         }
       }

diff --git a/clients/design-system/src/components/Article/style.module.scss b/clients/design-system/src/components/Article/style.module.scss
@@ -1,21 +1,21 @@
 @import '../../styles/utils/color-pallette';
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/bootstrap";
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/bootstrap';
 
 // Get the value of $spacer variable (default Bootstrap spacing unit)
 $spacer: spacer();
-$nugde-out-width: 3.0625rem;
+$nugde-out-width: 3.063rem;
 
 .article {
   overflow-x: hidden;
   width: 100%;
   background-color: $color-cta-white;
 
   & .container {
-    position:relative;
+    position: relative;
 
     &::before {
-      content: "";
+      content: '';
       position: absolute;
       top: 0;
       left: -1px;
@@ -28,7 +28,7 @@ $nugde-out-width: 3.0625rem;
       position: relative;
 
       &::before {
-        content: "";
+        content: '';
         position: absolute;
         top: 0;
         left: -(map-get($spacers, 4)) - ($nugde-out-width);
@@ -38,4 +38,4 @@ $nugde-out-width: 3.0625rem;
       }
     }
   }
-}
+}
diff --git a/clients/design-system/src/components/BlurbPair/style.module.scss b/clients/design-system/src/components/BlurbPair/style.module.scss
@@ -1,5 +1,5 @@
 @import '../../styles/utils/color-pallette';
-@import "bootstrap/scss/bootstrap";
+@import 'bootstrap/scss/bootstrap';
 
 .blurb {
   .blurb-pair-left,
@@ -24,8 +24,10 @@
   }
 
   @include media-breakpoint-down(md) {
-    .blurb-pair-left, .blurb-pair-right {
-      &.border-end, &.border-start {
+    .blurb-pair-left,
+    .blurb-pair-right {
+      &.border-end,
+      &.border-start {
         border: none !important;
       }
     }

diff --git a/clients/design-system/src/components/Breadcrumb/style.module.scss b/clients/design-system/src/components/Breadcrumb/style.module.scss
@@ -4,4 +4,4 @@
   a {
     color: $color-off-black;
   }
-}
+}
diff --git a/clients/design-system/src/components/Button/style.module.scss b/clients/design-system/src/components/Button/style.module.scss
@@ -38,7 +38,8 @@
       background-color: $color-primary;
       color: $color-white;
 
-      &:focus, &.button-selected {
+      &:focus,
+      &.button-selected {
         outline-color: $color-primary;
       }
 
@@ -56,7 +57,7 @@
       }
 
       &:hover {
-        border-color:  lighten($color-primary, 10%);
+        border-color: lighten($color-primary, 10%);
         background-color: lighten($color-primary, 10%);
 
         > svg {
@@ -70,7 +71,8 @@
       background-color: transparent;
       color: $color-primary;
 
-      &:focus, &.button-selected {
+      &:focus,
+      &.button-selected {
         outline-color: $color-primary;
       }
 
@@ -83,7 +85,7 @@
       }
 
       &:hover {
-        border-color:  lighten($color-primary, 10%);
+        border-color: lighten($color-primary, 10%);
         color: $color-black;
       }
     }
@@ -93,7 +95,8 @@
       background-color: transparent;
       color: $color-primary;
 
-      &:focus, &.button-selected {
+      &:focus,
+      &.button-selected {
         outline-color: $color-primary;
       }
 
@@ -106,7 +109,8 @@
       }
     }
 
-    &:focus, &.button-selected {
+    &:focus,
+    &.button-selected {
       outline-width: 3px;
       outline-style: solid;
       outline-offset: 3px;
@@ -122,7 +126,8 @@
       font-size: 0.8rem;
     }
 
-    &.button-normal, &.button-medium {
+    &.button-normal,
+    &.button-medium {
       padding: 10px 24px;
       font-size: 1rem;
     }
@@ -146,5 +151,4 @@
       }
     }
   }
-
-}
+}
diff --git a/clients/design-system/src/components/Card/style.module.scss b/clients/design-system/src/components/Card/style.module.scss
@@ -16,14 +16,13 @@ $card-call-out-offset: 16px;
   }
 }
 
-
 .card {
   border-radius: 1rem !important;
   transition: box-shadow 0.5s ease;
 
   .card-thumbnail {
     position: relative;
-    margin:0;
+    margin: 0;
 
     .card-img-top-wrapper {
       overflow: hidden;
@@ -37,7 +36,9 @@ $card-call-out-offset: 16px;
         background-repeat: no-repeat !important;
         background-position: center !important;
         background-size: cover !important;
-        transition: transform 1s ease, box-shadow 1s ease;
+        transition:
+          transform 1s ease,
+          box-shadow 1s ease;
       }
     }
 
@@ -50,7 +51,7 @@ $card-call-out-offset: 16px;
       line-height: 36px;
       text-align: center;
       text-transform: uppercase;
-      box-shadow:  0.7rem 0.7rem .75rem rgb(0 0 0 / 0.2);
+      box-shadow: 0.7rem 0.7rem 0.75rem rgb(0, 0, 0, 0.2);
 
       &::after {
         content: '';
@@ -69,7 +70,8 @@ $card-call-out-offset: 16px;
         background-color: $card-color-primary;
 
         &::after {
-          border-top: $card-call-out-offset solid darken($card-color-primary, 10%);
+          border-top: $card-call-out-offset solid
+            darken($card-color-primary, 10%);
         }
       }
 
@@ -80,7 +82,8 @@ $card-call-out-offset: 16px;
         background-color: $card-color-secondary;
 
         &::after {
-          border-top: $card-call-out-offset solid darken($card-color-secondary, 10%);
+          border-top: $card-call-out-offset solid
+            darken($card-color-secondary, 10%);
         }
       }
 
@@ -91,7 +94,8 @@ $card-call-out-offset: 16px;
         background-color: $card-color-tertiary;
 
         &::after {
-          border-top: $card-call-out-offset solid darken($card-color-tertiary, 10%);
+          border-top: $card-call-out-offset solid
+            darken($card-color-tertiary, 10%);
         }
       }
     }
@@ -131,7 +135,7 @@ $card-call-out-offset: 16px;
   }
 
   &:hover {
-    box-shadow: 0 0 1rem rgb(0 0 0 / 0.3);
+    box-shadow: 0 0 1rem rgb(0, 0, 0, 0.3);
 
     .card-ribbon-text {
       background: linear-gradient(90deg, #eee, #ddd, #fff);
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,4 +4,4 @@ @@
       a {
         color: $color-off-black;
       }
-    }
+    }