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

.stylelintrc

+{
+  "extends": "stylelint-config-recommended",
+  "plugins": [
+    "stylelint-scss"
+  ],
+  "rules": {
+    "no-descending-specificity": null,
+    "font-family-no-missing-generic-family-keyword": null,
+    "at-rule-no-unknown": [ true, {
+      ignoreAtRules: ["include", "each", "mixin", "extend", "if", "function", "for", "else", "return"]
+    }],
+    "selector-type-no-unknown": [true, {
+      "ignoreTypes": ["gl-emoji"]
+    }],
+    "unit-no-unknown" : [true, {
+      "ignoreFunctions": ["-webkit-image-set"]
+    }],
+    "scss/at-extend-no-missing-placeholder": null,
+    "scss/at-function-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
+    "scss/at-import-no-partial-leading-underscore": true,
+    "scss/at-import-partial-extension-blacklist": ["scss"],
+    "scss/at-mixin-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
+    "scss/at-rule-no-unknown": true,
+    "scss/dollar-variable-colon-space-after": "always",
+    "scss/dollar-variable-colon-space-before": "never",
+    "scss/dollar-variable-pattern": "^[_]?[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
+    "scss/percent-placeholder-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
+    "scss/selector-no-redundant-nesting-selector": true,
+  }
+}

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 {

app/assets/stylesheets/framework/markdown_area.scss

@@ -228,7 +228,7 @@
   .cur {
     .avatar {
-      @include disableAllAnimation;
+      @include disable-all-animation;
       border: 1px solid $white-light;
     }
   }

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,

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

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 {

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 {

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) {

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 {

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,

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) {

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) {

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 {

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;

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%;

package.json

@@ -16,6 +16,7 @@
     "prettier-staged-save": "node ./scripts/frontend/prettier.js save",
     "prettier-all": "node ./scripts/frontend/prettier.js check-all",
     "prettier-all-save": "node ./scripts/frontend/prettier.js save-all",
+    "stylelint": "node node_modules/stylelint/bin/stylelint.js app/assets/stylesheets/**/*.*",
     "webpack": "webpack --config config/webpack.config.js",
     "webpack-prod": "NODE_ENV=production webpack --config config/webpack.config.js"
   },
@@ -168,7 +169,11 @@
     "karma-webpack": "^4.0.0-beta.0",
     "nodemon": "^1.18.9",
     "pixelmatch": "^4.0.2",
+    "postcss": "^7.0.14",
     "prettier": "1.16.1",
+    "stylelint": "^9.10.1",
+    "stylelint-config-recommended": "^2.1.0",
+    "stylelint-scss": "^3.5.3",
     "vue-jest": "^3.0.2",
     "webpack-dev-server": "^3.1.14",
     "yarn-deduplicate": "^1.1.0"

scripts/static-analysis

@@ -29,6 +29,7 @@ tasks = [
   %w[bin/rake lint:all],
   %w[bundle exec license_finder],
   %w[yarn run eslint],
+  %w[yarn run stylelint],
   %w[yarn run prettier-all],
   %w[bundle exec rubocop --parallel],
   %w[scripts/lint-conflicts.sh],