From ddee7afbb9659addb07f4998f43d78fd42899b57 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Thu, 27 May 2021 13:23:54 +0100
Subject: [PATCH] ui: Fixup prettier for scss files and run (#10296)

* ui: Ensure prettier makes all our scss files pretty

* Run prettier on all our scss files
---
 .../app/components/app-view/index.scss        |  1 -
 .../consul-ui/app/components/app/index.scss   |  4 +--
 .../components/collapsible-notices/index.scss |  8 +++---
 .../components/consul/auth-method/index.scss  |  1 -
 .../consul/discovery-chain/layout.scss        |  2 +-
 .../intention/form/fieldsets/layout.scss      |  2 +-
 .../consul/intention/form/index.scss          |  2 +-
 .../consul/intention/list/index.scss          |  1 -
 .../intention/permission/form/layout.scss     |  4 +--
 .../intention/permission/form/skin.scss       |  1 -
 .../permission/header/list/index.scss         |  1 -
 .../permission/header/list/skin.scss          |  1 -
 .../consul/lock-session/form/index.scss       |  4 +--
 .../consul/lock-session/list/index.scss       |  1 -
 .../app/components/filter-bar/layout.scss     |  6 ++---
 .../app/components/filter-bar/skin.scss       |  3 ++-
 .../components/hashicorp-consul/index.scss    |  6 ++---
 .../components/main-nav-vertical/index.scss   |  3 +--
 .../components/main-nav-vertical/layout.scss  | 14 +++++-----
 .../components/main-nav-vertical/skin.scss    | 10 +++----
 .../app/components/menu-panel/skin.scss       |  1 -
 .../app/components/modal-dialog/index.scss    |  2 +-
 .../app/components/modal-dialog/layout.scss   |  2 +-
 .../app/components/notice/index.scss          |  1 -
 .../app/components/overlay/none.scss          | 27 +++++++++----------
 .../app/components/overlay/square-tail.scss   |  7 +++--
 .../app/components/search-bar/index.scss      |  4 +--
 .../app/components/skip-links/index.scss      |  1 -
 .../app/components/skip-links/layout.scss     |  1 -
 .../app/components/skip-links/skin.scss       |  1 -
 .../app/components/tooltip/index.scss         | 10 +++----
 .../topology-metrics/card/index.scss          |  2 +-
 .../components/topology-metrics/layout.scss   |  7 +++--
 .../topology-metrics/popover/index.scss       |  5 ++--
 .../topology-metrics/series/layout.scss       |  2 +-
 .../topology-metrics/series/skin.scss         | 14 +++++-----
 .../topology-metrics/source-type/index.scss   |  2 +-
 .../topology-metrics/stats/index.scss         |  4 +--
 .../topology-metrics/status/index.scss        |  2 +-
 ui/packages/consul-ui/package.json            |  4 +--
 40 files changed, 79 insertions(+), 95 deletions(-)

diff --git a/ui/packages/consul-ui/app/components/app-view/index.scss b/ui/packages/consul-ui/app/components/app-view/index.scss
index cbeffed84a..eb4044e353 100644
--- a/ui/packages/consul-ui/app/components/app-view/index.scss
+++ b/ui/packages/consul-ui/app/components/app-view/index.scss
@@ -61,4 +61,3 @@
     display: flex;
   }
 }
-
diff --git a/ui/packages/consul-ui/app/components/app/index.scss b/ui/packages/consul-ui/app/components/app/index.scss
index 75a3c8808f..ab7ce93dfb 100644
--- a/ui/packages/consul-ui/app/components/app/index.scss
+++ b/ui/packages/consul-ui/app/components/app/index.scss
@@ -4,7 +4,7 @@
 [role='banner'] {
   @extend %main-header-horizontal;
 }
-[role="banner"] > label {
+[role='banner'] > label {
   @extend %main-nav-horizontal-toggle-button;
 }
 .app > input[id] {
@@ -44,7 +44,6 @@ main {
   transition-property: margin-left;
 }
 
-
 @media #{$--sidebar-open} {
   %main-nav-horizontal-toggle + header > div > nav:first-of-type {
     left: 0;
@@ -73,4 +72,3 @@ main {
     margin-left: 0;
   }
 }
-
diff --git a/ui/packages/consul-ui/app/components/collapsible-notices/index.scss b/ui/packages/consul-ui/app/components/collapsible-notices/index.scss
index b33f8a57b1..639d3cbb63 100644
--- a/ui/packages/consul-ui/app/components/collapsible-notices/index.scss
+++ b/ui/packages/consul-ui/app/components/collapsible-notices/index.scss
@@ -1,10 +1,10 @@
 .collapsible-notices {
   display: grid;
-  grid-template-columns: auto 168px;;
+  grid-template-columns: auto 168px;
   grid-template-rows: auto 55px;
   grid-template-areas:
-    "notices notices"
-    ". toggle-button";
+    'notices notices'
+    '. toggle-button';
   &.collapsed p {
     display: none;
   }
@@ -28,4 +28,4 @@
   button.collapse::before {
     @extend %with-chevron-up-mask, %as-pseudo;
   }
-}
\ No newline at end of file
+}
diff --git a/ui/packages/consul-ui/app/components/consul/auth-method/index.scss b/ui/packages/consul-ui/app/components/consul/auth-method/index.scss
index f0f1130f0b..dd7f74d8dd 100644
--- a/ui/packages/consul-ui/app/components/consul/auth-method/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/auth-method/index.scss
@@ -84,4 +84,3 @@
     }
   }
 }
-
diff --git a/ui/packages/consul-ui/app/components/consul/discovery-chain/layout.scss b/ui/packages/consul-ui/app/components/consul/discovery-chain/layout.scss
index 3c4c9b9d62..c196450e91 100644
--- a/ui/packages/consul-ui/app/components/consul/discovery-chain/layout.scss
+++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/layout.scss
@@ -95,7 +95,7 @@
 %route-card section header {
   display: block;
   width: 19px;
-  margin-right: 14px
+  margin-right: 14px;
 }
 /**/
 /* resolver */
diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/layout.scss b/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/layout.scss
index b098746a7d..048f79fa86 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/layout.scss
+++ b/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/layout.scss
@@ -22,6 +22,6 @@
     float: right;
   }
 }
-.consul-intention-permission-modal [role="dialog"] {
+.consul-intention-permission-modal [role='dialog'] {
   width: 100%;
 }
diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/index.scss b/ui/packages/consul-ui/app/components/consul/intention/form/index.scss
index c3413ab3cb..e0fcfa4e29 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/form/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/intention/form/index.scss
@@ -1,6 +1,6 @@
 .consul-intention-action-warn-modal {
   .modal-dialog-window {
-      max-width: 450px;
+    max-width: 450px;
   }
   .modal-dialog-body p {
     font-size: $typo-size-600;
diff --git a/ui/packages/consul-ui/app/components/consul/intention/list/index.scss b/ui/packages/consul-ui/app/components/consul/intention/list/index.scss
index e04fb4f63b..94c3441e61 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/list/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/intention/list/index.scss
@@ -1,4 +1,3 @@
 @import './components';
 @import './skin';
 @import './layout';
-
diff --git a/ui/packages/consul-ui/app/components/consul/intention/permission/form/layout.scss b/ui/packages/consul-ui/app/components/consul/intention/permission/form/layout.scss
index 99fd81031c..55f7697e8c 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/permission/form/layout.scss
+++ b/ui/packages/consul-ui/app/components/consul/intention/permission/form/layout.scss
@@ -1,8 +1,8 @@
 .consul-intention-permission-form {
   h2 {
     padding-top: 1.4em;
-    margin-top: .2em;
-    margin-bottom: .6em;
+    margin-top: 0.2em;
+    margin-bottom: 0.6em;
   }
   .consul-intention-permission-header-form {
     margin-top: 10px;
diff --git a/ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss b/ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss
index ba4ac03567..74352a027b 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss
+++ b/ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss
@@ -14,4 +14,3 @@
     @extend %frame-blue-200;
   }
 }
-
diff --git a/ui/packages/consul-ui/app/components/consul/intention/permission/header/list/index.scss b/ui/packages/consul-ui/app/components/consul/intention/permission/header/list/index.scss
index d59989e40f..60592fe9f6 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/permission/header/list/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/intention/permission/header/list/index.scss
@@ -5,4 +5,3 @@
     @extend %list-row-200;
   }
 }
-
diff --git a/ui/packages/consul-ui/app/components/consul/intention/permission/header/list/skin.scss b/ui/packages/consul-ui/app/components/consul/intention/permission/header/list/skin.scss
index 913490daac..3202b22d7a 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/permission/header/list/skin.scss
+++ b/ui/packages/consul-ui/app/components/consul/intention/permission/header/list/skin.scss
@@ -4,4 +4,3 @@
     content: 'H';
   }
 }
-
diff --git a/ui/packages/consul-ui/app/components/consul/lock-session/form/index.scss b/ui/packages/consul-ui/app/components/consul/lock-session/form/index.scss
index fd25dee9fe..1accb6ebaf 100644
--- a/ui/packages/consul-ui/app/components/consul/lock-session/form/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/lock-session/form/index.scss
@@ -3,7 +3,7 @@
     @extend %h200;
     border-bottom: $decor-border-200;
     border-color: $gray-200;
-    padding-bottom: .2em;
-    margin-bottom: .5em;
+    padding-bottom: 0.2em;
+    margin-bottom: 0.5em;
   }
 }
diff --git a/ui/packages/consul-ui/app/components/consul/lock-session/list/index.scss b/ui/packages/consul-ui/app/components/consul/lock-session/list/index.scss
index a557380100..7d7c82efe2 100644
--- a/ui/packages/consul-ui/app/components/consul/lock-session/list/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/lock-session/list/index.scss
@@ -8,4 +8,3 @@
   margin-right: 0.3em;
   display: inline;
 }
-
diff --git a/ui/packages/consul-ui/app/components/filter-bar/layout.scss b/ui/packages/consul-ui/app/components/filter-bar/layout.scss
index eb9019ea0e..ade5db2745 100644
--- a/ui/packages/consul-ui/app/components/filter-bar/layout.scss
+++ b/ui/packages/consul-ui/app/components/filter-bar/layout.scss
@@ -16,7 +16,6 @@
   .popover-menu > [type='checkbox'] + label button {
     padding-left: 1.5rem !important;
     padding-right: 1.5rem !important;
-
   }
   .popover-menu [role='menuitem'] {
     justify-content: normal !important;
@@ -32,13 +31,14 @@
       position: relative;
       z-index: 4;
       width: 100%;
-      margin-bottom: .3rem;
+      margin-bottom: 0.3rem;
     }
   }
 }
 @media #{$--lt-horizontal-selects} {
   .filter-bar {
-    .filters, .sort {
+    .filters,
+    .sort {
       display: none;
     }
   }
diff --git a/ui/packages/consul-ui/app/components/filter-bar/skin.scss b/ui/packages/consul-ui/app/components/filter-bar/skin.scss
index 49feb3c5e0..af5fa5003a 100644
--- a/ui/packages/consul-ui/app/components/filter-bar/skin.scss
+++ b/ui/packages/consul-ui/app/components/filter-bar/skin.scss
@@ -4,7 +4,8 @@
     border-bottom: $decor-border-100;
     border-color: $gray-200;
   }
-  .filters, .sort {
+  .filters,
+  .sort {
     .popover-menu > [type='checkbox']:checked + label button {
       color: $blue-500;
       background-color: $gray-100;
diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss b/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss
index 9d229c7ebb..baa367f343 100644
--- a/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss
+++ b/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss
@@ -1,12 +1,12 @@
 .hashicorp-consul {
-  [role="banner"] nav .dcs {
+  [role='banner'] nav .dcs {
     @extend %main-nav-vertical-hoisted;
     left: 100px;
   }
-  [role="banner"] nav .dcs .popover-menu[aria-label]::before {
+  [role='banner'] nav .dcs .popover-menu[aria-label]::before {
     display: none;
   }
-  [role="banner"] a svg {
+  [role='banner'] a svg {
     fill: var(--brand-600);
   }
   .docs-link a::after {
diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/index.scss b/ui/packages/consul-ui/app/components/main-nav-vertical/index.scss
index 3505d894f0..ab2ab88f8a 100644
--- a/ui/packages/consul-ui/app/components/main-nav-vertical/index.scss
+++ b/ui/packages/consul-ui/app/components/main-nav-vertical/index.scss
@@ -22,7 +22,7 @@
   @extend %main-nav-vertical-action;
 }
 %main-nav-vertical .popover-menu {
-  margin-top: .5rem;
+  margin-top: 0.5rem;
 }
 %main-nav-vertical .popover-menu .menu-panel {
   top: 37px !important;
@@ -50,4 +50,3 @@
 %main-nav-vertical label + div {
   @extend %main-nav-vertical-menu-panel;
 }
-
diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss b/ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss
index 9007228c7f..1fdacb3981 100644
--- a/ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss
+++ b/ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss
@@ -20,20 +20,20 @@
 // items, left and right aligned. We should remove this and look to use
 // align-self for anything that needs right aligning instead.
 
-%main-nav-vertical [role="menuitem"] {
+%main-nav-vertical [role='menuitem'] {
   justify-content: flex-start !important;
 }
-%main-nav-vertical [role="menuitem"] span {
-  margin-left: .5rem;
+%main-nav-vertical [role='menuitem'] span {
+  margin-left: 0.5rem;
 }
 %main-nav-vertical-action,
-%main-nav-vertical li:not([role="separator"]) > span,
-%main-nav-vertical [role="separator"] {
+%main-nav-vertical li:not([role='separator']) > span,
+%main-nav-vertical [role='separator'] {
   display: block;
   padding: 7px 25px;
 }
-%main-nav-vertical [role="separator"] {
-  margin-top: .7rem;
+%main-nav-vertical [role='separator'] {
+  margin-top: 0.7rem;
   padding-bottom: 0;
 }
 
diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss b/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss
index 2d49eeedae..96842a6621 100644
--- a/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss
+++ b/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss
@@ -8,7 +8,7 @@
   color: inherit;
   font-size: inherit;
 }
-%main-nav-vertical [role="separator"] {
+%main-nav-vertical [role='separator'] {
   @extend %p3;
   text-transform: uppercase;
   font-weight: $typo-weight-medium;
@@ -23,10 +23,10 @@
   background-color: var(--gray-050);
   color: var(--gray-700);
 }
-%main-nav-vertical li:not([role="separator"]) > span {
+%main-nav-vertical li:not([role='separator']) > span {
   color: var(--gray-300);
 }
-%main-nav-vertical [role="separator"] {
+%main-nav-vertical [role='separator'] {
   color: var(--gray-600);
 }
 %main-nav-vertical-action {
@@ -43,8 +43,8 @@
 %main-nav-vertical .popover-menu[aria-label]::before {
   content: attr(aria-label);
   display: block;
-  margin-top: -.5rem;
-  margin-bottom: .5rem;
+  margin-top: -0.5rem;
+  margin-bottom: 0.5rem;
 }
 %main-nav-vertical .is-local span:last-of-type {
   @extend %pill-200;
diff --git a/ui/packages/consul-ui/app/components/menu-panel/skin.scss b/ui/packages/consul-ui/app/components/menu-panel/skin.scss
index b7d542b2f3..998a39a8f0 100644
--- a/ui/packages/consul-ui/app/components/menu-panel/skin.scss
+++ b/ui/packages/consul-ui/app/components/menu-panel/skin.scss
@@ -46,4 +46,3 @@
 %menu-panel-separator:not(:first-child) {
   border-color: var(--gray-300);
 }
-
diff --git a/ui/packages/consul-ui/app/components/modal-dialog/index.scss b/ui/packages/consul-ui/app/components/modal-dialog/index.scss
index 4e8fe87b65..958bd312cf 100644
--- a/ui/packages/consul-ui/app/components/modal-dialog/index.scss
+++ b/ui/packages/consul-ui/app/components/modal-dialog/index.scss
@@ -6,6 +6,6 @@
 .modal-dialog {
   @extend %modal-dialog;
 }
-%modal-dialog [role="document"] {
+%modal-dialog [role='document'] {
   @extend %modal-window;
 }
diff --git a/ui/packages/consul-ui/app/components/modal-dialog/layout.scss b/ui/packages/consul-ui/app/components/modal-dialog/layout.scss
index 54b6445f24..313ac1e6d0 100644
--- a/ui/packages/consul-ui/app/components/modal-dialog/layout.scss
+++ b/ui/packages/consul-ui/app/components/modal-dialog/layout.scss
@@ -11,7 +11,7 @@
 %modal-dialog table {
   min-height: 149px;
 }
-%modal-dialog > div:first-child  {
+%modal-dialog > div:first-child {
   @extend %modal-dialog-overlay;
 }
 %modal-dialog,
diff --git a/ui/packages/consul-ui/app/components/notice/index.scss b/ui/packages/consul-ui/app/components/notice/index.scss
index 242df9cd5a..a965188ec3 100644
--- a/ui/packages/consul-ui/app/components/notice/index.scss
+++ b/ui/packages/consul-ui/app/components/notice/index.scss
@@ -29,4 +29,3 @@
   background-color: transparent;
   @extend %with-logo-kubernetes-color-icon;
 }
-
diff --git a/ui/packages/consul-ui/app/components/overlay/none.scss b/ui/packages/consul-ui/app/components/overlay/none.scss
index 81db3ad7b0..039f0ffcca 100644
--- a/ui/packages/consul-ui/app/components/overlay/none.scss
+++ b/ui/packages/consul-ui/app/components/overlay/none.scss
@@ -13,17 +13,17 @@
     outline: 0;
     transition-property: transform, visibility, opacity;
   }
-  &[data-animation=fade][data-state=hidden] {
+  &[data-animation='fade'][data-state='hidden'] {
     opacity: 0;
   }
-  &[data-inertia][data-state=visible] {
-    transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11);
+  &[data-inertia][data-state='visible'] {
+    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
   }
-  &[data-animation=fade][data-state=hidden] {
+  &[data-animation='fade'][data-state='hidden'] {
     opacity: 0;
   }
-  &[data-inertia][data-state=visible] {
-    transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11);
+  &[data-inertia][data-state='visible'] {
+    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
   }
   & {
     background-color: $white;
@@ -33,23 +33,23 @@
   .tippy-arrow {
     @extend %overlay-tail;
   }
-  &[data-placement^=bottom] > .tippy-arrow {
+  &[data-placement^='bottom'] > .tippy-arrow {
     @extend %overlay-tail-bottom;
   }
-  &[data-placement^=top] > .tippy-arrow {
+  &[data-placement^='top'] > .tippy-arrow {
     @extend %overlay-tail-top;
   }
-  &[data-placement^=left] > .tippy-arrow {
+  &[data-placement^='left'] > .tippy-arrow {
     @extend %overlay-tail-left;
   }
-  &[data-placement^=right] > .tippy-arrow {
+  &[data-placement^='right'] > .tippy-arrow {
     @extend %overlay-tail-right;
   }
 }
 %overlay-tail {
   --size: 5px;
   &::before {
-    content: "";
+    content: '';
     position: absolute;
   }
 }
@@ -65,7 +65,7 @@
 }
 %overlay-tail-bottom {
   & {
-    top: 0
+    top: 0;
   }
   &::before {
     left: 0;
@@ -84,11 +84,10 @@
 }
 %overlay-tail-right {
   & {
-    left: 0
+    left: 0;
   }
   &::before {
     left: calc(0px - var(--size));
     transform-origin: center right;
   }
 }
-
diff --git a/ui/packages/consul-ui/app/components/overlay/square-tail.scss b/ui/packages/consul-ui/app/components/overlay/square-tail.scss
index 9bbf54f225..2cd5136b6f 100644
--- a/ui/packages/consul-ui/app/components/overlay/square-tail.scss
+++ b/ui/packages/consul-ui/app/components/overlay/square-tail.scss
@@ -1,4 +1,4 @@
-[data-theme~="square-tail"] {
+[data-theme~='square-tail'] {
   .tippy-arrow {
     --size: 18px;
     left: calc(0px - (var(--size) / 2)) !important;
@@ -15,7 +15,7 @@
     position: absolute;
     left: 1px;
   }
-  &[data-placement^=top] {
+  &[data-placement^='top'] {
     & {
       bottom: -10px;
     }
@@ -31,7 +31,7 @@
       bottom: calc(0px - var(--size));
     }
   }
-  &[data-placement^=bottom] {
+  &[data-placement^='bottom'] {
     & {
       top: -10px;
     }
@@ -48,4 +48,3 @@
     }
   }
 }
-
diff --git a/ui/packages/consul-ui/app/components/search-bar/index.scss b/ui/packages/consul-ui/app/components/search-bar/index.scss
index d0b14a955a..588f5121dd 100644
--- a/ui/packages/consul-ui/app/components/search-bar/index.scss
+++ b/ui/packages/consul-ui/app/components/search-bar/index.scss
@@ -25,8 +25,8 @@
       }
     }
     & {
-      padding: .5rem 0;
-      padding-left: .5rem;
+      padding: 0.5rem 0;
+      padding-left: 0.5rem;
     }
     dt::after {
       content: ':';
diff --git a/ui/packages/consul-ui/app/components/skip-links/index.scss b/ui/packages/consul-ui/app/components/skip-links/index.scss
index 6734f9b320..bc18252196 100644
--- a/ui/packages/consul-ui/app/components/skip-links/index.scss
+++ b/ui/packages/consul-ui/app/components/skip-links/index.scss
@@ -1,3 +1,2 @@
 @import './skin';
 @import './layout';
-
diff --git a/ui/packages/consul-ui/app/components/skip-links/layout.scss b/ui/packages/consul-ui/app/components/skip-links/layout.scss
index b343f8530e..4dcce74155 100644
--- a/ui/packages/consul-ui/app/components/skip-links/layout.scss
+++ b/ui/packages/consul-ui/app/components/skip-links/layout.scss
@@ -19,4 +19,3 @@
 %skip-links:focus-within {
   top: 0px;
 }
-
diff --git a/ui/packages/consul-ui/app/components/skip-links/skin.scss b/ui/packages/consul-ui/app/components/skip-links/skin.scss
index d39cc93148..504a6cb9d3 100644
--- a/ui/packages/consul-ui/app/components/skip-links/skin.scss
+++ b/ui/packages/consul-ui/app/components/skip-links/skin.scss
@@ -7,4 +7,3 @@
 %skip-links a {
   color: inherit;
 }
-
diff --git a/ui/packages/consul-ui/app/components/tooltip/index.scss b/ui/packages/consul-ui/app/components/tooltip/index.scss
index 952723e778..20e64e2aa1 100644
--- a/ui/packages/consul-ui/app/components/tooltip/index.scss
+++ b/ui/packages/consul-ui/app/components/tooltip/index.scss
@@ -1,4 +1,4 @@
-.tippy-box[data-theme~=tooltip] {
+.tippy-box[data-theme~='tooltip'] {
   & {
     @extend %tooltip-bubble;
   }
@@ -8,16 +8,16 @@
   .tippy-arrow {
     @extend %tooltip-tail;
   }
-  &[data-placement^=bottom] > .tippy-arrow {
+  &[data-placement^='bottom'] > .tippy-arrow {
     @extend %tooltip-tail-bottom;
   }
-  &[data-placement^=top] > .tippy-arrow {
+  &[data-placement^='top'] > .tippy-arrow {
     @extend %tooltip-tail-top;
   }
-  &[data-placement^=left] > .tippy-arrow {
+  &[data-placement^='left'] > .tippy-arrow {
     @extend %tooltip-tail-left;
   }
-  &[data-placement^=right] > .tippy-arrow {
+  &[data-placement^='right'] > .tippy-arrow {
     @extend %tooltip-tail-right;
   }
 }
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
index 3567c5db75..d16a2eb5ab 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
@@ -78,4 +78,4 @@
   div.stats {
     border-top: 1px solid $gray-200;
   }
-}
\ No newline at end of file
+}
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/layout.scss b/ui/packages/consul-ui/app/components/topology-metrics/layout.scss
index 8a20647099..66c1f21c27 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/layout.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/layout.scss
@@ -5,9 +5,9 @@
   grid-template-columns: 2fr 1fr 2fr 1fr 2fr;
   grid-template-rows: 50px 1fr 50px;
   grid-template-areas:
-    "down-cards down-lines . up-lines up-cards"
-    "down-cards down-lines metrics up-lines up-cards"
-    "down-cards down-lines . up-lines up-cards";
+    'down-cards down-lines . up-lines up-cards'
+    'down-cards down-lines metrics up-lines up-cards'
+    'down-cards down-lines . up-lines up-cards';
 }
 
 // Grid Layout
@@ -67,4 +67,3 @@
     }
   }
 }
-
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss
index 39d2aa9ae3..f35429a194 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss
@@ -1,13 +1,14 @@
 .topology-metrics-popover {
   > button {
     position: absolute;
-    transform: translate(-50%,-50%);
+    transform: translate(-50%, -50%);
     background-color: $white;
     padding: 1px 1px;
     &:hover {
       cursor: pointer;
     }
-    &:active, &:focus {
+    &:active,
+    &:focus {
       outline: none;
     }
     &:disabled {
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/series/layout.scss b/ui/packages/consul-ui/app/components/topology-metrics/series/layout.scss
index c0a763095d..154b05fe18 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/series/layout.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/series/layout.scss
@@ -63,4 +63,4 @@
 }
 #metrics-container:hover .sparkline-key-link {
   visibility: visible;
-}
\ No newline at end of file
+}
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/series/skin.scss b/ui/packages/consul-ui/app/components/topology-metrics/series/skin.scss
index 104539e72d..98ec4cced8 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/series/skin.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/series/skin.scss
@@ -50,9 +50,9 @@
     }
   }
 
-  div.tooltip:before{
-    content:'';
-    display:block;
+  div.tooltip:before {
+    content: '';
+    display: block;
     position: absolute;
     width: 12px;
     height: 12px;
@@ -69,9 +69,9 @@
 // Key modal
 .sparkline-key {
   h3::before {
-      @extend %with-info-circle-fill-mask, %as-pseudo;
-      margin: 2px 3px 0 0;
-      font-size: 14px;
+    @extend %with-info-circle-fill-mask, %as-pseudo;
+    margin: 2px 3px 0 0;
+    font-size: 14px;
   }
 
   h3 {
@@ -99,4 +99,4 @@
   @extend %with-info-circle-fill-mask, %as-pseudo;
   margin: 1px 3px 0 0;
   font-size: 12px;
-}
\ No newline at end of file
+}
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/source-type/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/source-type/index.scss
index 578c0c1bed..e0a781c09c 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/source-type/index.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/source-type/index.scss
@@ -1,4 +1,4 @@
 .topology-metrics-source-type {
   margin: 6px 0 6px 12px;
   display: table;
-}
\ No newline at end of file
+}
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/stats/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/stats/index.scss
index 0a0502f93d..ac2569d4d6 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/stats/index.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/stats/index.scss
@@ -6,7 +6,7 @@
   align-items: stretch;
   width: 100%;
   dl {
-    display:flex;
+    display: flex;
     padding-bottom: 12px;
   }
   dt {
@@ -19,4 +19,4 @@
   span {
     padding-bottom: 12px;
   }
-}
\ No newline at end of file
+}
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/status/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/status/index.scss
index fb4cefb89e..6d7209aeed 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/status/index.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/status/index.scss
@@ -15,4 +15,4 @@
 
 span.topology-metrics-loader::after {
   @extend %with-loading-icon, %as-pseudo;
-}
\ No newline at end of file
+}
diff --git a/ui/packages/consul-ui/package.json b/ui/packages/consul-ui/package.json
index 6cfc9df1ca..76f15b70f4 100644
--- a/ui/packages/consul-ui/package.json
+++ b/ui/packages/consul-ui/package.json
@@ -19,7 +19,7 @@
     "_lint:dev:js": "eslint -c .dev.eslintrc.js --fix ./*.js ./.*.js app config lib server tests",
     "format": "npm-run-all format:*",
     "format:js": "prettier --write \"{app,config,lib,server,vendor,tests}/**/*.js\" ./*.js ./.*.js",
-    "format:sass": "prettier --write \"app/styles/**/*.*.scss\"",
+    "format:sass": "prettier --write \"app/**/*.scss\"",
     "start": "ember serve --port=${EMBER_SERVE_PORT:-4200} --live-reload-port=${EMBER_LIVE_RELOAD_PORT:-7020}",
     "start:staging": "ember serve --port=${EMBER_SERVE_PORT:-4200} --live-reload-port=${EMBER_LIVE_RELOAD_PORT:-7020} --environment staging",
     "start:consul": "ember serve --proxy=${CONSUL_HTTP_ADDR:-http://localhost:8500} --port=${EMBER_SERVE_PORT:-4200} --live-reload-port=${EMBER_LIVE_RELOAD_PORT:-7020}",
@@ -49,7 +49,7 @@
     "{app,config,lib,server,vendor,tests}/**/*.js": [
       "prettier --write"
     ],
-    "app/styles/**/*.*": [
+    "app/**/*.scss": [
       "prettier --write"
     ]
   },