Minify SVG images and add rules for High Contrast mode on Windows

mapbox · Oct 23, 2019 · 81ab1b3 · 81ab1b3
1 parent 5f03976
commit 81ab1b3
Show file tree

Hide file tree

Showing 19 changed files with 387 additions and 127 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -5,6 +5,9 @@
     "declaration-block-semicolon-newline-after": "always-multi-line",
     "block-opening-brace-space-before": "always-multi-line",
     "declaration-block-single-line-max-declarations": 3,
-    "selector-class-pattern": "mapboxgl-[a-z-]+"
+    "selector-class-pattern": "mapboxgl-[a-z-]+",
+    "at-rule-no-unknown": [true, {
+      "ignoreAtRules": ["svg-load"]
+    }]
   }
 }
diff --git a/debug/controls.html b/debug/controls.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Mapbox GL JS debug page</title>
+    <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <link rel='stylesheet' href='../dist/mapbox-gl.css' />
+    <style>
+        body { margin: 0; padding: 0; }
+        html, body, #map { height: 100%; }
+
+        #checkboxes {
+            position: absolute;
+            background: #fff;
+            top:0;
+            left:0;
+            padding:10px;
+        }
+    </style>
+</head>
+
+<body>
+<div id='map'></div>
+<div id='checkboxes'>
+    <label><input id='show-tile-boundaries-checkbox' type='checkbox'> tile debug</label><br />
+    <label><input id='show-symbol-collision-boxes-checkbox' type='checkbox'> collision debug</label><br />
+    <label><input id='show-overdraw-checkbox' type='checkbox'> overdraw debug</label><br />
+    <label><input id='pitch-checkbox' type='checkbox' checked> pitch with rotate</label><br />
+</div>
+
+<script src='../dist/mapbox-gl-dev.js'></script>
+<script src='../debug/access_token_generated.js'></script>
+<script>
+
+var map = window.map = new mapboxgl.Map({
+    container: 'map',
+    zoom: 12.5,
+    center: [-77.01866, 38.888],
+    style: 'mapbox://styles/mapbox/streets-v10',
+    hash: true
+});
+
+map.addControl(new mapboxgl.NavigationControl());
+map.addControl(new mapboxgl.GeolocateControl({
+    positionOptions: {
+        enableHighAccuracy: true
+    },
+    trackUserLocation: true,
+    showUserLocation: true,
+    fitBoundsOptions: {
+        maxZoom: 20
+    }
+}));
+map.addControl(new mapboxgl.ScaleControl());
+map.addControl(new mapboxgl.FullscreenControl());
+
+
+</script>
+</body>
+</html>
diff --git a/debug/debug.html b/debug/debug.html
@@ -52,6 +52,7 @@
     }
 }));
 map.addControl(new mapboxgl.ScaleControl());
+map.addControl(new mapboxgl.FullscreenControl());
 
 map.on('load', function() {
     map.addSource('geojson', {

diff --git a/postcss.config.js b/postcss.config.js
@@ -1,6 +1,16 @@
 module.exports = {
     plugins: [
         require('postcss-inline-svg'),
-        require('cssnano')
+        require('cssnano')({
+            preset: ['default', {
+                svgo: {
+                    plugins: [{
+                        removeViewBox: false
+                    }, {
+                        removeDimensions: false
+                    }],
+                },
+            }],
+        }),
     ]
 }