Merge remote-tracking branch 'upstream/master' into maintenance/update-deps-20200217-v2

config/webpack.config.js

@@ -3,6 +3,7 @@ var webpack = require('webpack');
 var path = require('path');
 var rules = require('./webpack.rules');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
+var HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin');
 var CopyWebpackPlugin = require('copy-webpack-plugin');
 
 const HOST = process.env.HOST || "127.0.0.1";
@@ -61,6 +62,9 @@ module.exports = {
       title: 'Maputnik',
       template: './src/template.html'
     }),
+    new HtmlWebpackInlineSVGPlugin({
+      runPreEmit: true,
+    }),
     new CopyWebpackPlugin([
       {
         from: './src/manifest.json',

config/webpack.production.config.js

@@ -2,6 +2,7 @@ var webpack = require('webpack');
 var path = require('path');
 var rules = require('./webpack.rules');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
+var HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin');
 var WebpackCleanupPlugin = require('webpack-cleanup-plugin');
 var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 var CopyWebpackPlugin = require('copy-webpack-plugin');
@@ -44,6 +45,9 @@ module.exports = {
       template: './src/template.html',
       title: 'Maputnik'
     }),
+    new HtmlWebpackInlineSVGPlugin({
+      runPreEmit: true,
+    }),
     new CopyWebpackPlugin([
       {
         from: './src/manifest.json',

package-lock.json

@@ -2532,6 +2532,12 @@
       "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
       "dev": true
     },
+    "@types/q": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz",
+      "integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==",
+      "dev": true
+    },
     "@types/selenium-standalone": {
       "version": "6.15.0",
       "resolved": "https://registry.npmjs.org/@types/selenium-standalone/-/selenium-standalone-6.15.0.tgz",
@@ -4310,6 +4316,47 @@
       "integrity": "sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ==",
       "dev": true
     },
+    "cheerio": {
+      "version": "1.0.0-rc.3",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.3.tgz",
+      "integrity": "sha512-0td5ijfUPuubwLUu0OBoe98gZj8C/AA+RW3v67GPlGOrvxWjZmBXiBCRU+I8VEiNyJzjth40POfHiz2RB3gImA==",
+      "dev": true,
+      "requires": {
+        "css-select": "~1.2.0",
+        "dom-serializer": "~0.1.1",
+        "entities": "~1.1.1",
+        "htmlparser2": "^3.9.1",
+        "lodash": "^4.15.0",
+        "parse5": "^3.0.1"
+      },
+      "dependencies": {
+        "dom-serializer": {
+          "version": "0.1.1",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
+          "integrity": "sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "^1.3.0",
+            "entities": "^1.1.1"
+          }
+        },
+        "entities": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
+          "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==",
+          "dev": true
+        },
+        "parse5": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.3.tgz",
+          "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==",
+          "dev": true,
+          "requires": {
+            "@types/node": "*"
+          }
+        }
+      }
+    },
     "chokidar": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.3.1.tgz",
@@ -4491,6 +4538,17 @@
         "is-regexp": "^2.0.0"
       }
     },
+    "coa": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
+      "integrity": "sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==",
+      "dev": true,
+      "requires": {
+        "@types/q": "^1.5.1",
+        "chalk": "^2.4.1",
+        "q": "^1.1.2"
+      }
+    },
     "code-point-at": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
@@ -4973,34 +5031,6 @@
         }
       }
     },
-    "cross-spawn": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-4.0.2.tgz",
-      "integrity": "sha1-e5JHYhwjrf3ThWAEqCPL45dCTUE=",
-      "dev": true,
-      "requires": {
-        "lru-cache": "^4.0.1",
-        "which": "^1.2.9"
-      },
-      "dependencies": {
-        "lru-cache": {
-          "version": "4.1.5",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
-          "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
-          "dev": true,
-          "requires": {
-            "pseudomap": "^1.0.2",
-            "yallist": "^2.1.2"
-          }
-        },
-        "yallist": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-          "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
-          "dev": true
-        }
-      }
-    },
     "crypto-browserify": {
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
@@ -5090,6 +5120,30 @@
         "nth-check": "~1.0.1"
       }
     },
+    "css-select-base-adapter": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
+      "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==",
+      "dev": true
+    },
+    "css-tree": {
+      "version": "1.0.0-alpha.37",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
+      "integrity": "sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==",
+      "dev": true,
+      "requires": {
+        "mdn-data": "2.0.4",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
     "css-value": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/css-value/-/css-value-0.0.1.tgz",
@@ -5113,6 +5167,15 @@
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
+    "csso": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-4.0.2.tgz",
+      "integrity": "sha512-kS7/oeNVXkHWxby5tHVxlhjizRCSv8QdU7hB2FpdAibDU8FjTAolhNjKNTiLzXtUrKT6HwClE81yXwEk1309wg==",
+      "dev": true,
+      "requires": {
+        "css-tree": "1.0.0-alpha.37"
+      }
+    },
     "currently-unhandled": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
@@ -5628,29 +5691,6 @@
         "once": "^1.4.0"
       }
     },
-    "enhanced-resolve": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.1.1.tgz",
-      "integrity": "sha512-98p2zE+rL7/g/DzMHMTF4zZlCgeVdJ7yr6xzEpJRYwFYrGi9ANdn5DnJURg6RpBkyk60XYDnWIv51VfIhfNGuA==",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.1.2",
-        "memory-fs": "^0.5.0",
-        "tapable": "^1.0.0"
-      },
-      "dependencies": {
-        "memory-fs": {
-          "version": "0.5.0",
-          "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
-          "integrity": "sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==",
-          "dev": true,
-          "requires": {
-            "errno": "^0.1.3",
-            "readable-stream": "^2.0.1"
-          }
-        }
-      }
-    },
     "entities": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.0.tgz",
@@ -7405,6 +7445,19 @@
       "integrity": "sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==",
       "dev": true
     },
+    "html-webpack-inline-svg-plugin": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/html-webpack-inline-svg-plugin/-/html-webpack-inline-svg-plugin-1.3.0.tgz",
+      "integrity": "sha512-ChC1UkLH5xrolADRJK83nBAq/5PnpyNo1zpC8wWoGoFIoaWLQBF3VIjSWtVpCWlNFlUnt4fB7n63Iqb8Ltdmng==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.3.2",
+        "cheerio": "^1.0.0-rc.2",
+        "lodash": "^4.17.4",
+        "parse5": "^4.0.0",
+        "svgo": "^1.0.3"
+      }
+    },
     "html-webpack-plugin": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz",
@@ -9057,7 +9110,7 @@
     },
     "maputnik-design": {
       "version": "github:maputnik/design#f7a2b4d63918adadc242ec05c563d3ba4eb4df68",
-      "from": "github:maputnik/design"
+      "from": "github:maputnik/design#f7a2b4d"
     },
     "markdown-escapes": {
       "version": "1.0.4",
@@ -9102,6 +9155,12 @@
         "unist-util-visit": "^1.1.0"
       }
     },
+    "mdn-data": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
+      "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==",
+      "dev": true
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -10668,6 +10727,12 @@
       "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=",
       "dev": true
     },
+    "parse5": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-4.0.0.tgz",
+      "integrity": "sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==",
+      "dev": true
+    },
     "parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -11256,6 +11321,12 @@
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
       "dev": true
     },
+    "q": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
+      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
+      "dev": true
+    },
     "qs": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
@@ -12348,6 +12419,12 @@
         }
       }
     },
+    "sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
+      "dev": true
+    },
     "scheduler": {
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.18.0.tgz",
@@ -13249,6 +13326,12 @@
         "figgy-pudding": "^3.5.1"
       }
     },
+    "stable": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
+      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
+      "dev": true
+    },
     "state-toggle": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz",
@@ -14066,6 +14149,19 @@
         "postcss-resolve-nested-selector": "^0.1.1",
         "postcss-selector-parser": "^6.0.2",
         "postcss-value-parser": "^4.0.2"
+      },
+      "dependencies": {
+        "postcss-selector-parser": {
+          "version": "6.0.2",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
+          "integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==",
+          "dev": true,
+          "requires": {
+            "cssesc": "^3.0.0",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        }
       }
     },
     "suffix": {
@@ -14106,6 +14202,72 @@
       "integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=",
       "dev": true
     },
+    "svgo": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
+      "integrity": "sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.4.1",
+        "coa": "^2.0.2",
+        "css-select": "^2.0.0",
+        "css-select-base-adapter": "^0.1.1",
+        "css-tree": "1.0.0-alpha.37",
+        "csso": "^4.0.2",
+        "js-yaml": "^3.13.1",
+        "mkdirp": "~0.5.1",
+        "object.values": "^1.1.0",
+        "sax": "~1.2.4",
+        "stable": "^0.1.8",
+        "unquote": "~1.1.1",
+        "util.promisify": "~1.0.0"
+      },
+      "dependencies": {
+        "css-select": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
+          "integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==",
+          "dev": true,
+          "requires": {
+            "boolbase": "^1.0.0",
+            "css-what": "^3.2.1",
+            "domutils": "^1.7.0",
+            "nth-check": "^1.0.2"
+          }
+        },
+        "css-what": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz",
+          "integrity": "sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==",
+          "dev": true
+        },
+        "domutils": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
+          "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
+          "dev": true,
+          "requires": {
+            "dom-serializer": "0",
+            "domelementtype": "1"
+          }
+        },
+        "minimist": {
+          "version": "0.0.8",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
+          "dev": true
+        },
+        "mkdirp": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+          "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+          "dev": true,
+          "requires": {
+            "minimist": "0.0.8"
+          }
+        }
+      }
+    },
     "tabbable": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-3.1.2.tgz",
@@ -14232,6 +14394,45 @@
         "worker-farm": "^1.7.0"
       },
       "dependencies": {
+        "cacache": {
+          "version": "12.0.3",
+          "resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.3.tgz",
+          "integrity": "sha512-kqdmfXEGFepesTuROHMs3MpFLWrPkSSpRqOw80RCflZXy/khxaArvFrQ7uJxSUduzAufc6G0g1VUCOZXxWavPw==",
+          "dev": true,
+          "requires": {
+            "bluebird": "^3.5.5",
+            "chownr": "^1.1.1",
+            "figgy-pudding": "^3.5.1",
+            "glob": "^7.1.4",
+            "graceful-fs": "^4.1.15",
+            "infer-owner": "^1.0.3",
+            "lru-cache": "^5.1.1",
+            "mississippi": "^3.0.0",
+            "mkdirp": "^0.5.1",
+            "move-concurrently": "^1.0.1",
+            "promise-inflight": "^1.0.1",
+            "rimraf": "^2.6.3",
+            "ssri": "^6.0.1",
+            "unique-filename": "^1.1.1",
+            "y18n": "^4.0.0"
+          }
+        },
+        "make-dir": {},
+        "minimist": {
+          "version": "0.0.8",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
+          "dev": true
+        },
+        "mkdirp": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+          "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+          "dev": true,
+          "requires": {
+            "minimist": "0.0.8"
+          }
+        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -14683,6 +14884,12 @@
       "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
       "dev": true
     },
+    "unquote": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz",
+      "integrity": "sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=",
+      "dev": true
+    },
     "unset-value": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
@@ -15813,6 +16020,29 @@
             }
           }
         },
+        "enhanced-resolve": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.1.1.tgz",
+          "integrity": "sha512-98p2zE+rL7/g/DzMHMTF4zZlCgeVdJ7yr6xzEpJRYwFYrGi9ANdn5DnJURg6RpBkyk60XYDnWIv51VfIhfNGuA==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "memory-fs": "^0.5.0",
+            "tapable": "^1.0.0"
+          },
+          "dependencies": {
+            "memory-fs": {
+              "version": "0.5.0",
+              "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
+              "integrity": "sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==",
+              "dev": true,
+              "requires": {
+                "errno": "^0.1.3",
+                "readable-stream": "^2.0.1"
+              }
+            }
+          }
+        },
         "eslint-scope": {
           "version": "4.0.3",
           "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
@@ -17614,6 +17844,26 @@
             "supports-color": "^2.0.0"
           }
         },
+        "cross-spawn": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-4.0.2.tgz",
+          "integrity": "sha1-e5JHYhwjrf3ThWAEqCPL45dCTUE=",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^4.0.1",
+            "which": "^1.2.9"
+          }
+        },
+        "lru-cache": {
+          "version": "4.1.5",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+          "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+          "dev": true,
+          "requires": {
+            "pseudomap": "^1.0.2",
+            "yallist": "^2.1.2"
+          }
+        },
         "strip-ansi": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
@@ -17628,6 +17878,12 @@
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
           "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
           "dev": true
+        },
+        "yallist": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+          "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
+          "dev": true
         }
       }
     },

package.json

@@ -39,7 +39,7 @@
     "lodash.throttle": "^4.1.1",
     "mapbox-gl": "^1.7.0",
     "mapbox-gl-inspect": "^1.3.1",
-    "maputnik-design": "github:maputnik/design",
+    "maputnik-design": "github:maputnik/design#f7a2b4d",
     "ol": "^6.2.1",
     "ol-mapbox-style": "^6.0.1",
     "prop-types": "^15.7.2",
@@ -125,6 +125,7 @@
     "eslint-plugin-react": "^7.18.3",
     "express": "^4.17.1",
     "file-loader": "^5.0.2",
+    "html-webpack-inline-svg-plugin": "^1.3.0",
     "html-webpack-plugin": "^3.2.0",
     "is-docker": "^2.0.0",
     "istanbul": "^0.4.5",

src/index.jsx

@@ -12,3 +12,6 @@ ReactDOM.render(
   </IconContext.Provider>,
   document.querySelector("#app")
 );
+
+// Hide the loader.
+document.querySelector(".loading").style.display = "none";

src/template.html

@@ -9,63 +9,32 @@
     html {
       background-color: rgb(28, 31, 36);
     }
-    #loader,
+
-    #loader:before,
+    .loading {
-    #loader:after {
+      text-align: center;
-      border-radius: 50%;
-      width: 2.5em;
-      height: 2.5em;
-      -webkit-animation-fill-mode: both;
-      animation-fill-mode: both;
-      -webkit-animation: pulseload 1.8s infinite ease-in-out;
-      animation: pulseload 1.8s infinite ease-in-out;
-    }
-    #loader {
-      color: #ffffff;
-      font-size: 10px;
-      margin: 80px auto;
-      position: relative;
-      text-indent: -9999em;
-      -webkit-transform: translateZ(0);
-      -ms-transform: translateZ(0);
-      transform: translateZ(0);
-      -webkit-animation-delay: -0.16s;
-      animation-delay: -0.16s;
-    }
-    #loader:before,
-    #loader:after {
-      content: '';
       position: absolute;
+      width: 100vw;
+      height: 100vh;
       top: 0;
+      left: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
     }
-    #loader:before {
+
-      left: -3.5em;
+    .loading__logo svg {
-      -webkit-animation-delay: -0.32s;
+      width: 200px;
-      animation-delay: -0.32s;
+      height: 200px;
     }
-    #loader:after {
+
-      left: 3.5em;
+    .loading__text {
-    }
+      font-family: sans-serif;
-    @-webkit-keyframes pulseload {
+      color: white;
-      0%,
+      font-size: 1.2em;
-      80%,
+      padding-bottom: 2em;
-      100% {
-        box-shadow: 0 2.5em 0 -1.3em;
-      }
-      40% {
-        box-shadow: 0 2.5em 0 0;
-      }
-    }
-    @keyframes pulseload {
-      0%,
-      80%,
-      100% {
-        box-shadow: 0 2.5em 0 -1.3em;
-      }
-      40% {
-        box-shadow: 0 2.5em 0 0;
-      }
     }
+
   </style>
 </head>
 <body>
@@ -150,8 +119,13 @@
     </defs>
   </svg>
 
-  <div id="app">
+  <div id="app"></div>
-    <div id="loader">Loading...</div>
+  <div class="loading">
+    <div class="loading__logo">
+      <!-- replaced by 'html-webpack-inline-svg-plugin' -->
+      <img inline src="node_modules/maputnik-design/logos/logo-loading.svg" />
+    </div>
+    <div class="loading__text">Loading&hellip;</div>
   </div>
 </body>
 </html>