Merge pull request #514 from mrfelton/style/lint-stylesheets

Ensure all component stylesheets are properly linted
7 years ago · 01003b4f84
30 changed files with 153 additions and 155 deletions
--- a/.stylelintrc
+++ b/.stylelintrc
@ -1,3 +1,7 @@
 {
-  "extends": "stylelint-config-standard"
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "no-descending-specificity": null,
+    "no-empty-source": null
+  }
 }
--- a/app/components/Activity/ActivityModal.scss
+++ b/app/components/Activity/ActivityModal.scss
@ -8,11 +8,11 @@

 .closeContainer {
  text-align: right;
-  padding: 20px 40px 0px;
+  padding: 20px 40px 0;

  span {
    cursor: pointer;
-    opacity: 1.0;
+    opacity: 1;
    transition: 0.25s all;

    &:hover {
@ -24,4 +24,3 @@
    color: $white;
  }
 }
-
--- a/app/components/Activity/Countdown.scss
+++ b/app/components/Activity/Countdown.scss
@ -13,4 +13,4 @@

 .caption {
  margin-right: 4px;
-}
+}
--- a/app/components/Activity/InvoiceModal.scss
+++ b/app/components/Activity/InvoiceModal.scss
@ -60,12 +60,11 @@

          span {
            font-size: 14px;
-            
+
            &:nth-child(1) {
              font-weight: bold;
            }
          }
-
        }

        ul {
@ -97,13 +96,14 @@
        text-align: right;

        .notPaid {
-          color: #FF8A65;
+          color: #ff8a65;
          margin-top: 5px;
        }
      }
    }

-    .memo, .request {
+    .memo,
+    .request {
      h4 {
        font-size: 10px;
        margin-bottom: 10px;
--- a/app/components/Activity/PaymentModal.scss
+++ b/app/components/Activity/PaymentModal.scss
@ -1,7 +1,5 @@
@import '../../variables.scss';

-@import '../../variables.scss';
-
 .container {
  color: $white;
  font-size: 12px;
@ -38,7 +36,7 @@

      div:nth-child(1) {
        margin-bottom: 5px;
-      } 
+      }

      svg {
        width: 12px;
@ -76,13 +74,13 @@
    &:hover {
      span {
        opacity: 0.5;
-      }  
+      }
    }

    span {
      transition: all 0.25s;
    }
-    
+
    ul {
      visibility: hidden;
      position: absolute;
@ -123,4 +121,4 @@
  p {
    cursor: pointer;
  }
-}
+}
--- a/app/components/Activity/TransactionModal.scss
+++ b/app/components/Activity/TransactionModal.scss
@ -36,7 +36,7 @@

      div:nth-child(1) {
        margin-bottom: 5px;
-      } 
+      }

      svg {
        width: 12px;
@ -79,13 +79,13 @@
    &:hover {
      span {
        opacity: 0.5;
-      }  
+      }
    }

    span {
      transition: all 0.25s;
    }
-    
+
    ul {
      visibility: hidden;
      position: absolute;
@ -128,8 +128,8 @@
    cursor: pointer;
    transition: all 0.25s;

-    &:hover  {
+    &:hover {
      opacity: 0.5;
    }
  }
-}
+}
--- a/app/components/Contacts/AddChannel.scss
+++ b/app/components/Contacts/AddChannel.scss
@ -13,7 +13,7 @@
  display: flex;
  flex-direction: row;
  justify-content: space-between;
-  background: linear-gradient(270deg, #868B9F 0%, #333C5E 100%);
+  background: linear-gradient(270deg, #868b9f 0%, #333c5e 100%);
  padding: 15px 10px;
  color: $white;

@ -42,7 +42,7 @@
 }

 .nodes {
-  background: #31343F;
+  background: #31343f;

  .networkResults {
    overflow-y: auto;
@ -93,7 +93,6 @@

      .inactive {
        font-size: 10px;
-
        display: inline-block;
        vertical-align: top;

@ -128,14 +127,14 @@
  }

  div {
-    background: #383B47;
+    background: #383b47;
    font-size: 16px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.25s;

    &:hover {
-      background: lighten(#383B47, 10%);
+      background: lighten(#383b47, 10%);
    }
  }
-}
+}
--- a/app/components/Contacts/ChannelForm.scss
+++ b/app/components/Contacts/ChannelForm.scss
@ -6,16 +6,16 @@
  z-index: 10;
  height: 100vh;
  width: 100%;
-  background: #31343F;
+  background: #31343f;
 }

 .closeContainer {
  text-align: right;
-  padding: 20px 40px 0px;
+  padding: 20px 40px 0;

  span {
    cursor: pointer;
-    opacity: 1.0;
+    opacity: 1;
    transition: 0.25s all;

    &:hover {
@ -26,4 +26,4 @@
  svg {
    color: $white;
  }
-}
+}
--- a/app/components/Contacts/ConnectManually.scss
+++ b/app/components/Contacts/ConnectManually.scss
@ -6,16 +6,16 @@
  z-index: 10;
  height: 100vh;
  width: 100%;
-  background: #31343F;
+  background: #31343f;
 }

 .closeContainer {
  text-align: right;
-  padding: 20px 40px 0px;
+  padding: 20px 40px 0;

  span {
    cursor: pointer;
-    opacity: 1.0;
+    opacity: 1;
    transition: 0.25s all;

    &:hover {
@ -28,10 +28,8 @@
  }
 }

-
 .content {
  padding: 0 40px;
-  font-family: Roboto;
  color: $white;

  .header {
@ -83,20 +81,18 @@

  input {
    font-size: 20px;
+    background: transparent;
+    outline: none;
+    border: 0;
+    color: $gold;
+    -webkit-text-fill-color: $white;
+    width: 100%;
+    font-weight: 200;
  }
 }

-.input input {
-  background: transparent;
-  outline: none;
-  border: 0;
-  color: $gold;
-  -webkit-text-fill-color: $white;
-  width: 100%;
-  font-weight: 200;
-}
-
-.input input::-webkit-input-placeholder, ::-webkit-input-placeholder {
+.input input::-webkit-input-placeholder,
+::-webkit-input-placeholder {
  text-shadow: none;
  -webkit-text-fill-color: initial;
 }
@ -128,7 +124,7 @@

    &.active {
      background: $gold;
-      opacity: 1.0;
+      opacity: 1;

      &:hover {
        background: darken($gold, 5%);
@ -136,4 +132,3 @@
    }
  }
 }
-
--- a/app/components/Contacts/ContactModal.scss
+++ b/app/components/Contacts/ContactModal.scss
@ -20,7 +20,7 @@
      margin-left: 5px;
    }
  }
-  
+
  .closeContainer {
    background: $lightgrey;
    line-height: 12px;
@ -36,7 +36,10 @@
  margin-bottom: 30px;
  padding: 0 20px;

-  .pay, .receive, .sent, .received {
+  .pay,
+  .receive,
+  .sent,
+  .received {
    margin: 40px 0;
  }
 }
@ -59,11 +62,9 @@
    color: $darkestgrey;
    font-weight: 100;
  }
-
 }

 .stats {
-
  h4 {
    color: $secondary;
    font-weight: bold;
@ -79,7 +80,8 @@
    color: $darkestgrey;
  }

-  .meter, .amount {
+  .meter,
+  .amount {
    height: 10px;
    border-radius: 10px;
  }
@ -139,9 +141,6 @@
  -webkit-border-radius: 999px;
  -moz-border-radius: 999px;
  border-radius: 999px;
-}
-
-.spinner {
  margin: 0 auto;
  height: 20px;
  width: 20px;
--- a/app/components/Contacts/ContactsForm.scss
+++ b/app/components/Contacts/ContactsForm.scss
@ -1,10 +1,9 @@
@import '../../variables.scss';

 .modal {
-  position: relative;
+  position: absolute;
  width: 50%;
  margin: 50px auto;
-  position: absolute;
  top: auto;
  left: 0;
  right: 0;
@ -13,7 +12,7 @@
  outline: none;
  z-index: -2;
  border: 1px solid $darkgrey;
-  
+
  header {
    display: flex;
    flex-direction: row;
@ -21,7 +20,8 @@
    padding: 15px;
    border-bottom: 1px solid $darkgrey;

-    h1, svg {
+    h1,
+    svg {
      font-size: 22px;
    }

@ -95,7 +95,6 @@

      .inactive {
        font-size: 12px;
-
        display: inline-block;
        vertical-align: top;

@ -206,9 +205,8 @@
    &:nth-child(2) {
      margin-left: 2px;
    }
-
  }
-  
+
  .caption svg {
    font-size: 10px;
    color: $darkestgrey;
@ -245,9 +243,6 @@
  -webkit-border-radius: 999px;
  -moz-border-radius: 999px;
  border-radius: 999px;
-}
-
-.spinner {
  margin: 0 auto;
  height: 20px;
  width: 20px;
@ -255,4 +250,4 @@
  -moz-animation: animation-rotate 1000ms linear infinite;
  -o-animation: animation-rotate 1000ms linear infinite;
  animation: animation-rotate 1000ms linear infinite;
-}
+}
--- a/app/components/Contacts/Network.scss
+++ b/app/components/Contacts/Network.scss
@ -13,7 +13,7 @@
  display: flex;
  flex-direction: row;
  justify-content: space-between;
-  background: #2D303B;
+  background: #2d303b;
  padding: 10px 20px;
  color: $white;

@ -48,7 +48,7 @@
 }

 .channels {
-  padding: 20px 0px 20px 0px;
+  padding: 20px 0 20px 0;
  overflow-y: auto;

  .listHeader {
@ -59,7 +59,8 @@
    align-items: baseline;
    padding: 0 20px;

-    h2, h2 span {
+    h2,
+    h2 span {
      color: $white;
      cursor: pointer;
      transition: color 0.25s;
@ -69,13 +70,14 @@
      }
    }

-    h2, .filters li {
+    h2,
+    .filters li {
      font-size: 12px;
    }

    .filters {
      display: none;
-      
+
      &.active {
        display: block;
        position: absolute;
@ -120,16 +122,16 @@

  .channel {
    color: $white;
-    padding: 10px 0px 10px 0px;
+    padding: 10px 0 10px 0;
    margin: 10px 0;
    cursor: pointer;

    &:hover {
-      background: #272B37;
+      background: #272b37;
    }

    &.selectedChannel {
-      background: #272B37;
+      background: #272b37;
      padding-bottom: 0;

      .channelDetails {
@ -197,7 +199,7 @@
  width: calc(100% - 40px);
  padding: 10px 20px;
  border-top: 1px solid $darkestgrey;
-  background: #2D303B;
+  background: #2d303b;

  .input {
    display: inline-block;
@ -216,7 +218,7 @@

    svg {
      width: 14px;
-      height:14px;
+      height: 14px;
    }
  }

@ -296,7 +298,7 @@
    display: flex;
    flex-direction: row;
    justify-content: space-around;
-    border-top: 0.5px solid #1A1C23;
+    border-top: 0.5px solid #1a1c23;
    margin-top: 10px;
    padding: 20px;

@ -318,11 +320,11 @@
  .actions {
    text-align: center;
    font-size: 12px;
-    color: #FF7686;
+    color: #ff7686;

    section {
      padding: 20px 0;
-      border-top: 0.5px solid #1A1C23;
+      border-top: 0.5px solid #1a1c23;

      div {
        transition: all 0.25s;
@ -345,4 +347,4 @@
      }
    }
  }
-}
+}
--- a/app/components/Contacts/SubmitChannelForm.scss
+++ b/app/components/Contacts/SubmitChannelForm.scss
@ -2,7 +2,6 @@

 .content {
  padding: 0 40px;
-  font-family: Roboto, sans-serif;
  color: $white;
  margin: 0 auto;
  width: 500px;
--- a/app/components/Form/Form.scss
+++ b/app/components/Form/Form.scss
@ -11,11 +11,11 @@

 .closeContainer {
  text-align: right;
-  padding: 20px 40px 0px;
+  padding: 20px 40px 0;

  span {
    cursor: pointer;
-    opacity: 1.0;
+    opacity: 1;
    transition: 0.25s all;

    &:hover {
--- a/app/components/Form/Pay.scss
+++ b/app/components/Form/Pay.scss
@ -2,7 +2,6 @@

 .container {
  padding: 0 40px;
-  font-family: Roboto;
  margin: 0 auto;
  width: 500px;
 }
@ -31,7 +30,7 @@
    .description {
      font-size: 12px;
      line-height: 14px;
-      padding: 0px 15px;
+      padding: 0 15px;
      min-height: 14px;

      &.active {
@ -57,7 +56,7 @@
    input {
      font-size: 20px;
      max-width: 150px;
-      border:1px solid #404040;
+      border: 1px solid #404040;
      border-radius: 4px;
      padding: 15px;
    }
@ -76,7 +75,8 @@
  }

  .bottom {
-    input, textarea {
+    input,
+    textarea {
      background: transparent;
      outline: none;
      border: 1px solid #404040;
@ -88,7 +88,8 @@
      padding: 10px;
    }

-    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
+    input::-webkit-input-placeholder,
+    textarea::-webkit-input-placeholder {
      text-shadow: none;
      -webkit-text-fill-color: initial;
    }
@ -111,12 +112,11 @@

      span {
        font-size: 14px;
-        
+
        &:nth-child(1) {
          font-weight: bold;
        }
      }
-
    }

    ul {
@ -163,7 +163,7 @@

      &.active {
        background: $gold;
-        opacity: 1.0;
+        opacity: 1;

        &:hover {
          background: darken($gold, 5%);
--- a/app/components/Form/Request.scss
+++ b/app/components/Form/Request.scss
@ -2,7 +2,6 @@

 .container {
  padding: 0 40px;
-  font-family: Roboto;
  margin: 0 auto;
  width: 500px;
 }
@ -37,7 +36,7 @@
    input {
      font-size: 20px;
      max-width: 150px;
-      border:1px solid #404040;
+      border: 1px solid #404040;
      border-radius: 4px;
      padding: 15px;
    }
@ -59,7 +58,7 @@
    input {
      background: transparent;
      outline: none;
-      border:1px solid #404040;
+      border: 1px solid #404040;
      border-radius: 4px;
      color: $gold;
      -webkit-text-fill-color: $white;
@ -92,12 +91,11 @@

      span {
        font-size: 14px;
-        
+
        &:nth-child(1) {
          font-weight: bold;
        }
      }
-
    }

    ul {
@ -144,7 +142,7 @@

      &.active {
        background: $gold;
-        opacity: 1.0;
+        opacity: 1;

        &:hover {
          background: darken($gold, 5%);
@ -153,4 +151,3 @@
    }
  }
 }
-
--- a/app/components/Onboarding/Alias.scss
+++ b/app/components/Onboarding/Alias.scss
@ -3,7 +3,7 @@
 .alias {
  background: transparent;
  outline: none;
-  border:1px solid #404040;
+  border: 1px solid #404040;
  border-radius: 4px;
  padding: 15px;
  color: $gold;
@ -14,4 +14,4 @@
 .alias::-webkit-input-placeholder {
  text-shadow: none;
  -webkit-text-fill-color: initial;
-}
+}
--- a/app/components/Onboarding/FormContainer.scss
+++ b/app/components/Onboarding/FormContainer.scss
@ -72,14 +72,12 @@
    .backButton {
      cursor: pointer;
      transition: all 0.25s;
-      padding: 10px 20px 10px 0px;
+      padding: 10px 20px 10px 0;
      text-align: center;
-      
+
      &:hover {
        opacity: 0.5;
      }
    }
-    
  }
 }
-
--- a/app/components/Onboarding/InitWallet.scss
+++ b/app/components/Onboarding/InitWallet.scss
@ -7,7 +7,7 @@
 .password {
  background: transparent;
  outline: none;
-  border:1px solid #404040;
+  border: 1px solid #404040;
  border-radius: 4px;
  padding: 15px;
  color: $gold;
@ -39,7 +39,7 @@
        transition: all 0.25s;

        &.active {
-          opacity: 1.0;
+          opacity: 1;
          cursor: pointer;

          &:hover {
@ -49,7 +49,8 @@
      }
    }

-    &:nth-child(2), &:nth-child(3) {
+    &:nth-child(2),
+    &:nth-child(3) {
      font-size: 12px;
      cursor: pointer;
      margin: 10px 0;
@ -59,4 +60,4 @@
      }
    }
  }
-}
+}
--- a/app/components/Onboarding/Login.scss
+++ b/app/components/Onboarding/Login.scss
@ -7,7 +7,7 @@
 .password {
  background: transparent;
  outline: none;
-  border:1px solid #404040;
+  border: 1px solid #404040;
  border-radius: 4px;
  padding: 15px;
  color: $gold;
@ -61,7 +61,7 @@
        }

        &.active {
-          opacity: 1.0;
+          opacity: 1;
          cursor: pointer;

          &:hover {
@ -71,7 +71,8 @@
      }
    }

-    &:nth-child(2), &:nth-child(3) {
+    &:nth-child(2),
+    &:nth-child(3) {
      font-size: 12px;
      cursor: pointer;
      margin: 10px 0;
--- a/app/components/Onboarding/NewAezeedPassword.scss
+++ b/app/components/Onboarding/NewAezeedPassword.scss
@ -7,7 +7,7 @@
 .password {
  background: transparent;
  outline: none;
-  border:1px solid #404040;
+  border: 1px solid #404040;
  border-radius: 4px;
  padding: 15px;
  color: $gold;
--- a/app/components/Onboarding/NewWalletSeed.scss
+++ b/app/components/Onboarding/NewWalletSeed.scss
@ -3,14 +3,13 @@
 .container {
  font-size: 14px;
  color: $white;
-  font-family: 'Roboto';
  letter-spacing: 1.5px;

  li {
    display: inline-block;
    margin: 5px 0;
    width: 25%;
-    font-family: 'Courier';
+    font-family: 'Courier', courier, sans-serif;

    section {
      display: inline-block;
@ -46,4 +45,4 @@
      color: $red;
    }
  }
-}
+}
--- a/app/components/Onboarding/RecoverForm.scss
+++ b/app/components/Onboarding/RecoverForm.scss
@ -29,8 +29,6 @@
  }
 }

-
-
 .word {
  margin: 0 3px;
  background-color: #1c1e26;
@ -38,8 +36,7 @@
  border: none;
  padding: 5px 10px;
  color: $white;
-  font-family: courier;
-  font-family: 'Courier';
+  font-family: 'Courier', courier, sans-serif;

  &.valid {
    color: $green;
--- a/app/components/Onboarding/Signup.scss
+++ b/app/components/Onboarding/Signup.scss
@ -5,7 +5,7 @@

  section {
    margin-bottom: 20px;
-    
+
    &.enable {
      &.active {
        div {
@ -49,4 +49,4 @@
      margin-left: 15px;
    }
  }
-}
+}
--- a/app/components/Onboarding/Syncing.scss
+++ b/app/components/Onboarding/Syncing.scss
@ -4,7 +4,6 @@
  position: relative;
  height: 100vh;
  background: #2a2d38;
-  font-family: 'Roboto', sans-serif;
 }

 .titleBar {
--- a/app/components/Wallet/ReceiveModal.scss
+++ b/app/components/Wallet/ReceiveModal.scss
@ -8,11 +8,11 @@

 .closeContainer {
  text-align: right;
-  padding: 20px 40px 0px;
+  padding: 20px 40px 0;

  span {
    cursor: pointer;
-    opacity: 1.0;
+    opacity: 1;
    transition: 0.25s all;

    &:hover {
@ -39,7 +39,6 @@
    padding: 30px 40px;

    .header {
-      
      h2 {
        text-align: center;
      }
@ -61,12 +60,12 @@
          }

          &.active {
-            opacity: 1.0;
+            opacity: 1;
          }
        }
      }
    }
-    
+
    .qrCodeContainer {
      text-align: center;
    }
@ -78,7 +77,8 @@
    border-left: 1px solid $spaceborder;
    padding: 30px 40px;

-    .pubkey, .address {
+    .pubkey,
+    .address {
      padding: 25px;

      h4 {
@ -90,17 +90,17 @@
        }
      }
    }
-    
+
    p {
      display: flex;
      flex-direction: row;
      align-items: center;
-      font-family: 'Roboto';
      font-size: 10px;
      font-weight: 200;
      background: $bluegrey;

-      .data, .copy {
+      .data,
+      .copy {
        padding: 15px;
      }

@ -124,6 +124,6 @@
          width: 12px;
        }
      }
-    }    
+    }
  }
 }
--- a/app/components/Wallet/Wallet.scss
+++ b/app/components/Wallet/Wallet.scss
@ -28,15 +28,17 @@
  }
 }

-.left, .right {
+.left,
+.right {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  height: 150px;

-  .leftContent, .rightContent {
+  .leftContent,
+  .rightContent {
    padding: 25px 0;
-  }  
+  }
 }

 .leftContent {
@ -109,7 +111,7 @@

          li {
            font-size: 12px;
-            padding: 0px 15px;
+            padding: 0 15px;
            background: #191919;
            cursor: pointer;
            transition: 0.25s hover;
@ -159,11 +161,12 @@
  justify-content: flex-end;
  align-items: right;

-  .pay, .request {
+  .pay,
+  .request {
    font-size: 16px;
    font-weight: bold;
    color: $white;
-    background: #31343F;
+    background: #31343f;
    padding: 10px;
    width: 100px;
    text-align: center;
@ -180,7 +183,6 @@
      margin-right: 20px;
    }
  }
-
 }

 .notificationBox {
@ -192,7 +194,7 @@
    vertical-align: middle;
    transition: all 0.25s;
  }
-  
+
  .spinner {
    height: 20px;
    width: 20px;
--- a/app/routes/activity/components/components/Activity.scss
+++ b/app/routes/activity/components/components/Activity.scss
@ -7,8 +7,8 @@
  height: 76px;
  align-items: center;
  font-size: 14px;
-  transition: background-color .1s linear;
-  transition-delay: .1s;
+  transition: background-color 0.1s linear;
+  transition-delay: 0.1s;
  color: $white;
  position: relative;

@ -73,12 +73,11 @@

  &:nth-child(2) {
    font-size: 10px;
-  } 
+  }

  .title {
    margin-bottom: 10px;
    font-size: 14px;
-    font-family: Roboto;
  }

  .subtitle {
@ -86,16 +85,19 @@
    font-size: 10px;
  }

-  .icon, h3, span {
+  .icon,
+  h3,
+  span {
    vertical-align: middle;
  }

-  h3, span {
+  h3,
+  span {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1.2px;
  }
-  
+
  .icon {
    display: inline-block;
    flex: none;
@ -121,8 +123,8 @@
  h3 {
    display: inline-block;

-    &:after {
-      content: " ";
+    &::after {
+      content: ' ';
      display: inline-block;
      width: 3px;
    }
@ -144,13 +146,14 @@
    &:nth-child(1) {
      margin-bottom: 10px;
    }
-    
+
    &:nth-child(2) {
      font-size: 10px;
      opacity: 0.5;
    }

-    .plus, .minus {
+    .plus,
+    .minus {
      margin-right: 2px;
    }

--- a/package.json
+++ b/package.json
@ -15,10 +15,10 @@
    "lint": "npm run lint-base -- .",
    "lint-fix-base": "npm run lint-base -- --fix",
    "lint-fix": "npm run lint-fix-base -- \"./**/*.{js,json,md}\"",
-    "lint-styles-base": "stylelint --syntax scss",
-    "lint-styles": "npm run lint-styles-base -- app/*.scss app/components/*.scss",
+    "lint-styles-base": "stylelint --custom-formatter=node_modules/stylelint-formatter-pretty",
+    "lint-styles": "npm run lint-styles-base -- app/*.scss app/components/**/*.scss",
    "lint-styles-fix-base": "npm run lint-styles-base -- --fix",
-    "lint-styles-fix": "npm run lint-styles-fix-base -- app/*.scss app/components/*.scss",
+    "lint-styles-fix": "npm run lint-styles-fix-base -- app/*.scss app/components/**/*.scss",
    "lint-check": "eslint --print-config .eslintrc.js | eslint-config-prettier-check",
    "lint-ci": "npm run lint && npm run lint-styles && npm run flow",
    "package": "npm run build && build --publish never",
@ -211,6 +211,7 @@
    "style-loader": "^0.21.0",
    "stylelint": "9.3.0",
    "stylelint-config-standard": "^18.2.0",
+    "stylelint-formatter-pretty": "^1.0.3",
    "url-loader": "^1.0.1",
    "webpack": "^4.12.0",
    "webpack-bundle-analyzer": "^2.13.1",
--- a/yarn.lock
+++ b/yarn.lock
@ -10905,6 +10905,16 @@ stylelint-config-standard@^18.2.0:
  dependencies:
    stylelint-config-recommended "^2.1.0"

+stylelint-formatter-pretty@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/stylelint-formatter-pretty/-/stylelint-formatter-pretty-1.0.3.tgz#a6b43c3f3a13206bdfb777d0da8cefc6c76c36c3"
+  dependencies:
+    ansi-escapes "^2.0.0"
+    chalk "^1.1.3"
+    log-symbols "^1.0.2"
+    plur "^2.1.2"
+    string-width "^2.0.0"
+
 stylelint@9.3.0:
  version "9.3.0"
  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-9.3.0.tgz#fe176e4e421ac10eac1a6b6d9f28e908eb58c5db"