feat: activate prettier for scss (pattern-lab#1468)

Author: JosefBredereck

packages/uikit-workshop/src/css/prism-okaidia.css

@@ -171,7 +171,7 @@ pre.line-numbers > code {
   counter-increment: linenumber;
 }
 
-.line-numbers-rows > span:before {
+.line-numbers-rows > span::before {
   content: counter(linenumber);
   color: #999;
   display: block;

packages/uikit-workshop/src/html/index.html

@@ -26,6 +26,7 @@
     <pl-layout></pl-layout>
 
     <!-- the template for the modal slider -->
+    <!-- prettier-ignore -->
     <script type="text/x-handlebars-template" class="pl-js-panel-template-base">
       ${require('./partials/base-template.html') }
     </script>

packages/uikit-workshop/src/sass/pattern-lab--iframe-loader.scss

@@ -18,7 +18,7 @@
   bottom: 0;
 }
 
-.pl-c-loader-wrapper:not(:last-child){
+.pl-c-loader-wrapper:not(:last-child) {
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s ease, transform 0.2s ease;

packages/uikit-workshop/src/sass/pattern-lab.scss

@@ -110,13 +110,13 @@
   min-height: 100vh;
 
   max-width: 100vw;
-  padding-left: .5rem;
-  padding-right: .5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
 
   // Clearing all remaining floats
   &::after {
     clear: both;
-    content: "";
+    content: '';
     display: table;
   }
 }

packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss

@@ -40,16 +40,13 @@
 
   &:hover,
   &.pl-is-active:hover {
-    background-color: rgba(0, 0, 0, .1);
+    background-color: rgba(0, 0, 0, 0.1);
   }
 
-
   /**
      * Header link styles inside light theme
      */
 
-
-
   /**
      * Header link styles inside cozy theme
      */
@@ -96,7 +93,7 @@
   user-select: none; /* Likely future */
 }
 
-@mixin buttonStyles(){
+@mixin buttonStyles() {
   color: inherit;
   text-decoration: none;
   background: transparent;
@@ -112,7 +109,7 @@
   position: relative;
   min-width: 30px;
 
-  &:after {
+  &::after {
     content: '';
     display: block;
     position: absolute;
@@ -122,19 +119,19 @@
     width: 100%;
     pointer-events: none;
     opacity: 0;
-    transition: opacity .1s ease;
+    transition: opacity 0.1s ease;
     background-color: currentColor;
   }
 
   // &:focus,
   &:hover {
-    &:after {
+    &::after {
       opacity: 0.1;
     }
   }
 
   &:active:hover {
-    &:after {
+    &::after {
       opacity: 0.2;
     }
   }
@@ -143,7 +140,7 @@
     outline: 1px dotted;
     outline-offset: -1px;
 
-    &:after {
+    &::after {
       opacity: 0.1;
     }
   }

packages/uikit-workshop/src/sass/scss/01-abstracts/_variables.scss

@@ -56,5 +56,4 @@ $pl-animate-normal: 0.3s;
 $pl-border-radius: 3px;
 $pl-border-radius-med: 6px;
 
-
 $pl-sidebar-width: 16rem; //Define sidebar width for calculating dimensions

packages/uikit-workshop/src/sass/scss/02-base/_body.scss

@@ -27,7 +27,7 @@
   --theme-primary: #464a6d;
   --theme-secondary: #161f50;
   --theme-text: white;
-  --theme-text-rgb: 255,255,255;
+  --theme-text-rgb: 255, 255, 255;
   --theme-border: rgba(255, 255, 255, 0.2);
 }
 

packages/uikit-workshop/src/sass/scss/02-base/_reset.scss

@@ -16,7 +16,7 @@
   box-sizing: border-box;
 }
 
-button[class|="pl-c"] {
+button[class|='pl-c'] {
   font-size: inherit;
   background-color: transparent;
 }

packages/uikit-workshop/src/sass/scss/03-vendor/_prism.scss

@@ -198,7 +198,7 @@
     counter-increment: linenumber;
   }
 
-  .line-numbers-rows > span:before {
+  .line-numbers-rows > span::before {
     content: counter(linenumber);
     color: #999;
     display: block;

packages/uikit-workshop/src/sass/scss/04-components/_annotations-inside-modal.scss

@@ -45,7 +45,7 @@
   border-radius: $pl-border-radius-med;
   transition: background-color $pl-animate-quick ease;
 
-  &:before {
+  &::before {
     content: counter(the-count);
     counter-increment: the-count;
     font-size: 85%;

packages/uikit-workshop/src/sass/scss/04-components/_breadcrumbs.scss

@@ -21,7 +21,7 @@
  */
 .pl-c-breadcrumb__item {
   color: inherit;
-  &:after {
+  &::after {
     content: '\25b6';
     opacity: 0.4;
     font-size: 6px;

packages/uikit-workshop/src/sass/scss/04-components/_pattern-info.scss

@@ -12,7 +12,6 @@
   display: flex;
   flex-direction: column;
 
-
   /**
      *  Pattern info inside the "view all" template
      */
@@ -39,7 +38,6 @@
     -webkit-overflow-scrolling: touch;
     flex-grow: 1;
 
-
     @media all and (min-width: $pl-bp-large) {
       position: static;
       flex-direction: row;
@@ -53,7 +51,7 @@
  *    Right side contains pattern code
  */
 .pl-c-pattern-info__panel {
-  padding: .5rem;
+  padding: 0.5rem;
   flex-shrink: 0; // prevent panel from collapsing in height (especially on smaller screens like iPhone)
   display: flex;
   flex-direction: column;
@@ -74,7 +72,6 @@
  * 1) Left panel that contains pattern title, lineage, description, annotations
  */
 .pl-c-pattern-info__panel--info {
-
   @media all and (min-width: $pl-bp-large) {
     overflow: auto;
     -webkit-overflow-scrolling: touch;

packages/uikit-workshop/src/sass/scss/04-components/_pattern-states.scss

@@ -34,6 +34,6 @@
 /**
 * Complete state
 */
-.complete:before {
+.complete::before {
   color: #03790f !important;
 }

packages/uikit-workshop/src/sass/scss/04-components/_pattern.scss

@@ -110,8 +110,8 @@
   display: inline-block;
   vertical-align: middle;
   position: absolute;
-  right: .625rem;
-  transition: opacity .1s linear;
+  right: 0.625rem;
+  transition: opacity 0.1s linear;
 }
 
 .pl-c-pattern__toggle-icon--expand {

packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss

@@ -75,7 +75,7 @@
   padding-left: 0.5rem;
   padding-right: 0.5rem;
   border: 1px solid #ddd;
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
   margin-top: -1px;
   background-color: inherit;
   border-top-left-radius: 5px;

packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss

@@ -40,7 +40,7 @@
   .pl-c-nav__link--dropdown {
     color: inherit;
 
-    &:after {
+    &::after {
       color: inherit;
     }
   }

packages/uikit-workshop/src/sass/scss/core.scss

@@ -1,2 +1,2 @@
 @import './01-abstracts/variables';
-@import './01-abstracts/mixins';
+@import './01-abstracts/mixins';

packages/uikit-workshop/src/scripts/components/pl-nav/nav-link.scss

@@ -154,23 +154,23 @@
   color: currentColor;
 
   // border to indicate which nav links have two specific actions
-  &:before {
+  &::before {
     opacity: 0.1;
     right: 2.4rem;
     width: 1px;
     left: auto;
     transform: translateY(-50%);
   }
 
-  &:after {
+  &::after {
     opacity: 0;
     width: 2.5rem;
     left: 50%;
     transform: translateY(-50%) translateX(-50%);
   }
 
-  &:before,
-  &:after {
+  &::before,
+  &::after {
     height: 2.5rem;
     transition: opacity $pl-animate-quick ease-out;
     content: '';

packages/uikit-workshop/src/scripts/components/pl-search/pl-search.scss

@@ -28,7 +28,7 @@ pl-search {
 
     // grow in size when focusing on inner input
     &:focus-within {
-      flex-shrink: .5;
+      flex-shrink: 0.5;
     }
 
     .pl-c-body--theme-sidebar & {
@@ -82,7 +82,7 @@ pl-search {
   color: $pl-color-white;
   background-color: rgba(var(--theme-text-rgb), 0.05);
   color: rgba(var(--theme-text-rgb), 0.67);
-  border-color: rgba(0, 0, 0, .1);
+  border-color: rgba(0, 0, 0, 0.1);
   border-color: rgba(var(--theme-text-rgb), 0.17);
   text-overflow: ellipsis;
   border-width: 1px;

packages/uikit-workshop/src/scripts/lit-components/pl-button/pl-button.scss

@@ -28,7 +28,7 @@ pl-button {
   padding: 0.5rem 1rem;
 
   &.pl-c-button--icon-only {
-    padding: .5rem;
+    padding: 0.5rem;
   }
 }
 

packages/uikit-workshop/src/scripts/lit-components/pl-controls/pl-controls.scss

@@ -19,7 +19,7 @@ pl-controls {
       padding-top: 0.5rem;
       // box-shadow: 0 -2px 5px rgba($pl-color-black, 0.1);
 
-      &:before {
+      &::before {
         position: absolute;
         left: 0;
         right: 0;

packages/uikit-workshop/src/scripts/lit-components/pl-drawer/pl-drawer.scss

@@ -170,7 +170,7 @@ pl-drawer {
   padding-top: 5px;
   padding-bottom: 5px;
 
-  &:after {
+  &::after {
     content: '';
     height: 100%;
     width: 100%;

packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.scss

@@ -38,7 +38,7 @@ pl-header {
       position: fixed;
       position: sticky;
       overflow: auto;
-    /**
+      /**
       * Header
       * 1) Set width to sidebar width defined above
       * 2) Make header 100% of the viewport height
@@ -49,7 +49,6 @@ pl-header {
       border-bottom: 0; /* 4 */
     }
   }
-
 }
 
 /**
@@ -67,7 +66,6 @@ pl-header {
   min-height: 30px; // magic number -- needed for initial skeleton screen styles used in the critical CSS
   background-color: inherit;
 
-
   @media all and (min-width: $pl-bp-med) {
     .pl-c-body--theme-sidebar & {
       flex-direction: column; /* 3 */

packages/uikit-workshop/src/scripts/lit-components/pl-logo/pl-logo.scss

@@ -16,7 +16,6 @@ pl-logo {
   padding: 0;
   min-height: 44px;
   min-width: 44px;
-
 }
 
 .pl-c-logo {
@@ -29,7 +28,7 @@ pl-logo {
   color: inherit;
   text-decoration: none;
 
-  @media screen and (min-width: 400px){
+  @media screen and (min-width: 400px) {
     padding: 0.5rem 12px;
   }
 
@@ -39,7 +38,7 @@ pl-logo {
   font-weight: bold;
   line-height: 1;
   margin: 0;
-  transition: color .2s ease;
+  transition: color 0.2s ease;
 
   &:focus {
     outline: 1px dotted;
@@ -53,7 +52,7 @@ pl-logo {
   max-width: 100%;
   max-height: 23px;
 
-  &:not(:last-child){
+  &:not(:last-child) {
     margin-right: 0.25rem;
   }
 }

packages/uikit-workshop/src/scripts/lit-components/pl-toggle-layout/pl-toggle-layout.scss

@@ -13,4 +13,4 @@ pl-toggle-layout {
 .pl-c-toggle-layout,
 .pl-c-toggle-layout__action {
   width: 100%;
-}
+}