sts-sponsors team mailing list archive

[Peter Makowski <mp+442220@xxxxxxxxxxxxxxxxxx>]

Peter Makowski has proposed merging ~petermakowski/maas-site-manager:enable-stylelint into maas-site-manager:main.

Commit message:
enable stylelint
- fix existing stylelint errors


Requested reviews:
  MAAS Committers (maas-committers)

For more details, see:
https://code.launchpad.net/~petermakowski/maas-site-manager/+git/site-manager/+merge/442220
-- 
Your team MAAS Committers is requested to review the proposed merge of ~petermakowski/maas-site-manager:enable-stylelint into maas-site-manager:main.

diff --git a/frontend/package.json b/frontend/package.json
index 1acaffe..a834207 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,8 +10,8 @@
     "preview": "vite preview",
     "playwright-test": "playwright test",
     "playwright-ui": "playwright test --ui",
-    "lint": "npmPkgJsonLint . && tsc && eslint . --ext .ts,.tsx",
-    "lint-fix": "eslint . --ext .ts,.tsx --fix",
+    "lint": "npmPkgJsonLint . && tsc && eslint . --ext .ts,.tsx && stylelint src/**/*.scss",
+    "lint-fix": "eslint . --ext .ts,.tsx --fix && stylelint src/**/*.scss --fix",
     "upgrade-all": "yarn-upgrade-all -E"
   },
   "dependencies": {
diff --git a/frontend/src/_patterns_icons.scss b/frontend/src/_patterns_icons.scss
index 41dedd6..249ea08 100644
--- a/frontend/src/_patterns_icons.scss
+++ b/frontend/src/_patterns_icons.scss
@@ -8,22 +8,25 @@
 
 .p-icon--sidebar-toggle {
   @extend %icon;
-  @include maas-icon-sidebar-collapse();
+  @include maas-icon-sidebar-collapse;
 }
 
 .p-icon--maas {
   @extend %icon;
-  @include maas-icon-maas-logo();
+  @include maas-icon-maas-logo;
 }
 
 .p-icon--status-ready {
   @extend %icon;
+
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 4a4 4 0 110 8 4 4 0 010-8z' fill='#{vf-url-friendly-color(#D3E4ED)}'  fill-rule='nonzero'/%3E%3C/svg%3E");
 }
+
 .p-icon--status-deployed {
   @extend %icon;
   @include vf-icon-status-small($color-x-dark);
 }
+
 .p-icon--status-allocated {
   @extend %icon;
   @include vf-icon-status-small($color-information);
diff --git a/frontend/src/_patterns_typography.scss b/frontend/src/_patterns_typography.scss
index a629d0f..516faa3 100644
--- a/frontend/src/_patterns_typography.scss
+++ b/frontend/src/_patterns_typography.scss
@@ -1,9 +1,11 @@
 .p-heading--small {
   @extend %table-header-label;
+
   color: $color-dark;
   margin-bottom: $sp-unit * 0.25;
   text-transform: uppercase;
 }
+
 .is-dark {
   .p-heading--small {
     color: $color-light;
diff --git a/frontend/src/_settings.scss b/frontend/src/_settings.scss
index 0588138..bdcb88c 100644
--- a/frontend/src/_settings.scss
+++ b/frontend/src/_settings.scss
@@ -2,11 +2,9 @@
 
 // Vanilla settings:
 $grid-max-width: math.div(1920, 16) * 1rem;
-
 $breakpoint-xx-large: 1920px;
 $side-navigation-z-index: 103;
+/* stylelint-disable-next-line scss/dollar-variable-pattern */
 $application-layout--breakpoint-side-nav-expanded: $breakpoint-xx-large;
-
 $increase-font-size-on-larger-screens: false;
-
 $assets-path: "/assets/fonts/";
diff --git a/frontend/src/_utils.scss b/frontend/src/_utils.scss
index 972f9d4..f34cdf0 100644
--- a/frontend/src/_utils.scss
+++ b/frontend/src/_utils.scss
@@ -1,52 +1,67 @@
 .u-flex {
   display: flex !important;
 }
+
 .u-flex--large {
   @media (min-width: $breakpoint-large) {
     display: flex !important;
   }
 }
+
 .u-flex--align-end {
   align-items: flex-end !important;
 }
+
 .u-flex--justify-end {
   justify-content: flex-end !important;
 }
+
 .u-flex--justify-between {
   justify-content: space-between !important;
 }
+
 .u-flex--column {
   flex-direction: column !important;
 }
+
 .u-flex--column-x-small {
   @media (max-width: $breakpoint-x-small) {
     flex-direction: column !important;
   }
 }
+
 .u-flex--grow {
   flex-grow: 1 !important;
 }
+
 .u-flex--wrap {
   flex-wrap: wrap !important;
 }
+
 .u-capitalize {
   text-transform: capitalize !important;
 }
+
 .u-no-wrap {
   white-space: nowrap !important;
 }
+
 .u-no-border {
   border: 0 !important;
 }
+
 .u-padding-top--medium {
   padding-top: $spv--medium !important;
 }
+
 .u-width--100 {
   width: 100% !important;
 }
+
 .u-no-padding {
   padding: 0 !important;
 }
+
 // hide elements visually, but keep them accessible to screen readers
 .u-visually-hidden {
   position: absolute !important;
diff --git a/frontend/src/components/MainLayout/_MainLayout.scss b/frontend/src/components/MainLayout/_MainLayout.scss
index a9e170b..ae08fec 100644
--- a/frontend/src/components/MainLayout/_MainLayout.scss
+++ b/frontend/src/components/MainLayout/_MainLayout.scss
@@ -2,9 +2,11 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+
   @media (min-width: $breakpoint-small) {
     flex-direction: row;
   }
+
   .l-main__nav {
     flex-shrink: 0;
 
@@ -12,11 +14,13 @@
       height: 100vh;
     }
   }
+
   .l-main__content {
     width: 100%;
     overflow-y: auto;
   }
 }
+
 .l-aside.is-maas-site-manager {
   background: $color-x-light;
 }
diff --git a/frontend/src/components/Meter/_Meter.scss b/frontend/src/components/Meter/_Meter.scss
index 2593c24..b1a4280 100644
--- a/frontend/src/components/Meter/_Meter.scss
+++ b/frontend/src/components/Meter/_Meter.scss
@@ -1,5 +1,5 @@
 $meter-height: $sp-unit * 1.75;
-$meter-height--small: $sp-unit * 1.5;
+$meter-height-small: $sp-unit * 1.5;
 
 .p-meter {
   margin-bottom: $sp-unit * 1.5;
@@ -40,8 +40,8 @@ $meter-height--small: $sp-unit * 1.5;
   padding-top: $sp-unit * 0.75;
 
   .p-meter__bar {
-    border-radius: $meter-height--small;
-    height: $meter-height--small;
+    border-radius: $meter-height-small;
+    height: $meter-height-small;
     margin-bottom: $sp-unit * 0.75;
   }
 
diff --git a/frontend/src/components/Navigation/_Navigation.scss b/frontend/src/components/Navigation/_Navigation.scss
index 5b97ae3..93dbc97 100644
--- a/frontend/src/components/Navigation/_Navigation.scss
+++ b/frontend/src/components/Navigation/_Navigation.scss
@@ -1,23 +1,51 @@
 .l-navigation {
   @include vf-transition($property: #{width, box-shadow, background}, $duration: fast);
+
+  .l-navigation__controls {
+    margin-left: auto;
+    padding-top: 0.65rem;
+    z-index: $side-navigation-z-index + 1;
+
+    @include vf-transition($property: #{opacity, visibility, transform, background}, $duration: fast);
+
+    @media only screen and (min-width: ($breakpoint-small + 1)) {
+      opacity: 1;
+      visibility: visible;
+      position: absolute;
+      top: 0;
+      left: 0;
+      padding-top: 0;
+      transform: translateX(1rem) translateY(2.6rem);
+    }
+
+    @media only screen and (min-width: ($breakpoint-xx-large)) {
+      display: none;
+    }
+  }
+
   &:hover,
   &:focus-within,
   &.is-pinned {
     grid-area: nav;
+
     @media only screen and (min-width: ($breakpoint-small + 1)) {
       position: static;
     }
+
     .l-navigation__controls {
       opacity: 1;
       visibility: visible;
+
       button {
-        background-color: rgba(255, 255, 255, 0.05);
+        background-color: rgb(255 255 255 / 5%);
       }
+
       @media only screen and (min-width: ($breakpoint-small + 1)) {
         transform: translateX(#{$application-layout--side-nav-width-expanded - 3rem}) translateY(0.8rem);
       }
     }
   }
+
   &.is-collapsed {
     .l-navigation-collapse-toggle,
     .l-navigation__controls {
@@ -26,35 +54,21 @@
       }
     }
   }
+
   .l-navigation__drawer {
     // ensures the drawer never exceeds the viewport width on mobile
     max-width: 100vw;
   }
-  .l-navigation__controls {
-    margin-left: auto;
-    padding-top: 0.65rem;
-    z-index: $side-navigation-z-index + 1;
-    @include vf-transition($property: #{opacity, visibility, transform, background}, $duration: fast);
-    @media only screen and (min-width: ($breakpoint-small + 1)) {
-      opacity: 1;
-      visibility: visible;
-      position: absolute;
-      top: 0;
-      left: 0;
-      padding-top: 0;
-      transform: translateX(1rem) translateY(2.6rem);
-    }
-    @media only screen and (min-width: ($breakpoint-xx-large)) {
-      display: none;
-    }
-  }
+
   .l-navigation--item-icon {
     margin-right: $sph--small;
   }
 }
+
 .p-panel.is-dark {
   .p-panel__header {
     background-color: inherit;
+
     @include vf-transition($property: #{width, box-shadow, background}, $duration: fast);
   }
 
@@ -63,6 +77,7 @@
     text-decoration: none;
     display: flex;
     flex-direction: column;
+
     @media only screen and (max-width: ($breakpoint-small)) {
       margin-top: 1.25rem;
       margin-bottom: 0;
@@ -71,11 +86,13 @@
 
   .p-panel__logo-name {
     @extend %vf-heading-4;
-    font-size: #{map-get($font-sizes, h4)}rem;
-    line-height: map-get($line-heights, x-small);
+
+    font-size: #{map_get($font-sizes, h4)}rem;
+    line-height: map_get($line-heights, x-small);
     margin-bottom: 1.25rem !important;
     padding-top: 0.051rem !important;
     margin-left: 2rem !important;
+
     @media only screen and (min-width: ($breakpoint-small + 1)) {
       margin-left: 2.5rem !important;
     }
@@ -84,20 +101,26 @@
   .p-panel__content {
     padding-top: 0;
   }
+
   .p-side-navigation--icons {
-    & > .p-side-navigation__list:last-of-type::after {
-      content: "";
-    }
     .p-side-navigation__list::after {
       left: 1rem;
       opacity: 1;
     }
+
+    & > .p-side-navigation__list:last-of-type::after {
+      content: "";
+    }
+
     .no-divider::after {
       left: 1rem;
       opacity: 0;
     }
+
     .p-side-navigation__footer {
+      // stylelint-disable-next-line scss/at-extend-no-missing-placeholder
       @extend .p-side-navigation__text;
+
       padding-left: 1.5rem;
       transition-duration: 0ms;
     }
@@ -106,9 +129,11 @@
   .p-navigation__tagged-logo {
     min-width: auto;
   }
+
   .p-navigation__tagged-logo .p-navigation__logo-tag {
     height: 2.3rem;
     left: 1rem;
+
     @media only screen and (min-width: ($breakpoint-small + 1)) {
       left: 1.5rem;
     }
@@ -119,6 +144,7 @@
     text-align: left;
     justify-content: flex-start;
   }
+
   .p-side-navigation--icons .p-side-navigation__item .p-side-navigation__item .p-side-navigation__link {
     padding-left: 4rem;
   }
diff --git a/frontend/src/components/Popover/_Popover.scss b/frontend/src/components/Popover/_Popover.scss
index 9e5d701..c9c670d 100644
--- a/frontend/src/components/Popover/_Popover.scss
+++ b/frontend/src/components/Popover/_Popover.scss
@@ -2,6 +2,8 @@
   @extend %vf-bg--x-light;
   @extend %vf-has-box-shadow;
   @extend %vf-has-round-corners;
+
+  width: 13.5rem;
   z-index: 10;
 }
 %popover-grid {
@@ -11,10 +13,6 @@
   padding: $spv--small $spv--large;
 }
 
-.p-popover {
-  width: 13.5rem;
-}
-
 .p-popover__header {
   margin: 0 $sph--large;
 }
@@ -25,11 +23,11 @@
 
 .p-popover__secondary {
   @extend %popover-grid;
+
   background: $color-light;
 }
 
 .p-popover__separator {
-  grid-column-start: 1;
-  grid-column-end: 4;
+  grid-column: 1 4;
   margin-top: $spv--small;
 }
diff --git a/frontend/src/components/SecondaryNavigation/_SecondaryNavigation.scss b/frontend/src/components/SecondaryNavigation/_SecondaryNavigation.scss
index a8e0e28..3a2d251 100644
--- a/frontend/src/components/SecondaryNavigation/_SecondaryNavigation.scss
+++ b/frontend/src/components/SecondaryNavigation/_SecondaryNavigation.scss
@@ -2,7 +2,7 @@
   transition-duration: 0.165s;
   transition-property: width, box-shadow, background;
   transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  background: #444444;
+  background: #444;
   width: 0;
   height: 0;
   visibility: hidden;
@@ -11,10 +11,12 @@
     visibility: visible;
     width: 100%;
     height: 100%;
+
     @media (min-width: $breakpoint-small) {
       width: $application-layout--side-nav-width-expanded;
     }
   }
+
   .p-side-navigation__drawer {
     background: inherit;
     transform: none;
@@ -22,11 +24,14 @@
     max-width: 100%;
     height: inherit;
   }
+
   .p-side-navigation__title {
     @extend %vf-heading-4;
+
     padding-left: 1.5rem;
     margin-bottom: 2rem !important;
   }
+
   .p-side-navigation__text,
   .p-side-navigation__item--title .p-side-navigation__item .p-side-navigation__link {
     @media (min-width: $breakpoint-small) {
diff --git a/frontend/src/components/SitesList/SitesTable/SitesTableControls/ColumnsVisibilityControl/_ColumnsVisibilityControl.scss b/frontend/src/components/SitesList/SitesTable/SitesTableControls/ColumnsVisibilityControl/_ColumnsVisibilityControl.scss
index 98cbc27..cbeec0f 100644
--- a/frontend/src/components/SitesList/SitesTable/SitesTableControls/ColumnsVisibilityControl/_ColumnsVisibilityControl.scss
+++ b/frontend/src/components/SitesList/SitesTable/SitesTableControls/ColumnsVisibilityControl/_ColumnsVisibilityControl.scss
@@ -1,16 +1,18 @@
 .columns-visibility-checkbox {
-  &:first-of-type label {
-    padding-top: $sph--small;
-  }
   label {
     padding: 0 $sph--large $sph--x-small $sph--large;
     width: 100%;
-    text-indent: 0
+    text-indent: 0;
+  }
+
+  &:first-of-type label {
+    padding-top: $sph--small;
   }
 }
 
 [class^="p-button"].has-icon.columns-visibility-toggle {
   @extend %vf-input-elements;
+
   padding-left: $spv--small;
   text-align: left;
   width: 100%;
diff --git a/frontend/src/components/SitesList/SitesTable/SitesTableControls/_SitesTableControls.scss b/frontend/src/components/SitesList/SitesTable/SitesTableControls/_SitesTableControls.scss
index 631f8c0..f183a4c 100644
--- a/frontend/src/components/SitesList/SitesTable/SitesTableControls/_SitesTableControls.scss
+++ b/frontend/src/components/SitesList/SitesTable/SitesTableControls/_SitesTableControls.scss
@@ -3,6 +3,7 @@
     width: 100%;
     margin-left: 0;
     margin-right: 0;
+
     @media (min-width: $breakpoint-large) {
       width: auto;
       margin: 0 1rem;
diff --git a/frontend/src/components/SitesList/SitesTable/_SitesTable.scss b/frontend/src/components/SitesList/SitesTable/_SitesTable.scss
index 35397ae..03a559d 100644
--- a/frontend/src/components/SitesList/SitesTable/_SitesTable.scss
+++ b/frontend/src/components/SitesList/SitesTable/_SitesTable.scss
@@ -4,12 +4,14 @@ $connection-status-icon-width: 1.5rem;
   thead th:first-child {
     width: 3rem;
   }
+
   td.connection,
   th.connection {
     .connection__text {
       padding-left: $connection-status-icon-width;
     }
   }
+
   .sites-table-row--muted {
     td:not(.name) {
       &,
@@ -18,11 +20,13 @@ $connection-status-icon-width: 1.5rem;
       }
     }
   }
+
   .status-icon {
     display: inline-block;
     position: relative;
     padding-left: $connection-status-icon-width;
   }
+
   .status-icon::before {
     content: "\00B7";
     font-size: 5rem;
@@ -31,15 +35,19 @@ $connection-status-icon-width: 1.5rem;
     top: -6px;
     color: transparent;
   }
+
   .status-icon.is-lost::before {
     color: #c7162b;
   }
+
   .status-icon.is-stable::before {
     color: #0e8420;
   }
+
   .status-icon.is-unknown::before {
     color: #cdcdcd;
   }
+
   .p-checkbox.is-label-visually-hidden .p-checkbox__label {
     position: absolute;
     width: 1px;
diff --git a/frontend/src/components/TokensCreate/_TokensCreate.scss b/frontend/src/components/TokensCreate/_TokensCreate.scss
index 3fc3031..32de4af 100644
--- a/frontend/src/components/TokensCreate/_TokensCreate.scss
+++ b/frontend/src/components/TokensCreate/_TokensCreate.scss
@@ -2,13 +2,16 @@
   .tokens-create__heading {
     margin-bottom: $sph--x-large;
   }
+
   hr.tokens-create__separator {
     margin-bottom: $sph--large;
   }
+
   .tokens-create__buttons {
     display: flex;
     justify-content: flex-end;
     width: 100%;
+
     a,
     button {
       margin-left: $sph--large;
diff --git a/frontend/src/components/TokensList/_TokensList.scss b/frontend/src/components/TokensList/_TokensList.scss
index 64694b2..3171cbd 100644
--- a/frontend/src/components/TokensList/_TokensList.scss
+++ b/frontend/src/components/TokensList/_TokensList.scss
@@ -1,6 +1,5 @@
 .tokens-list-header {
   @media only screen and (min-width: $breakpoint-small) {
-    
     position: sticky;
     top: -0.75rem;
     background-color: white;
diff --git a/frontend/src/components/TokensList/components/TokensTable/_TokensTable.scss b/frontend/src/components/TokensList/components/TokensTable/_TokensTable.scss
index f3ee36a..2dd28ec 100644
--- a/frontend/src/components/TokensList/components/TokensTable/_TokensTable.scss
+++ b/frontend/src/components/TokensList/components/TokensTable/_TokensTable.scss
@@ -1,4 +1,9 @@
 .tokens-table {
+  td,
+  th {
+    vertical-align: middle;
+  }
+
   thead th:first-child {
     width: 3rem;
   }
@@ -31,11 +36,6 @@
     }
   }
 
-  td,
-  th {
-    vertical-align: middle;
-  }
-
   .token-cell {
     width: 100%;
     display: flex;
diff --git a/frontend/src/components/base/TablePagination/_TablePagination.scss b/frontend/src/components/base/TablePagination/_TablePagination.scss
index c663d8f..3c96af4 100644
--- a/frontend/src/components/base/TablePagination/_TablePagination.scss
+++ b/frontend/src/components/base/TablePagination/_TablePagination.scss
@@ -18,6 +18,7 @@
   .u__left-rotate {
     transform: rotate(90deg);
   }
+
   .u__right-rotate {
     transform: rotate(-90deg);
   }
@@ -34,16 +35,16 @@
     }
 
     // Remove input arrows
+
     /* Chrome, Safari, Edge, Opera */
     input::-webkit-outer-spin-button,
     input::-webkit-inner-spin-button {
-      -webkit-appearance: none;
+      appearance: none;
       margin: 0;
     }
 
     /* Firefox */
     input[type="number"] {
-      -moz-appearance: textfield;
       appearance: textfield;
     }