From 93c7f323fca54a91de70aff57e9bd1ea3be1d1df Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Thu, 12 Jan 2017 10:44:44 +0100
Subject: [PATCH 01/11] Upgrade Mapbox GL inspect and remove unused lodash

---
 package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 98b776e..110a957 100644
--- a/package.json
+++ b/package.json
@@ -27,9 +27,8 @@
     "lodash.clonedeep": "^4.5.0",
     "lodash.isequal": "^4.4.0",
     "lodash.throttle": "^4.1.1",
-    "lodash.topairs": "^4.3.0",
     "mapbox-gl": "^0.29.0",
-    "mapbox-gl-inspect": "^1.0.9",
+    "mapbox-gl-inspect": "^1.1.0",
     "mapbox-gl-style-spec": "^8.11.0",
     "mousetrap": "^1.6.0",
     "ol-mapbox-style": "0.0.14",

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 02/11] 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';

From a30e57c4d8249e0ad8918533bdc8b8fe7c27b5d5 Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Thu, 12 Jan 2017 11:31:16 +0100
Subject: [PATCH 03/11] Add empty style option

---
 empty-style.json       | 15 +++++++++++++++
 src/config/styles.json |  8 ++++----
 src/styles/_modal.scss |  2 +-
 3 files changed, 20 insertions(+), 5 deletions(-)
 create mode 100644 empty-style.json

diff --git a/empty-style.json b/empty-style.json
new file mode 100644
index 0000000..5179ccd
--- /dev/null
+++ b/empty-style.json
@@ -0,0 +1,15 @@
+{
+  "version": 8,
+  "name": "Empty Style",
+  "metadata": {
+    "mapbox:autocomposite": false,
+    "mapbox:type": "template",
+    "maputnik:renderer": "mbgljs",
+    "openmaptiles:version": "3.x"
+  },
+  "sources": { },
+  "glyphs": "https://demo.tileserver.org/fonts/{fontstack}/{range}.pbf",
+  "sprites": "https://demo.tileserver.org/fonts/{fontstack}/{range}.pbf",
+  "layers": [],
+  "id": "empty-style"
+}
diff --git a/src/config/styles.json b/src/config/styles.json
index 6078b54..f3736ff 100644
--- a/src/config/styles.json
+++ b/src/config/styles.json
@@ -30,9 +30,9 @@
     "thumbnail": "https://cdn.rawgit.com/lukasmartinelli/osm-liberty/gh-pages/thumbnail.png"
   },
   {
-    "id": "fiord-color",
-    "title": "Fiord Color",
-    "url": "https://rawgit.com/openmaptiles/fiord-color-gl-style/gh-pages/style-cdn.json",
-    "thumbnail": "https://camo.githubusercontent.com/d884dbd7b8c531c58788eac3857dc4ebf79b7729/68747470733a2f2f6170692e6d6170626f782e636f6d2f7374796c65732f76312f6f70656e6d617074696c65732f6369776775693378353030317732706e7668633063327767302f7374617469632f382e3534303538372c34372e3337303535352c31342e30382c302e30302c302e30302f363030783430303f6163636573735f746f6b656e3d706b2e65794a31496a6f696233426c626d3168634852706247567a4969776959534936496d4e70646e593365544a785a7a41774d474d796233427064574a6d616a63784e7a636966512e685031427863786c644968616b4d6350534a4c513151"
+    "id": "empty-style",
+    "title": "Empty Style",
+    "url": "https://rawgit.com/maputnik/editor/master/src/config/styles.json",
+    "thumbnail": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAQAAAAHDYbIAAAAEUlEQVR42mP8/58BDhiJ4wAA974H/U5Xe1oAAAAASUVORK5CYII="
   }
 ]
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index c2a5aed..1cd8414 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -93,7 +93,7 @@
 .maputnik-public-style-thumbnail {
   display: block;
   margin-top: $margin-2;
-  max-width: 100%;
+  width: 100%;
 }
 
 .maputnik-add-layer {

From 5901427534dcbaba7539f15c1c32799e697c3cc1 Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Thu, 12 Jan 2017 11:32:20 +0100
Subject: [PATCH 04/11] Move empty style to config dir

---
 empty-style.json => src/config/empty-style.json | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename empty-style.json => src/config/empty-style.json (100%)

diff --git a/empty-style.json b/src/config/empty-style.json
similarity index 100%
rename from empty-style.json
rename to src/config/empty-style.json

From 7627b8fb458b3a050b4e1cfb5c0adf179741d9da Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Thu, 12 Jan 2017 11:33:46 +0100
Subject: [PATCH 05/11] Fix empty style url in config

---
 src/config/styles.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/config/styles.json b/src/config/styles.json
index f3736ff..736c7cc 100644
--- a/src/config/styles.json
+++ b/src/config/styles.json
@@ -32,7 +32,7 @@
   {
     "id": "empty-style",
     "title": "Empty Style",
-    "url": "https://rawgit.com/maputnik/editor/master/src/config/styles.json",
+    "url": "https://rawgit.com/maputnik/editor/master/src/config/empty-style.json",
     "thumbnail": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAQAAAAHDYbIAAAAEUlEQVR42mP8/58BDhiJ4wAA974H/U5Xe1oAAAAASUVORK5CYII="
   }
 ]

From 6fa2542b563d02ebfbd1e5ac1df90a3eaf67fa23 Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Thu, 12 Jan 2017 11:35:11 +0100
Subject: [PATCH 06/11] Fix color of compound filter

---
 src/styles/_filtereditor.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/styles/_filtereditor.scss b/src/styles/_filtereditor.scss
index 567ea01..411ff68 100644
--- a/src/styles/_filtereditor.scss
+++ b/src/styles/_filtereditor.scss
@@ -2,6 +2,10 @@
   padding: $margin-3;
 }
 
+.maputnik-filter-editor {
+  color: $color-lowgray;
+}
+
 .maputnik-filter-editor-property {
   display: inline-block;
   width: '22%';

From 7d905c5e0669ed23a46b1cb55039f6b622a17b24 Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Thu, 12 Jan 2017 11:50:08 +0100
Subject: [PATCH 07/11] Update dependencies

---
 package.json                 | 30 +++++++++++++++---------------
 webpack.production.config.js |  1 -
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index 93edec5..974e385 100644
--- a/package.json
+++ b/package.json
@@ -28,11 +28,11 @@
     "lodash.clonedeep": "^4.5.0",
     "lodash.isequal": "^4.4.0",
     "lodash.throttle": "^4.1.1",
-    "mapbox-gl": "^0.29.0",
-    "mapbox-gl-inspect": "^1.1.0",
+    "mapbox-gl": "^0.31.0",
+    "mapbox-gl-inspect": "^1.1.1",
     "mapbox-gl-style-spec": "^8.11.0",
     "mousetrap": "^1.6.0",
-    "ol-mapbox-style": "0.0.14",
+    "ol-mapbox-style": "1.0.1",
     "openlayers": "^3.19.1",
     "randomcolor": "^0.4.4",
     "react": "^15.4.0",
@@ -91,18 +91,18 @@
     }
   },
   "devDependencies": {
-    "babel-core": "6.14.0",
-    "babel-eslint": "^6.1.2",
-    "babel-loader": "6.2.4",
+    "babel-core": "6.21.0",
+    "babel-eslint": "^7.1.1",
+    "babel-loader": "6.2.10",
     "babel-plugin-transform-class-properties": "^6.11.5",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-flow-strip-types": "^6.21.0",
     "babel-plugin-transform-object-rest-spread": "^6.8.0",
     "babel-plugin-transform-runtime": "^6.15.0",
-    "babel-preset-es2015": "6.14.0",
-    "babel-preset-react": "6.11.1",
+    "babel-preset-es2015": "6.18.0",
+    "babel-preset-react": "6.16.0",
     "babel-runtime": "^6.11.6",
-    "css-loader": "0.25.0",
+    "css-loader": "0.26.1",
     "eslint": "^3.5.0",
     "eslint-plugin-react": "^6.2.0",
     "extract-text-webpack-plugin": "^1.0.1",
@@ -113,19 +113,19 @@
     "karma-chrome-launcher": "^2.0.0",
     "karma-firefox-launcher": "^1.0.0",
     "karma-mocha": "^1.3.0",
-    "karma-webpack": "^1.8.0",
+    "karma-webpack": "^2.0.1",
     "mocha": "^3.1.2",
     "mocha-loader": "^1.0.0",
-    "node-sass": "^3.9.2",
+    "node-sass": "^4.2.0",
     "react-hot-loader": "^3.0.0-beta.6",
     "sass-loader": "^4.0.1",
     "style-loader": "0.13.1",
+    "stylelint": "^7.7.1",
     "stylelint-config-standard": "^15.0.1",
     "transform-loader": "^0.2.3",
     "url-loader": "0.5.7",
-    "webpack": "1.13.2",
-    "webpack-cleanup-plugin": "^0.3.0",
-    "webpack-dev-server": "1.15.1",
-    "webworkify-webpack": "^1.1.3"
+    "webpack": "1.14.0",
+    "webpack-cleanup-plugin": "^0.4.1",
+    "webpack-dev-server": "1.16.2"
   }
 }
diff --git a/webpack.production.config.js b/webpack.production.config.js
index acedbdc..218b109 100644
--- a/webpack.production.config.js
+++ b/webpack.production.config.js
@@ -17,7 +17,6 @@ module.exports = {
         "randomcolor",
         "lodash.clonedeep",
         "lodash.throttle",
-        "lodash.topairs",
         'color',
         'react',
         "react-dom",

From 6be6db8f5e1e788be5a9efd3bf52a00f7f356c17 Mon Sep 17 00:00:00 2001
From: jirik <jiri.kozel.cz@gmail.com>
Date: Thu, 12 Jan 2017 15:34:38 +0100
Subject: [PATCH 08/11] Fix hidden map attributions (CSS issue)

---
 src/styles/_components.scss | 3 +--
 src/styles/_layout.scss     | 4 ++--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/styles/_components.scss b/src/styles/_components.scss
index 6813c6d..67447e4 100644
--- a/src/styles/_components.scss
+++ b/src/styles/_components.scss
@@ -4,7 +4,7 @@
   top: 40px;
   right: 0;
   bottom: 0;
-  height: 100%;
+  height: calc(100% - $toolbar-height);
   width: 75%;
 }
 
@@ -127,4 +127,3 @@
     color: $color-red;
   }
 }
-
diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss
index 1a900bc..2a88609 100644
--- a/src/styles/_layout.scss
+++ b/src/styles/_layout.scss
@@ -17,7 +17,7 @@
   &-list {
     position: fixed;
     bottom: 0;
-    height: 100%;
+    height: calc(100% - $toolbar-height);
     top: 40px;
     left: 0;
     z-index: 3;
@@ -29,7 +29,7 @@
   &-drawer {
     position: fixed;
     bottom: 0;
-    height: 100%;
+    height: calc(100% - $toolbar-height);
     top: 40px;
     left: 200px;
     z-index: 1;

From 68685dcf42aecf50a5ebe6e4f524e5398455969d Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Thu, 12 Jan 2017 13:15:04 +0100
Subject: [PATCH 09/11] Only set source layer if not undefined

---
 src/components/modals/AddModal.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/modals/AddModal.jsx b/src/components/modals/AddModal.jsx
index eb2dd7b..d08a539 100644
--- a/src/components/modals/AddModal.jsx
+++ b/src/components/modals/AddModal.jsx
@@ -31,7 +31,7 @@ class AddModal extends React.Component {
 
     if(this.state.type !== 'background') {
       layer.source = this.state.source
-      if(this.state.type !== 'raster') {
+      if(this.state.type !== 'raster' && this.state['source-layer']) {
         layer['source-layer'] = this.state['source-layer']
       }
     }

From 7bd9d3f5daccdef54554545f9f066622d3796c28 Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Thu, 12 Jan 2017 14:20:23 +0100
Subject: [PATCH 10/11] Remove GeoJSON example from tilesets

---
 src/config/tilesets.json | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/config/tilesets.json b/src/config/tilesets.json
index 1096f75..e4cd4b9 100644
--- a/src/config/tilesets.json
+++ b/src/config/tilesets.json
@@ -4,6 +4,11 @@
     "url": "mapbox://mapbox.mapbox-streets-v7",
     "title": "Mapbox Streets"
   },
+  "openmaptiles": {
+    "type": "vector",
+    "url": "https://free.tilehosting.com/data/v3.json?key=25ItXg7aI5wurYDtttD",
+    "title": "OpenMapTiles"
+  },
   "tilezen": {
     "type": "vector",
     "tiles": [
@@ -12,15 +17,5 @@
     "minZoom": 0,
     "maxZoom": 15,
     "title": "Mapzen Vector Tile Service"
-  },
-  "openmaptiles": {
-    "type": "vector",
-    "url": "https://free.tilehosting.com/data/v3.json?key=25ItXg7aI5wurYDtttD",
-    "title": "OpenMapTiles CDN"
-  },
-  "naturalearth-airports": {
-    "type": "geojson",
-    "data": "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson",
-    "title": "NaturalEarth Airports GeoJSON"
   }
 }

From ac40d7727e5aa0305b462afcea5a4c30d44d6d8d Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Thu, 12 Jan 2017 15:23:19 +0100
Subject: [PATCH 11/11] Fix popup layer issue

---
 src/styles/_popup.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/styles/_popup.scss b/src/styles/_popup.scss
index 16fcfb0..75a4dcd 100644
--- a/src/styles/_popup.scss
+++ b/src/styles/_popup.scss
@@ -1,10 +1,11 @@
 .maputnik-popup-layer {
-  display: inline-block;
+  display: block;
   color: $color-lowgray;
   user-select: none;
   line-height: 1.2;
-  padding-left: $margin-2;
-  padding-right: $margin-2;
+  padding: $margin-2;
+  padding-top: $margin-1;
+  padding-bottom: $margin-1;
 }
 
 .maputnik-popup-layer-id {