Use inline SVGs and refresh CSS

build/loader.js

@@ -0,0 +1,17 @@
+// @flow
+/* eslint-disable import/no-commonjs */
+
+require('@mapbox/flow-remove-types/register');
+
+const fs = require('fs');
+
+function loadFile(module, filename) {
+    const content = fs.readFileSync(filename, 'utf8');
+    module._compile(`module.exports = ${JSON.stringify(content)};`, filename);
+}
+
+// $FlowFixMe: Flow doesn't know about require.extensions
+require.extensions['.svg'] = loadFile;
+
+// $FlowFixMe: Flow doesn't know about require.extensions
+require.extensions['.glsl'] = loadFile;

build/rollup_plugins.js

@@ -1,13 +1,15 @@
 
+/* eslint-disable flowtype/require-valid-file-annotation */
 import flowRemoveTypes from '@mapbox/flow-remove-types';
 import buble from 'rollup-plugin-buble';
 import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
 import unassert from 'rollup-plugin-unassert';
 import json from 'rollup-plugin-json';
-import { terser } from 'rollup-plugin-terser';
+import svgo from 'rollup-plugin-svgo';
+import {terser} from 'rollup-plugin-terser';
 import minifyStyleSpec from './rollup_plugin_minify_style_spec';
-import { createFilter } from 'rollup-pluginutils';
+import {createFilter} from 'rollup-pluginutils';
 
 // Common set of plugins/transformations shared across different rollup
 // builds (main mapboxgl bundle, style-spec package, benchmarks bundle)
@@ -17,6 +19,15 @@ export const plugins = (minified, production) => [
     minifyStyleSpec(),
     json(),
     glsl('./src/shaders/*.glsl', production),
+    svgo({
+        plugins: [{
+            removeViewBox: false
+        }, {
+            removeDimensions: false
+        }, {
+            cleanupIDs: false
+        }]
+    }),
     buble({transforms: {dangerousForOf: true}, objectAssign: "Object.assign"}),
     minified ? terser() : false,
     production ? unassert() : false,

build/run-node

@@ -1,3 +1,3 @@
 #!/usr/bin/env bash
 
-node -r @mapbox/flow-remove-types/register -r esm ${@}
+node -r ./build/loader -r esm ${@}

build/run-tap

@@ -5,4 +5,4 @@ else
   arg="${@}"
 fi
 
-node_modules/.bin/tap --node-arg -r --node-arg @mapbox/flow-remove-types/register --node-arg -r --node-arg esm $arg --node-arg
+node_modules/.bin/tap --node-arg -r --node-arg ./build/loader --node-arg -r --node-arg esm $arg --node-arg

debug/debug.html

@@ -52,6 +52,7 @@
     }
 }));
 map.addControl(new mapboxgl.ScaleControl());
+map.addControl(new mapboxgl.FullscreenControl());
 
 map.on('load', function() {
     map.addSource('geojson', {

package.json

@@ -44,6 +44,7 @@
     "@mapbox/mapbox-gl-test-suite": "file:test/integration",
     "@octokit/rest": "^16.30.1",
     "address": "^1.1.2",
+    "autoprefixer": "^9.6.5",
     "babel-eslint": "^10.0.1",
     "benchmark": "^2.1.4",
     "browserify": "^16.2.3",
@@ -73,7 +74,7 @@
     "pirates": "^4.0.1",
     "pngjs": "^3.4.0",
     "postcss-cli": "^6.1.2",
-    "postcss-inline-svg": "^3.1.1",
+    "postcss-nested": "^4.1.2",
     "pretty-bytes": "^5.1.0",
     "puppeteer": "^1.18.0",
     "qrcode-terminal": "^0.12.0",
@@ -87,6 +88,7 @@
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-sourcemaps": "^0.4.2",
+    "rollup-plugin-svgo": "^1.1.0",
     "rollup-plugin-terser": "^5.1.2",
     "rollup-plugin-unassert": "^0.3.0",
     "sinon": "^7.3.2",
@@ -100,7 +102,6 @@
     "testem": "^2.17.0"
   },
   "browser": {
-    "./src/shaders/index.js": "./src/shaders/shaders.js",
     "./src/util/window.js": "./src/util/browser/window.js",
     "./src/util/web_worker.js": "./src/util/browser/web_worker.js"
   },
@@ -132,8 +133,8 @@
     "test-suite-clean": "find test/integration/{render,query, expressions}-tests -mindepth 2 -type d -exec test -e \"{}/actual.png\" \\; -not \\( -exec test -e \"{}/style.json\" \\; \\) -print | xargs -t rm -r",
     "test-unit": "build/run-tap --reporter classic --no-coverage test/unit",
     "test-build": "build/run-tap --no-coverage test/build/**/*.test.js",
-    "test-render": "node --max-old-space-size=2048 test/render.test.js",
-    "test-query-node": "node test/query.test.js",
+    "test-render": "build/run-node --max-old-space-size=2048 test/render.test.js",
+    "test-query-node": "build/run-node test/query.test.js",
     "watch-query": "testem -f test/integration/testem.js",
     "test-query": "testem ci -f test/integration/testem.js -R xunit > test/integration/query-tests/test-results.xml",
     "test-expressions": "build/run-node test/expression.test.js",

postcss.config.js

@@ -1,6 +1,11 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
+/* eslint-disable import/no-commonjs */
 module.exports = {
     plugins: [
-        require('postcss-inline-svg'),
+        require('postcss-nested'),
+        require('autoprefixer')({
+            overrideBrowserslist: [ 'defaults', 'IE 11' ]
+        }),
         require('cssnano')
     ]
-}
+};

rollup.config.js

@@ -1,3 +1,4 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
 import fs from 'fs';
 import sourcemaps from 'rollup-plugin-sourcemaps';
 import {plugins} from './build/rollup_plugins';