use postcss to inline svg files into css

.gitignore

@@ -1,7 +1,6 @@
 /rollup/build/
 /docs/components/api.json
-/dist/mapbox-gl-dev.js
-/dist/mapbox-gl.js
+/dist/
 /docs/pages/dist/mapbox-gl-dev.js
 /docs/pages/dist/mapbox-gl.js
 *.js.map

package.json

@@ -77,6 +77,8 @@
     "object.entries": "^1.0.4",
     "pirates": "^3.0.2",
     "pngjs": "^3.0.0",
+    "postcss-cli": "^5.0.0",
+    "postcss-inline-svg": "^3.1.1",
     "prismjs": "^1.8.1",
     "prop-types": "^15.6.0",
     "raw-loader": "^0.5.1",
@@ -117,18 +119,19 @@
     "build-dev": "rollup -c --environment BUILD:dev && build/run-tap --no-coverage test/build/dev.test.js",
     "watch-dev": "rollup -c --environment BUILD:dev --watch",
     "build-min": "rollup -c --environment BUILD:production && build/run-tap --no-coverage test/build/min.test.js",
+    "build-css": "postcss -o dist/mapbox-gl.css src/css/mapbox-gl.css",
     "build-token": "node build/generate-access-token-script.js",
     "build-benchmarks": "BENCHMARK_VERSION=${BENCHMARK_VERSION:-\"$(git rev-parse --abbrev-ref HEAD) $(git rev-parse --short=7 HEAD)\"} rollup -c bench/rollup_config_benchmarks.js",
     "build-benchmarks-view": "BENCHMARK_VERSION=${BENCHMARK_VERSION:-\"$(git rev-parse --abbrev-ref HEAD) $(git rev-parse --short=7 HEAD)\"} rollup -c bench/rollup_config_benchmarks_view.js",
     "watch-benchmarks": "BENCHMARK_VERSION=${BENCHMARK_VERSION:-\"$(git rev-parse --abbrev-ref HEAD) $(git rev-parse --short=7 HEAD)\"} rollup -c bench/rollup_config_benchmarks.js --watch",
     "watch-benchmarks-view": "BENCHMARK_VERSION=${BENCHMARK_VERSION:-\"$(git rev-parse --abbrev-ref HEAD) $(git rev-parse --short=7 HEAD)\"} rollup -c bench/rollup_config_benchmarks_view.js --watch",
     "start-server": "st --no-cache -H 0.0.0.0 --port 9966 --index index.html .",
-    "start": "run-p build-token watch-dev watch-benchmarks watch-benchmarks-view start-server",
-    "start-debug": "run-p build-token watch-dev start-server",
+    "start": "run-p build-token watch-dev watch-benchmarks watch-benchmarks-view build-css start-server",
+    "start-debug": "run-p build-token watch-dev build-css start-server",
     "start-bench": "run-p build-token watch-benchmarks watch-benchmarks-view start-server",
     "build-docs": "documentation build --github --format json --config ./docs/documentation.yml --output docs/components/api.json src/index.js",
     "build": "run-s build-docs && DEPLOY_ENV=production batfish build # invoked by publisher when publishing docs on the mb-pages branch",
-    "start-docs": "run-s build-min build-docs && DEPLOY_ENV=local batfish start",
+    "start-docs": "run-s build-min build-css build-docs && DEPLOY_ENV=local batfish start",
     "lint": "eslint --cache --ignore-path .gitignore src test bench docs docs/pages/example/*.html debug/*.html",
     "lint-docs": "documentation lint src/index.js",
     "lint-css": "stylelint 'dist/mapbox-gl.css'",
@@ -143,7 +146,7 @@
     "test-flow": "node build/generate-flow-typed-style-spec && flow .",
     "test-flow-cov": "flow-coverage-report -i 'src/**/*.js' -t html",
     "test-cov": "nyc --require=@mapbox/flow-remove-types/register --reporter=text-summary --reporter=lcov --cache run-s test-unit test-expressions test-query test-render",
-    "prepublish": "in-publish && run-s build-dev build-min || not-in-publish",
+    "prepublish": "in-publish && run-s build-dev build-min build-css || not-in-publish",
     "codegen": "build/run-node build/generate-style-code.js && build/run-node build/generate-struct-arrays.js"
   },
   "files": [

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    plugins: [
+        require('postcss-inline-svg')
+    ]
+}