Use postcss to inline svg files into css (#6513)

* use postcss to inline svg files into css

* ensure dist css is built in circle ci

* svg-load fullscreen icon

* lint src css rather than generated css

* watch-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

CONTRIBUTING.md

@@ -86,9 +86,10 @@ A standalone build allows you to turn the contents of this repository into `mapb
 To create a standalone build, run
 ```bash
 yarn run build-min
+yarn run build-css
 ```
 
-Once that command finishes, you will have a standalone build at `dist/mapbox-gl.js` and `dist/mapbox-gl.css`
+Once those commands finish, you will have a standalone build at `dist/mapbox-gl.js` and `dist/mapbox-gl.css`
 
 ## Writing & Running Tests
 

circle.yml

@@ -130,6 +130,7 @@ jobs:
           at: .
       - run: yarn run build-min
       - run: yarn run build-dev
+      - run: yarn run build-css
       - persist_to_workspace:
           root: .
           paths:

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,21 +119,23 @@
     "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",
+    "watch-css": "postcss --watch -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-css watch-dev watch-benchmarks watch-benchmarks-view start-server",
+    "start-debug": "run-p build-token watch-css watch-dev 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'",
+    "lint-css": "stylelint 'src/css/mapbox-gl.css'",
     "open-changed-examples": "git diff --name-only mb-pages HEAD -- docs/pages/example/*.html | awk '{print \"http://127.0.0.1:4000/mapbox-gl-js/example/\" substr($0,33,length($0)-37)}' | xargs open",
     "test": "run-s lint lint-css test-flow test-unit",
     "test-suite": "run-s test-render test-query",
@@ -143,7 +147,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')
+    ]
+}