Added Stylelint Setup

Added stylelint to static-analysis
Updated yarn dependencies
CSS Fixes and rule adoptions of stylelint
Added stylelint-scss
Deduplicated yarn.lock to clear dependencies

14 files changed, 40 insertions, 46 deletions

diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
index 4fb787887a1..70d50c74ca9 100644
--- a/app/assets/stylesheets/framework/animations.scss
+++ b/app/assets/stylesheets/framework/animations.scss
@@ -63,15 +63,15 @@
 //
 // Pass in any number of transitions
 @mixin transition($transitions...) {
-  $unfoldedTransitions: ();
+  $unfolded-transitions: ();
   @each $transition in $transitions {
-    $unfoldedTransitions: append($unfoldedTransitions, unfoldTransition($transition), comma);
+    $unfolded-transitions: append($unfolded-transitions, unfold-transition($transition), comma);
   }
 
-  transition: $unfoldedTransitions;
+  transition: $unfolded-transitions;
 }
 
-@mixin disableAllAnimation {
+@mixin disable-all-animation {
   /*CSS transitions*/
   -o-transition-property: none !important;
   -moz-transition-property: none !important;
@@ -92,27 +92,27 @@
   animation: none !important;
 }
 
-@function unfoldTransition ($transition) {
+@function unfold-transition ($transition) {
   // Default values
   $property: all;
   $duration: $general-hover-transition-duration;
   $easing: $general-hover-transition-curve; // Browser default is ease, which is what we want
   $delay: null; // Browser default is 0, which is what we want
-  $defaultProperties: ($property, $duration, $easing, $delay);
+  $default-properties: ($property, $duration, $easing, $delay);
 
   // Grab transition properties if they exist
-  $unfoldedTransition: ();
-  @for $i from 1 through length($defaultProperties) {
+  $unfolded-transition: ();
+  @for $i from 1 through length($default-properties) {
     $p: null;
     @if $i <= length($transition) {
       $p: nth($transition, $i);
     } @else {
-      $p: nth($defaultProperties, $i);
+      $p: nth($default-properties, $i);
     }
-    $unfoldedTransition: append($unfoldedTransition, $p);
+    $unfolded-transition: append($unfolded-transition, $p);
   }
 
-  @return $unfoldedTransition;
+  @return $unfolded-transition;
 }
 
 .btn {
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index f708a26bb32..961de8402ef 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -228,7 +228,7 @@
 
   .cur {
     .avatar {
-      @include disableAllAnimation;
+      @include disable-all-animation;
       border: 1px solid $white-light;
     }
   }
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index a08639936c0..bf85acdc0d6 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -49,13 +49,6 @@
     word-wrap: normal;
   }
 
-  // Multi-line code blocks should scroll horizontally
-  pre {
-    code {
-      white-space: pre;
-    }
-  }
-
   kbd {
     display: inline-block;
     padding: 3px 5px;
@@ -166,6 +159,10 @@
     overflow-x: auto;
     border-radius: 2px;
 
+    // Multi-line code blocks should scroll horizontally
+    code {
+      white-space: pre;
+    }
 
     &.plain-readme {
       background: none;
@@ -303,11 +300,10 @@ body {
 }
 
 .page-title-empty {
-  margin-top: 0;
+  margin: 12px 0;
   line-height: 1.3;
   font-size: 1.25em;
   font-weight: $gl-font-weight-bold;
-  margin: 12px 0;
 }
 
 h1,
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 96dab609a13..530b1154550 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -251,7 +251,7 @@ $gl-padding-top: 10px;
 $gl-sidebar-padding: 22px;
 $gl-bar-padding: 3px;
 $input-horizontal-padding: 12px;
-$browserScrollbarSize: 10px;
+$browser-scrollbar-size: 10px;
 
 /*
  * Misc
diff --git a/app/assets/stylesheets/highlight/dark.scss b/app/assets/stylesheets/highlight/dark.scss
index 604f806dc58..ca9a2a673f5 100644
--- a/app/assets/stylesheets/highlight/dark.scss
+++ b/app/assets/stylesheets/highlight/dark.scss
@@ -125,7 +125,7 @@ $dark-il: #de935f;
 
     .diff-line-num.new,
     .line_content.new {
-      @include diff_background($dark-new-bg, $dark-new-idiff, $dark-border);
+      @include diff-background($dark-new-bg, $dark-new-idiff, $dark-border);
 
       &::before,
       a {
@@ -135,7 +135,7 @@ $dark-il: #de935f;
 
     .diff-line-num.old,
     .line_content.old {
-      @include diff_background($dark-old-bg, $dark-old-idiff, $dark-border);
+      @include diff-background($dark-old-bg, $dark-old-idiff, $dark-border);
 
       &::before,
       a {
diff --git a/app/assets/stylesheets/highlight/monokai.scss b/app/assets/stylesheets/highlight/monokai.scss
index 8e2720511da..bc3761d1e47 100644
--- a/app/assets/stylesheets/highlight/monokai.scss
+++ b/app/assets/stylesheets/highlight/monokai.scss
@@ -125,7 +125,7 @@ $monokai-gi: #a6e22e;
 
     .diff-line-num.new,
     .line_content.new {
-      @include diff_background($monokai-new-bg, $monokai-new-idiff, $monokai-diff-border);
+      @include diff-background($monokai-new-bg, $monokai-new-idiff, $monokai-diff-border);
 
       &::before,
       a {
@@ -135,7 +135,7 @@ $monokai-gi: #a6e22e;
 
     .diff-line-num.old,
     .line_content.old {
-      @include diff_background($monokai-old-bg, $monokai-old-idiff, $monokai-diff-border);
+      @include diff-background($monokai-old-bg, $monokai-old-idiff, $monokai-diff-border);
 
       &::before,
       a {
diff --git a/app/assets/stylesheets/highlight/none.scss b/app/assets/stylesheets/highlight/none.scss
index 7ced4e82e66..4bedb6a8e5b 100644
--- a/app/assets/stylesheets/highlight/none.scss
+++ b/app/assets/stylesheets/highlight/none.scss
@@ -4,7 +4,7 @@
 
 
 
-@mixin matchLine {
+@mixin match-line {
   color: $black-transparent;
   background-color: $white-normal;
 }
@@ -45,7 +45,7 @@
     &.match .line_content,
     .new-nonewline.line_content,
     .old-nonewline.line_content {
-      @include matchLine;
+      @include match-line;
     }
 
     .diff-line-num {
@@ -121,7 +121,7 @@
       }
 
       &.match {
-        @include matchLine;
+        @include match-line;
       }
 
       &.hll:not(.empty-cell) {
diff --git a/app/assets/stylesheets/highlight/solarized_dark.scss b/app/assets/stylesheets/highlight/solarized_dark.scss
index cd1f0f6650f..de7b9424340 100644
--- a/app/assets/stylesheets/highlight/solarized_dark.scss
+++ b/app/assets/stylesheets/highlight/solarized_dark.scss
@@ -129,7 +129,7 @@ $solarized-dark-il: #2aa198;
 
     .diff-line-num.new,
     .line_content.new {
-      @include diff_background($solarized-dark-new-bg, $solarized-dark-new-idiff, $solarized-dark-border);
+      @include diff-background($solarized-dark-new-bg, $solarized-dark-new-idiff, $solarized-dark-border);
 
       &::before,
       a {
@@ -139,7 +139,7 @@ $solarized-dark-il: #2aa198;
 
     .diff-line-num.old,
     .line_content.old {
-      @include diff_background($solarized-dark-old-bg, $solarized-dark-old-idiff, $solarized-dark-border);
+      @include diff-background($solarized-dark-old-bg, $solarized-dark-old-idiff, $solarized-dark-border);
 
       &::before,
       a {
diff --git a/app/assets/stylesheets/highlight/solarized_light.scss b/app/assets/stylesheets/highlight/solarized_light.scss
index 09c3ea36414..84a92d0320a 100644
--- a/app/assets/stylesheets/highlight/solarized_light.scss
+++ b/app/assets/stylesheets/highlight/solarized_light.scss
@@ -90,7 +90,7 @@ $solarized-light-vg: #268bd2;
 $solarized-light-vi: #268bd2;
 $solarized-light-il: #2aa198;
 
-@mixin matchLine {
+@mixin match-line {
   color: $black-transparent;
   background: $solarized-light-matchline-bg;
 }
@@ -125,7 +125,7 @@ $solarized-light-il: #2aa198;
     &.match .line_content,
     &.old-nonewline .line_content,
     &.new-nonewline .line_content {
-      @include matchLine;
+      @include match-line;
     }
 
     td.diff-line-num.hll:not(.empty-cell),
@@ -136,7 +136,7 @@ $solarized-light-il: #2aa198;
 
     .diff-line-num.new,
     .line_content.new {
-      @include diff_background($solarized-light-new-bg,
+      @include diff-background($solarized-light-new-bg,
       $solarized-light-new-idiff, $solarized-light-border);
 
       &::before,
@@ -147,7 +147,7 @@ $solarized-light-il: #2aa198;
 
     .diff-line-num.old,
     .line_content.old {
-      @include diff_background($solarized-light-old-bg, $solarized-light-old-idiff, $solarized-light-border);
+      @include diff-background($solarized-light-old-bg, $solarized-light-old-idiff, $solarized-light-border);
 
       &::before,
       a {
@@ -168,7 +168,7 @@ $solarized-light-il: #2aa198;
     }
 
     .line_content.match {
-      @include matchLine;
+      @include match-line;
     }
 
     &:not(.diff-expanded) + .diff-expanded,
diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss
index 90a5250c247..c636abbdfad 100644
--- a/app/assets/stylesheets/highlight/white_base.scss
+++ b/app/assets/stylesheets/highlight/white_base.scss
@@ -70,7 +70,7 @@ $white-gc-color: #999;
 $white-gc-bg: #eaf2f5;
 
 
-@mixin matchLine {
+@mixin match-line {
   color: $black-transparent;
   background-color: $gray-light;
 }
@@ -105,7 +105,7 @@ pre.code,
   &.match .line_content,
   .new-nonewline.line_content,
   .old-nonewline.line_content {
-    @include matchLine;
+    @include match-line;
   }
 
   .diff-line-num {
@@ -185,7 +185,7 @@ pre.code,
     }
 
     &.match {
-      @include matchLine;
+      @include match-line;
     }
 
     &.hll:not(.empty-cell) {
diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss
index 37ed5ae674a..cb5f1a84005 100644
--- a/app/assets/stylesheets/pages/detail_page.scss
+++ b/app/assets/stylesheets/pages/detail_page.scss
@@ -34,7 +34,6 @@
 
 .detail-page-header-actions {
   align-self: center;
-  flex-shrink: 0;
   flex: 0 0 auto;
 
   @include media-breakpoint-down(xs) {
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index e3b98b26a11..a708149b36c 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -602,7 +602,7 @@
   }
 }
 
-@mixin diff_background($background, $idiff, $border) {
+@mixin diff-background($background, $idiff, $border) {
   background: $background;
 
   &.line_content span.idiff {
diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss
index 5a988b184b6..655b297295a 100644
--- a/app/assets/stylesheets/pages/editor.scss
+++ b/app/assets/stylesheets/pages/editor.scss
@@ -182,9 +182,8 @@
 
 .template-selector-dropdowns-wrap {
   display: inline-block;
-  margin-left: 8px;
-  vertical-align: top;
   margin: 5px 0 0 8px;
+  vertical-align: top;
 
   @media(max-width: map-get($grid-breakpoints, md)-1) {
     display: block;
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 66866aedfba..277030ad3af 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -704,8 +704,8 @@
   .scrolling-tabs-container {
     .scrolling-tabs {
       margin-top: $gl-padding-8;
-      margin-bottom: $gl-padding-8 - $browserScrollbarSize;
-      padding-bottom: $browserScrollbarSize;
+      margin-bottom: $gl-padding-8 - $browser-scrollbar-size;
+      padding-bottom: $browser-scrollbar-size;
       flex-wrap: wrap;
       border-bottom: 0;
     }
@@ -713,7 +713,7 @@
     .fade-left,
     .fade-right {
       top: 0;
-      height: calc(100% - #{$browserScrollbarSize});
+      height: calc(100% - #{$browser-scrollbar-size});
 
       .fa {
         top: 50%;