Warn on missing variables

CHANGELOG

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- Fix missing validation for undefined properties bug 
+
 ## 0.5.1
 
 - Bug with bad merge missing changes in release

examples/missing-variable-error/build/simple-style/style.json

@@ -0,0 +1,36 @@
+{
+  "version": 8,
+  "name": "simple",
+  "sources": {
+    "Example": {"type": "vector", "url": "https://example.com/source.json"}
+  },
+  "sprite": "https://example.com/sprites/sprite",
+  "glyphs": "https://example.com/{fontstack}/{range}.pbf",
+  "layers": [
+    {
+      "id": "land",
+      "type": "background",
+      "paint": {
+        "background-color": [
+          "interpolate",
+          ["linear"],
+          ["zoom"],
+          8,
+          "red",
+          16,
+          "blue"
+        ]
+      }
+    },
+    {
+      "id": "road",
+      "type": "line",
+      "source": "Example",
+      "source-layer": "roads",
+      "minzoom": 16,
+      "layout": {"line-cap": "round", "line-join": "round"},
+      "paint": {"line-width": 5}
+    }
+  ],
+  "id": "example-simple"
+}

examples/missing-variable-error/templates/layers/layer1.js

@@ -0,0 +1,24 @@
+module.exports.default = (context) => {
+  const baseStyle = {
+    "id": "land",
+    "type": "background",
+    "paint": {
+      "background-color": [
+        "interpolate",
+        ["linear"],
+        ["zoom"],
+        8,
+        context.colors.backgroundLow,
+        16,
+        context.colors.backgroundHigh
+      ]
+    }
+  };
+
+  let overrides = {};
+
+  return {
+    baseStyle,
+    overrides
+  };
+};

examples/missing-variable-error/templates/layers/layer2.js

@@ -0,0 +1,24 @@
+module.exports.default = context => {
+  const baseStyle = {
+    id: 'road',
+    type: 'line',
+    source: context.sources.root,
+    'source-layer': 'roads',
+    minzoom: 16,
+    layout: {
+      'line-cap': 'round',
+      'line-join': 'round'
+    },
+    paint: {
+      'line-width': 5,
+      'line-color': context.colors.road
+    }
+  };
+
+  let overrides = {};
+
+  return {
+    baseStyle,
+    overrides
+  };
+};

examples/missing-variable-error/templates/styles/simple-style.js

@@ -0,0 +1,24 @@
+module.exports.context = {
+  sources: {
+    root: 'Example'
+  },
+  colors: {
+    backgroundLow: 'red',
+    backgroundHigh: 'blue'
+  }
+};
+
+module.exports.template = {
+  version: 8,
+  name: 'simple',
+  sources: {
+    Example: {
+      type: 'vector',
+      url: 'https://example.com/source.json'
+    }
+  },
+  sprite: 'https://example.com/sprites/sprite',
+  glyphs: 'https://example.com/{fontstack}/{range}.pbf',
+  layers: ['layer1', 'layer2'],
+  id: 'example-simple'
+};

package.json

@@ -23,6 +23,7 @@
     "chalk": "4.1.2",
     "fast-glob": "^3.2.11",
     "json-stringify-pretty-compact": "^3.0.0",
+    "lodash.clonedeep": "^4.5.0",
     "mapbox-gl-style-format": "git+https://github.com/stamen/mapbox-gl-style-format#v0.1.1",
     "yargs": "^17.2.1"
   },

src/lib/__test__/merge-overrides.test.js

@@ -20,19 +20,19 @@ describe('mergeOverrides', () => {
   test('works with paint overrides', () => {
     const base = {
       paint: {
-        "fill-color": "red"
+        'fill-color': 'red'
       }
     };
     const overrides = {
       paint: {
-        "fill-opacity": 0.5
+        'fill-opacity': 0.5
       }
     };
 
     const expected = {
       paint: {
-        "fill-color": "red",
-        "fill-opacity": 0.5
+        'fill-color': 'red',
+        'fill-opacity': 0.5
       }
     };
 
@@ -43,19 +43,19 @@ describe('mergeOverrides', () => {
   test('works with layout overrides', () => {
     const base = {
       layout: {
-        "line-cap": "round"
+        'line-cap': 'round'
       }
     };
     const overrides = {
       layout: {
-        "line-join": "round"
+        'line-join': 'round'
       }
     };
 
     const expected = {
       layout: {
-        "line-cap": "round",
-        "line-join": "round"
+        'line-cap': 'round',
+        'line-join': 'round'
       }
     };
 
@@ -69,16 +69,16 @@ describe('mergeOverrides', () => {
     };
     const overrides = {
       paint: {
-        "fill-color": "red",
-        "fill-opacity": 0.5
+        'fill-color': 'red',
+        'fill-opacity': 0.5
       }
     };
 
     const expected = {
       id: 'base',
       paint: {
-        "fill-color": "red",
-        "fill-opacity": 0.5
+        'fill-color': 'red',
+        'fill-opacity': 0.5
       }
     };
 
@@ -89,21 +89,21 @@ describe('mergeOverrides', () => {
   test('works with paint overrides, same properties', () => {
     const base = {
       paint: {
-        "fill-color": "green",
-        "fill-opacity": 1
+        'fill-color': 'green',
+        'fill-opacity': 1
       }
     };
     const overrides = {
       paint: {
-        "fill-color": "red",
-        "fill-opacity": 0.5
+        'fill-color': 'red',
+        'fill-opacity': 0.5
       }
     };
 
     const expected = {
       paint: {
-        "fill-color": "red",
-        "fill-opacity": 0.5
+        'fill-color': 'red',
+        'fill-opacity': 0.5
       }
     };
 
@@ -114,24 +114,34 @@ describe('mergeOverrides', () => {
   test('works with paint overrides, partial properties', () => {
     const base = {
       paint: {
-        "fill-color": "green",
-        "fill-opacity": 1
+        'fill-color': 'green',
+        'fill-opacity': 1
       }
     };
     const overrides = {
       paint: {
-        "fill-opacity": 0.5
+        'fill-opacity': 0.5
       }
     };
 
     const expected = {
       paint: {
-        "fill-color": "green",
-        "fill-opacity": 0.5
+        'fill-color': 'green',
+        'fill-opacity': 0.5
       }
     };
 
     const actual = mergeOverrides(base, overrides);
     expect(actual).toEqual(expected);
   });
+
+  test('does not remove undefined properties', () => {
+    const base = { id: 'base', paint: { 'line-color': undefined } };
+    const overrides = {};
+
+    const actual = mergeOverrides(base, overrides);
+
+    // toStrictEqual doesn't ignore undefined values
+    expect(actual).toStrictEqual(base);
+  });
 });

src/lib/merge-overrides.js

@@ -1,3 +1,5 @@
+import cloneDeep from 'lodash.clonedeep';
+
 /**
  * Merge overrides with a baseStyle or other overrides
  *
@@ -11,7 +13,7 @@
  * @returns {object}
  */
 export const mergeOverrides = (baseStyle, overrides) => {
-  const extended = JSON.parse(JSON.stringify(baseStyle));
+  const extended = cloneDeep(baseStyle);
 
   Object.entries(overrides).forEach(([k, v]) => {
     if (k === 'layout' || k === 'paint') {
@@ -23,4 +25,3 @@ export const mergeOverrides = (baseStyle, overrides) => {
 
   return extended;
 };
-

yarn.lock

@@ -3524,6 +3524,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash.clonedeep@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
+  integrity sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"