From 69f2e12ea064b697b635f1538b373c99d8981363 Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Thu, 12 Jan 2017 11:23:06 +0100
Subject: [PATCH] Add stylelint and fix lint issues

---
 .travis.yml                   |  1 +
 package.json                  |  7 ++-
 src/styles/_base.scss         |  9 ++--
 src/styles/_components.scss   | 19 ++++---
 src/styles/_filtereditor.scss |  5 +-
 src/styles/_input.scss        | 13 ++---
 src/styles/_layer.scss        | 43 ++++++----------
 src/styles/_layout.scss       | 16 +++---
 src/styles/_mixins.scss       |  7 +++
 src/styles/_modal.scss        | 94 +++++++++++++++++++----------------
 src/styles/_popup.scss        |  5 --
 src/styles/_reset.scss        |  1 +
 src/styles/_scrollbar.scss    | 14 +++---
 src/styles/_toolbar.scss      |  3 +-
 src/styles/_zoomproperty.scss |  9 +++-
 src/styles/index.scss         |  1 -
 16 files changed, 133 insertions(+), 114 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 62a9559..6e36ca8 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -18,4 +18,5 @@ script:
   - mkdir public
   - node --stack_size=100000 $(which npm) run build
   - npm run lint
+  - npm run lint-styles
   - npm run test
diff --git a/package.json b/package.json
index 110a957..93edec5 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
     "test": "karma start --single-run",
     "test-watch": "karma start",
     "start": "webpack-dev-server --progress --profile --colors --watch-poll",
-    "lint": "eslint --ext js --ext jsx {src,test}"
+    "lint": "eslint --ext js --ext jsx {src,test}",
+    "lint-styles": "stylelint 'src/styles/*.scss'"
   },
   "repository": {
     "type": "git",
@@ -63,6 +64,9 @@
   "jshintConfig": {
     "esversion": 6
   },
+  "stylelint": {
+    "extends": "stylelint-config-standard"
+  },
   "eslintConfig": {
     "plugins": [
       "react"
@@ -116,6 +120,7 @@
     "react-hot-loader": "^3.0.0-beta.6",
     "sass-loader": "^4.0.1",
     "style-loader": "0.13.1",
+    "stylelint-config-standard": "^15.0.1",
     "transform-loader": "^0.2.3",
     "url-loader": "0.5.7",
     "webpack": "1.13.2",
diff --git a/src/styles/_base.scss b/src/styles/_base.scss
index ce81d9f..0261d8e 100644
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@@ -18,7 +18,9 @@ html {
   box-sizing: border-box;
 }
 
-*, *:before, *:after {
+*,
+*::before,
+*::after {
   box-sizing: inherit;
 }
 
@@ -53,7 +55,8 @@ h4 {
   margin-bottom: $margin-3;
 }
 
-input:focus, select:focus {
+input:focus,
+select:focus {
   color: $color-white !important;
   outline: #8e8e8e auto 1px !important;
 }
@@ -63,7 +66,7 @@ label:hover {
 }
 
 .clearfix {
-  &:after {
+  &::after {
     content: "";
     display: table;
     clear: both;
diff --git a/src/styles/_components.scss b/src/styles/_components.scss
index 1250163..6813c6d 100644
--- a/src/styles/_components.scss
+++ b/src/styles/_components.scss
@@ -2,8 +2,8 @@
 .maputnik-map {
   position: fixed !important;
   top: 40px;
-  right: 0px;
-  bottom: 0px;
+  right: 0;
+  bottom: 0;
   height: 100%;
   width: 75%;
 }
@@ -14,7 +14,7 @@
     cursor: help;
   }
 
-  &-wrapper{
+  &-wrapper {
     display: inline-block;
     box-sizing: border-box;
     font-size: $font-size-6;
@@ -32,7 +32,7 @@
     font-size: 10px;
     position: absolute;
     top: 20px;
-    left: 0px;
+    left: 0;
     width: 120px;
     z-index: 3;
   }
@@ -68,11 +68,15 @@
 
 .maputnik-icon-button {
   background-color: transparent;
+
   &:hover {
     background-color: transparent;
-    label, svg {
+
+    label,
+    svg {
       cursor: pointer;
     }
+
     svg {
       fill: $color-white;
     }
@@ -102,6 +106,7 @@
     display: inline-block;
     width: 43%;
   }
+
   .maputnik-input-block-action {
     vertical-align: top;
     display: inline-block;
@@ -111,14 +116,14 @@
 
 // SPACE HELPER
 .maputnik-space {
-	flex-grow: 1;
+  @include vendor-prefix(flex-grow, 1);
 }
 
 // MESSAGE PANEL
 .maputnik-message-panel {
   padding: $margin-2;
 
-  &-error  {
+  &-error {
     color: $color-red;
   }
 }
diff --git a/src/styles/_filtereditor.scss b/src/styles/_filtereditor.scss
index 9a5c572..567ea01 100644
--- a/src/styles/_filtereditor.scss
+++ b/src/styles/_filtereditor.scss
@@ -54,6 +54,7 @@
   margin-top: $margin-2;
   margin-bottom: $margin-2;
 }
+
 .maputnik-filter-editor-block-action {
   display: inline-block;
   width: 6%;
@@ -73,6 +74,7 @@
 .maputnik-filter-editor-operator {
   display: inline-block;
   width: 17%;
+
   .maputnik-select {
     width: 100%;
   }
@@ -82,7 +84,8 @@
   display: inline-block;
   width: 54%;
 
-  .maputnik-string, .maputnik-number {
+  .maputnik-string,
+  .maputnik-number {
     width: 100%;
   }
 }
diff --git a/src/styles/_input.scss b/src/styles/_input.scss
index 55080d0..49757e9 100644
--- a/src/styles/_input.scss
+++ b/src/styles/_input.scss
@@ -24,20 +24,15 @@
 //COLOR PICKER
 .maputnik-color {
   @extend .maputnik-input;
+
   height: 26px;
 }
+
 .maputnik-color-wrapper {
   position: relative;
   display: inline;
 }
 
-.maputnik-color-picker-offset {
-
-}
-.maputnik-color-picker-overlay {
-
-}
-
 // ARRAY
 
 .maputnik-array {
@@ -49,6 +44,7 @@
 // SELECT
 .maputnik-select {
   @extend .maputnik-input;
+
   height: 24px;
 }
 
@@ -76,6 +72,7 @@
 
   &-wrapper {
     @extend .maputnik-input;
+
     padding-left: 0;
     padding-right: 0;
     position: relative;
@@ -116,7 +113,7 @@
     overflow: auto;
     max-height: 50%;
     background: $color-gray;
-    z-index: 3,
+    z-index: 3;
   }
 
   &-menu-item {
diff --git a/src/styles/_layer.scss b/src/styles/_layer.scss
index b0492e1..be4812d 100644
--- a/src/styles/_layer.scss
+++ b/src/styles/_layer.scss
@@ -1,13 +1,9 @@
 // LAYER LIST
-.maputnik-add-layer {
-}
-
 .maputnik-layer-list {
-  &-header{
+  &-header {
     padding: $margin-2;
-    display: flex;
-    display: -ms-flexbox;
-    @include vendor-prefix(flex-direction, row)
+
+    @include flex-row;
 
     > * {
       vertical-align: middle;
@@ -32,7 +28,7 @@
     font-weight: 400;
     color: $color-lowgray;
     font-size: $font-size-6;
-    border-width: 0px 0px 1px;
+    border-width: 0 0 1px;
     border-style: solid;
     border-color: lighten($color-black, 0.1);
     user-select: none;
@@ -43,24 +39,24 @@
     padding: 5px 10px;
     line-height: 1.3;
     max-height: 50px;
-    display: flex;
-    display: -ms-flexbox;
-    @include vendor-prefix(flex-direction, row);
-     opacity: 1;
-
+    opacity: 1;
     -webkit-transition: opacity 600ms, visibility 600ms;
     transition: opacity 600ms, visibility 600ms;
+
+    @include flex-row;
   }
 
   &-icon-action svg {
     fill: $color-black;
   }
 
-  .maputnik-layer-list-item:hover, .maputnik-layer-list-item-selected {
+  .maputnik-layer-list-item:hover,
+  .maputnik-layer-list-item-selected {
     background-color: lighten($color-black, 2);
 
     .maputnik-layer-list-icon-action svg {
       fill: darken($color-lowgray, 0.5);
+
       &:hover {
         fill: $color-white;
       }
@@ -73,9 +69,9 @@
 
   &-item-collapsed {
     position: absolute;
-    max-height: 0px;
+    max-height: 0;
     overflow: hidden;
-    padding: 0px;
+    padding: 0;
     opacity: 0;
     visibility: hidden;
   }
@@ -91,10 +87,6 @@
     text-overflow: ellipsis;
   }
 
-  &-group {
-    //border-bottom: 2px solid $color-gray;
-  }
-
   &-group-header {
     font-size: $font-size-6;
     color: $color-lowgray;
@@ -102,9 +94,8 @@
     cursor: pointer;
     user-select: none;
     padding: $margin-2;
-    display: flex;
-    display: -ms-flexbox;
-    @include vendor-prefix(flex-direction, row)
+
+    @include flex-row;
 
     svg {
       width: 14px;
@@ -121,7 +112,6 @@
   }
 }
 
-
 // FILTER EDITOR
 .maputnik-layer-editor-group {
   font-weight: bold;
@@ -131,11 +121,10 @@
   cursor: pointer;
   user-select: none;
   padding: $margin-2;
-  display: flex;
-  display: -ms-flexbox;
-  @include vendor-prefix(flex-direction, row)
   line-height: 20px;
 
+  @include flex-row;
+
   &:hover {
     background-color: $color-gray;
   }
diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss
index 9db9a1e..1a900bc 100644
--- a/src/styles/_layout.scss
+++ b/src/styles/_layout.scss
@@ -2,9 +2,9 @@
 .maputnik-scroll-container {
   overflow-x: visible;
   overflow-y: scroll;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
+  bottom: 0;
+  left: 0;
+  right: 0;
   top: 1px;
   position: absolute;
 }
@@ -16,18 +16,19 @@
 
   &-list {
     position: fixed;
-    bottom: 0px;
+    bottom: 0;
     height: 100%;
     top: 40px;
-    left: 0px;
+    left: 0;
     z-index: 3;
     width: 200px;
     overflow: hidden;
     background-color: $color-black;
   }
+
   &-drawer {
     position: fixed;
-    bottom: 0px;
+    bottom: 0;
     height: 100%;
     top: 40px;
     left: 200px;
@@ -35,10 +36,11 @@
     width: 350px;
     background-color: $color-black;
   }
+
   &-bottom {
     position: fixed;
     height: 50px;
-    bottom: 0px;
+    bottom: 0;
     left: 550px;
     z-index: 1;
     width: 100%;
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index bfd5763..4ea6832 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -5,3 +5,10 @@
   -o-#{$name}: #{$argument};
   #{$name}: #{$argument};
 }
+
+@mixin flex-row {
+  display: flex;
+  display: -ms-flexbox;
+
+  @include vendor-prefix(flex-direction, row);
+}
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index cf436e3..c2a5aed 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -3,20 +3,22 @@
   min-width: 350px;
   max-width: 600px;
   background-color: $color-black;
-  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
+  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
   z-index: 3;
 }
+
 .maputnik-modal-section {
   padding-top: $margin-3;
   padding-bottom: $margin-3;
 }
+
 .maputnik-modal-header {
   background-color: $color-gray;
-  display: flex;
-  display: -ms-flexbox;
-  @include vendor-prefix(flex-direction, row)
   padding: $margin-3;
+
+  @include flex-row;
 }
+
 .maputnik-modal-header-title {
   font-size: $font-size-5;
   margin: 0;
@@ -25,6 +27,7 @@
 .maputnik-modal-header-toggle {
   cursor: pointer;
 }
+
 .maputnik-modal-content {
   padding: $margin-3;
 }
@@ -35,33 +38,33 @@
 
 //OVERLAY
 .maputnik-overlay-viewport {
-    position: fixed;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    left: 0px;
-    z-index: 2;
-    opacity: 0.875;
-    background-color: rgb(28, 31, 36);
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  opacity: 0.875;
+  background-color: rgb(28, 31, 36);
 }
 
 .maputnik-overlay {
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    left: 0px;
-    position: fixed;
-    display: -ms-flexbox;
-    display: flex;
-    @include vendor-prefix(flex-direction, column)
-    align-items: center;
-    justify-content: center;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  align-items: center;
+  justify-content: center;
+
+  @include flex-row;
 }
 
 //OPEN MODAL
 .maputnik-upload-button {
   @extend .maputnik-big-button;
 }
+
 .maputnik-public-style {
   vertical-align: top;
   margin-top: 10px;
@@ -72,6 +75,7 @@
   font-size: $font-size-2;
   color: $color-lowgray;
 }
+
 .maputnik-public-style-button {
   background-color: $color-gray;
   padding: $margin-3;
@@ -81,10 +85,9 @@
     background-color: $color-midgray;
   }
 }
+
 .maputnik-public-style-header {
-	display: flex;
-  display: -ms-flexbox;
-  @include vendor-prefix(flex-direction, row)
+  @include flex-row;
 }
 
 .maputnik-public-style-thumbnail {
@@ -93,38 +96,39 @@
   max-width: 100%;
 }
 
-.maputnik-add-layer{
+.maputnik-add-layer {
   @extend .clearfix;
 }
+
 //ADD MODAL
 .maputnik-add-layer-button {
+  @extend .maputnik-big-button;
+
   margin-right: $margin-3;
   float: right;
   display: inline-block;
   margin-top: 3;
   margin-bottom: $margin-3;
   text-align: right;
-  @extend .maputnik-big-button;
 }
 
 //SOURCE MODAL
 .maputnik-public-source {
-	vertical-align: top;
-	margin-top: 1.5%;
-	margin-right: 1.5%;
-	background-color: $color-gray;
-	width: 48.5%;
+  vertical-align: top;
+  margin-top: 1.5%;
+  margin-right: 1.5%;
+  background-color: $color-gray;
+  width: 48.5%;
   display: inline-block;
 }
 
 .maputnik-public-source-select {
   padding: $margin-3;
-	font-size: $font-size-5;
-	color: $color-lowgray;
-	display: flex;
-  display: -ms-flexbox;
-  @include vendor-prefix(flex-direction, row)
+  font-size: $font-size-5;
+  color: $color-lowgray;
   background-color: transparent;
+
+  @include flex-row;
 }
 
 .maputnik-public-source-name {
@@ -138,14 +142,15 @@
 .maputnik-active-source-type-editor {
   min-width: 500px;
 }
+
 .maputnik-active-source-type-editor-header {
   background-color: $color-gray;
   color: $color-lowgray;
   padding: $margin-2;
-  display: flex;
-  display: -ms-flexbox;
-  @include vendor-prefix(flex-direction, row)
+
+  @include flex-row;
 }
+
 .maputnik-active-source-type-editor-header-id {
   font-weight: 700;
   line-height: 2;
@@ -153,10 +158,10 @@
 }
 
 .maputnik-active-source-type-editor-content {
-    border-color: $color-gray;
-    border-width: 2px;
-    border-style: solid;
-    padding: $margin-2;
+  border-color: $color-gray;
+  border-width: 2px;
+  border-style: solid;
+  padding: $margin-2;
 }
 
 .maputnik-add-source {
@@ -165,6 +170,7 @@
 
 .maputnik-add-source-button {
   @extend .maputnik-big-button;
+
   display: inline-block;
   margin-top: 0;
   margin-right: $margin-3;
diff --git a/src/styles/_popup.scss b/src/styles/_popup.scss
index 8773830..16fcfb0 100644
--- a/src/styles/_popup.scss
+++ b/src/styles/_popup.scss
@@ -2,8 +2,6 @@
   display: inline-block;
   color: $color-lowgray;
   user-select: none;
-  padding-left: 0;
-  padding-right: $margin-1;
   line-height: 1.2;
   padding-left: $margin-2;
   padding-right: $margin-2;
@@ -16,9 +14,6 @@
   color: $color-white;
 }
 
-.maputnik-property-layer-popup {
-}
-
 .maputnik-feature-property-popup {
   .maputnik-input-block {
     margin: 0;
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index 6e3e66c..397b0a3 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable */
 html {
   background-color: rgb(28, 31, 36);
 }
diff --git a/src/styles/_scrollbar.scss b/src/styles/_scrollbar.scss
index 7f9f9d6..c305879 100644
--- a/src/styles/_scrollbar.scss
+++ b/src/styles/_scrollbar.scss
@@ -1,12 +1,12 @@
 ::-webkit-scrollbar {
-    background-color: #26282e;
-    width: 5px;
+  background-color: #26282e;
+  width: 5px;
 }
 
 ::-webkit-scrollbar-thumb {
-    border-radius: 6px;
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
-    background-color: #666;
-    padding-left: 2px;
-    padding-right: 2px;
+  border-radius: 6px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: #666;
+  padding-left: 2px;
+  padding-right: 2px;
 }
diff --git a/src/styles/_toolbar.scss b/src/styles/_toolbar.scss
index 870699e..9b4c208 100644
--- a/src/styles/_toolbar.scss
+++ b/src/styles/_toolbar.scss
@@ -17,7 +17,7 @@
   height: $toolbar-height;
 
   h1 {
-    display: inline; 
+    display: inline;
   }
 
   img {
@@ -37,6 +37,7 @@
   cursor: pointer;
   color: $color-white;
   text-decoration: none;
+
   &:hover {
     background-color: $color-midgray;
   }
diff --git a/src/styles/_zoomproperty.scss b/src/styles/_zoomproperty.scss
index 5c36a19..2298496 100644
--- a/src/styles/_zoomproperty.scss
+++ b/src/styles/_zoomproperty.scss
@@ -2,9 +2,10 @@
 .maputnik-make-zoom-function {
   background-color: transparent;
   display: inline-block;
-  padding-bottom: 0px;
-  padding-top: 0px;
+  padding-bottom: 0;
+  padding-top: 0;
   vertical-align: middle;
+
   @extend .maputnik-icon-button;
 }
 
@@ -28,6 +29,7 @@
   vertical-align: top;
   width: 16%;
   margin-right: 3%;
+
   > * {
     width: 100%;
   }
@@ -36,6 +38,7 @@
 .maputnik-zoom-spec-property-stop-value {
   display: inline-block;
   width: 81%;
+
   > * {
     width: 100%;
   }
@@ -43,11 +46,13 @@
 
 .maputnik-delete-stop {
   @extend .maputnik-icon-button;
+
   vertical-align: top;
 
   .maputnik-doc-wrapper {
     width: auto;
   }
+
   .maputnik-doc-target {
     cursor: pointer;
   }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 5be0e7a..8b7e47a 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -22,7 +22,6 @@ $toolbar-height: 40px;
 @import 'mixins';
 @import 'reset';
 @import 'base';
-
 @import 'components';
 @import 'scrollbar';
 @import 'picker';