maplibre-gl 2.2.0-pre.2 → 2.2.0

package/src/style-spec/types.g.ts

@@ -3,42 +3,160 @@
 
 export type ColorSpecification = string;
 
+export type PaddingSpecification = number | number[];
+
 export type FormattedSpecification = string;
 
 export type ResolvedImageSpecification = string;
 
 export type PromoteIdSpecification = {[_: string]: string} | string;
 
-export type FilterSpecificationInputType = string | number | boolean;
-export type FilterSpecification =
-    // Lookup
-    | ['at', number, (number |string)[]]
-    | ['get', string, Record<string, unknown>?]
-    | ['has', string, Record<string, unknown>?]
-    | ['in', ...FilterSpecificationInputType[], FilterSpecificationInputType | FilterSpecificationInputType[]]
-    | ['index-of', FilterSpecificationInputType, FilterSpecificationInputType | FilterSpecificationInputType[]]
-    | ['length', string | string[]]
-    | ['slice', string | string[], number]
+export type ExpressionInputType = string | number | boolean;
+
+export type CollatorExpressionSpecification = 
+    ['collator', {
+        'case-sensitive'?: boolean | ExpressionSpecification, 
+        'diacritic-sensitive'?: boolean | ExpressionSpecification, 
+        locale?: string | ExpressionSpecification}
+    ]; // collator
+
+export type InterpolationSpecification =
+    | ['linear'] 
+    | ['exponential', number | ExpressionSpecification] 
+    | ['cubic-bezier', number | ExpressionSpecification, number | ExpressionSpecification, number | ExpressionSpecification, number | ExpressionSpecification]
+    
+export type ExpressionSpecification = 
+    // types
+    | ['array', unknown | ExpressionSpecification] // array
+    | ['array', ExpressionInputType | ExpressionSpecification, unknown | ExpressionSpecification] // array
+    | ['array', ExpressionInputType | ExpressionSpecification, number | ExpressionSpecification, unknown | ExpressionSpecification] // array
+    | ['boolean', ...(unknown | ExpressionSpecification)[], unknown | ExpressionSpecification] // boolean
+    | CollatorExpressionSpecification
+    | ['format', ...(string | ['image', ExpressionSpecification] | ExpressionSpecification | {'font-scale'?: number | ExpressionSpecification, 'text-font'?: string[] | ExpressionSpecification, 'text-color': ColorSpecification | ExpressionSpecification})[]] // string
+    | ['image', unknown | ExpressionSpecification] // image
+    | ['literal', unknown]
+    | ['number', unknown | ExpressionSpecification, ...(unknown | ExpressionSpecification)[]] // number
+    | ['number-format', number | ExpressionSpecification, {'locale'?: string | ExpressionSpecification, 'currency'?: string | ExpressionSpecification, 'min-fraction-digits'?: number | ExpressionSpecification, 'max-fraction-digits'?: number | ExpressionSpecification}] // string
+    | ['object', unknown | ExpressionSpecification, ...(unknown | ExpressionSpecification)[]] // object
+    | ['string', unknown | ExpressionSpecification, ...(unknown | ExpressionSpecification)[]] // string
+    | ['to-boolean', unknown | ExpressionSpecification] // boolean
+    | ['to-color', unknown | ExpressionSpecification, ...(unknown | ExpressionSpecification)[]] // color
+    | ['to-number', unknown | ExpressionSpecification, ...(unknown | ExpressionSpecification)[]] // number
+    | ['to-string', unknown | ExpressionSpecification] // string
+    // feature data
+    | ['accumulated']
+    | ['feature-state', string]
+    | ['geometry-type'] // string
+    | ['id']
+    | ['line-progress'] // number
+    | ['properties'] // object
+    // lookup
+    | ['at', number | ExpressionSpecification, ExpressionSpecification]
+    | ['get', string | ExpressionSpecification, (Record<string, unknown> | ExpressionSpecification)?]
+    | ['has', string | ExpressionSpecification, (Record<string, unknown> | ExpressionSpecification)?]
+    | ['in', ExpressionInputType | ExpressionSpecification, ExpressionInputType | ExpressionSpecification]
+    | ['index-of', ExpressionInputType | ExpressionSpecification, ExpressionInputType | ExpressionSpecification] // number
+    | ['length', string | ExpressionSpecification]
+    | ['slice', string | ExpressionSpecification, number | ExpressionSpecification]
     // Decision
-    | ['!', FilterSpecification]
-    | ['!=', string | FilterSpecification, FilterSpecificationInputType]
-    | ['<', string | FilterSpecification, FilterSpecificationInputType]
-    | ['<=', string | FilterSpecification, FilterSpecificationInputType]
-    | ['==', string | FilterSpecification, FilterSpecificationInputType]
-    | ['>', string | FilterSpecification, FilterSpecificationInputType]
-    | ['>=', string | FilterSpecification, FilterSpecificationInputType]
-    | ["all", ...FilterSpecification[], FilterSpecificationInputType]
-    | ["any", ...FilterSpecification[], FilterSpecificationInputType]
-    | ["case", ...FilterSpecification[], FilterSpecificationInputType]
-    | ["coalesce", ...FilterSpecification[], FilterSpecificationInputType]
-    | ["match", ...FilterSpecification[], FilterSpecificationInputType]
-    | ["within", ...FilterSpecification[], FilterSpecificationInputType]
-    // Used in convert.ts
-    | ["!in", ...FilterSpecification[], FilterSpecificationInputType]
-    | ["!has", ...FilterSpecification[], FilterSpecificationInputType]
-    | ["none", ...FilterSpecification[], FilterSpecificationInputType]
-    // Fallbak for others
-    | Array<string | FilterSpecification>
+    | ['!', boolean | ExpressionSpecification] // boolean
+    | ['!=', ExpressionInputType | ExpressionSpecification, ExpressionInputType | ExpressionSpecification, CollatorExpressionSpecification?] // boolean
+    | ['<', ExpressionInputType | ExpressionSpecification, ExpressionInputType | ExpressionSpecification, CollatorExpressionSpecification?] // boolean
+    | ['<=', ExpressionInputType | ExpressionSpecification, ExpressionInputType | ExpressionSpecification, CollatorExpressionSpecification?] // boolean
+    | ['==', ExpressionInputType | ExpressionSpecification, ExpressionInputType | ExpressionSpecification, CollatorExpressionSpecification?] // boolean
+    | ['>', ExpressionInputType | ExpressionSpecification, ExpressionInputType | ExpressionSpecification, CollatorExpressionSpecification?] // boolean
+    | ['>=', ExpressionInputType | ExpressionSpecification, ExpressionInputType | ExpressionSpecification, CollatorExpressionSpecification?] // boolean
+    | ['all', ...(boolean | ExpressionSpecification)[]] // boolean
+    | ['any', ...(boolean | ExpressionSpecification)[]] // boolean
+    | ['case', boolean | ExpressionSpecification, ExpressionInputType | ExpressionSpecification, 
+        ...(boolean | ExpressionInputType | ExpressionSpecification)[], ExpressionInputType | ExpressionSpecification]
+    | ['coalesce', ExpressionInputType | ExpressionSpecification, ExpressionInputType | ExpressionSpecification, 
+        ...(ExpressionInputType | ExpressionSpecification)[]]
+    | ['match', ExpressionInputType | ExpressionSpecification, 
+        ExpressionInputType | ExpressionInputType[], ExpressionInputType | ExpressionSpecification, 
+        ...(ExpressionInputType | ExpressionInputType[] | ExpressionSpecification)[], // repeated as above
+        ExpressionInputType]
+    | ['within', unknown | ExpressionSpecification]
+    // Ramps, scales, curves
+    | ['interpolate', InterpolationSpecification, 
+        number | ExpressionSpecification, number | ExpressionSpecification, ExpressionInputType | ExpressionSpecification, 
+        ...(number | ExpressionInputType | ExpressionSpecification)[]]
+    | ['interpolate-hcl', InterpolationSpecification,
+        number | ExpressionSpecification, number | ExpressionSpecification, ExpressionInputType | ExpressionSpecification, 
+        ...(number | ColorSpecification | ExpressionSpecification)[]]
+    | ['interpolate-lab', InterpolationSpecification,
+        number | ExpressionSpecification, number | ExpressionSpecification, ExpressionInputType | ExpressionSpecification, 
+        ...(number | ColorSpecification | ExpressionSpecification)[]]
+    | ['step', number | ExpressionSpecification, number | ExpressionSpecification, ExpressionInputType | ExpressionSpecification, 
+        ...(number | ExpressionInputType | ExpressionSpecification)[]]
+    // Variable binding
+    | ['let', string, ExpressionInputType | ExpressionSpecification, ...(string | ExpressionInputType | ExpressionSpecification)[]]
+    | ['var', string]
+    // String
+    | ['concat', ExpressionInputType | ExpressionSpecification, ExpressionInputType | ExpressionSpecification, 
+        ...(ExpressionInputType | ExpressionSpecification)[]] // string
+    | ['downcase', string | ExpressionSpecification] // string
+    | ['is-supported-script', string | ExpressionSpecification] // boolean
+    | ['resolved-locale', CollatorExpressionSpecification] // string
+    | ['upcase', string | ExpressionSpecification] // string
+    // Color
+    | ['rgb', number | ExpressionSpecification, number | ExpressionSpecification, number | ExpressionSpecification] // color
+    | ['rgba', number | ExpressionSpecification, number | ExpressionSpecification, number | ExpressionSpecification, number | ExpressionSpecification]
+    | ['to-rgba', ColorSpecification | ExpressionSpecification]
+    // Math
+    | ['-', number | ExpressionSpecification, (number | ExpressionSpecification)?] // number
+    | ['*', number | ExpressionSpecification, number | ExpressionSpecification, ...(number | ExpressionSpecification)[]] // number
+    | ['/', number | ExpressionSpecification, number | ExpressionSpecification] // number
+    | ['%', number | ExpressionSpecification, number | ExpressionSpecification] // number
+    | ['^', number | ExpressionSpecification, number | ExpressionSpecification] // number
+    | ['+', number | ExpressionSpecification, number | ExpressionSpecification, ...(number | ExpressionSpecification)[]] // number
+    | ['abs', number | ExpressionSpecification] // number
+    | ['acos', number | ExpressionSpecification] // number
+    | ['asin', number | ExpressionSpecification] // number
+    | ['atan', number | ExpressionSpecification] // number
+    | ['ceil', number | ExpressionSpecification] // number
+    | ['cos', number | ExpressionSpecification] // number
+    | ['distance', Record<string, unknown> | ExpressionSpecification] // number
+    | ['ExpressionSpecification'] // number
+    | ['floor', number | ExpressionSpecification] // number
+    | ['ln', number | ExpressionSpecification] // number
+    | ['ln2'] // number
+    | ['log10', number | ExpressionSpecification] // number
+    | ['log2', number | ExpressionSpecification] // number
+    | ['max', number | ExpressionSpecification, ...(number | ExpressionSpecification)[]] // number
+    | ['min', number | ExpressionSpecification, ...(number | ExpressionSpecification)[]] // number
+    | ['pi'] // number
+    | ['round', number | ExpressionSpecification] // number
+    | ['sin', number | ExpressionSpecification] // number
+    | ['sqrt', number | ExpressionSpecification] // number
+    | ['tan', number | ExpressionSpecification] // number
+    // Zoom
+    | ['zoom'] // number
+    // Heatmap
+    | ['heatmap-density'] // number
+
+export type ExpressionFilterSpecification = boolean | ExpressionSpecification
+
+export type LegacyFilterSpecification =
+    // Existential
+    | ['has', string]
+    | ['!has', string]
+    // Comparison
+    | ['==', string, string | number | boolean]
+    | ['!=', string, string | number | boolean]
+    | ['>', string, string | number | boolean]
+    | ['>=', string, string | number | boolean]
+    | ['<', string, string | number | boolean]
+    | ['<=', string, string | number | boolean]
+    // Set membership
+    | ['in', string, ...(string | number | boolean)[]]
+    | ['!in', string, ...(string | number | boolean)[]]
+    // Combining
+    | ['all', ...LegacyFilterSpecification[]]
+    | ['any', ...LegacyFilterSpecification[]]
+    | ['none', ...LegacyFilterSpecification[]]
+
+export type FilterSpecification = ExpressionFilterSpecification | LegacyFilterSpecification
 
 export type TransitionSpecification = {
     duration?: number,
@@ -62,19 +180,17 @@ export type CompositeFunctionSpecification<T> =
     | { type: 'interval',    stops: Array<[{zoom: number, value: number}, T]>, property: string, default?: T }
     | { type: 'categorical', stops: Array<[{zoom: number, value: string | number | boolean}, T]>, property: string, default?: T };
 
-export type ExpressionSpecificationArray = Array<unknown>;
-
 export type PropertyValueSpecification<T> =
       T
     | CameraFunctionSpecification<T>
-    | ExpressionSpecificationArray;
+    | ExpressionSpecification;
 
 export type DataDrivenPropertyValueSpecification<T> =
       T
     | CameraFunctionSpecification<T>
     | SourceFunctionSpecification<T>
     | CompositeFunctionSpecification<T>
-    | ExpressionSpecificationArray;
+    | ExpressionSpecification;
 
 export type StyleSpecification = {
     "version": 8,
@@ -235,7 +351,7 @@ export type LineLayerSpecification = {
         "line-blur"?: DataDrivenPropertyValueSpecification<number>,
         "line-dasharray"?: PropertyValueSpecification<Array<number>>,
         "line-pattern"?: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>,
-        "line-gradient"?: ExpressionSpecificationArray
+        "line-gradient"?: ExpressionSpecification
     }
 };
 
@@ -264,7 +380,7 @@ export type SymbolLayerSpecification = {
         "icon-text-fit-padding"?: PropertyValueSpecification<[number, number, number, number]>,
         "icon-image"?: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>,
         "icon-rotate"?: DataDrivenPropertyValueSpecification<number>,
-        "icon-padding"?: PropertyValueSpecification<number>,
+        "icon-padding"?: DataDrivenPropertyValueSpecification<PaddingSpecification>,
         "icon-keep-upright"?: PropertyValueSpecification<boolean>,
         "icon-offset"?: DataDrivenPropertyValueSpecification<[number, number]>,
         "icon-anchor"?: DataDrivenPropertyValueSpecification<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">,
@@ -356,7 +472,7 @@ export type HeatmapLayerSpecification = {
         "heatmap-radius"?: DataDrivenPropertyValueSpecification<number>,
         "heatmap-weight"?: DataDrivenPropertyValueSpecification<number>,
         "heatmap-intensity"?: PropertyValueSpecification<number>,
-        "heatmap-color"?: ExpressionSpecificationArray,
+        "heatmap-color"?: ExpressionSpecification,
         "heatmap-opacity"?: PropertyValueSpecification<number>
     }
 };

package/src/style-spec/util/extend.ts

@@ -1,4 +1,4 @@
-export default function(output: any, ...inputs: Array<any>) {
+export default function extendBy(output: any, ...inputs: Array<any>) {
     for (const input of inputs) {
         for (const k in input) {
             output[k] = input[k];

package/src/style-spec/util/interpolate.test.ts

@@ -1,5 +1,6 @@
 import * as interpolate from './interpolate';
 import Color from './color';
+import Padding from './padding';
 
 describe('interpolate', () => {
     test('interpolate.number', () => {
@@ -13,4 +14,8 @@ describe('interpolate', () => {
     test('interpolate.array', () => {
         expect(interpolate.array([0, 0, 0, 0], [1, 2, 3, 4], 0.5)).toEqual([0.5, 1, 3 / 2, 2]);
     });
+
+    test('interpolate.padding', () => {
+        expect(interpolate.padding(new Padding([0, 0, 0, 0]), new Padding([1, 2, 3, 4]), 0.5)).toEqual(new Padding([0.5, 1, 3 / 2, 2]));
+    });
 });

package/src/style-spec/util/interpolate.ts

@@ -1,4 +1,5 @@
 import Color from './color';
+import Padding from './padding';
 
 export function number(a: number, b: number, t: number) {
     return (a * (1 - t)) + (b * t);
@@ -18,3 +19,14 @@ export function array(from: Array<number>, to: Array<number>, t: number): Array<
         return number(d, to[i], t);
     });
 }
+
+export function padding(from: Padding, to: Padding, t: number): Padding {
+    const fromVal = from.values;
+    const toVal = to.values;
+    return new Padding([
+        number(fromVal[0], toVal[0], t),
+        number(fromVal[1], toVal[1], t),
+        number(fromVal[2], toVal[2], t),
+        number(fromVal[3], toVal[3], t)
+    ]);
+}

package/src/style-spec/util/padding.test.ts

@@ -0,0 +1,27 @@
+import Padding from './padding';
+
+describe('Padding', () => {
+    test('Padding.parse', () => {
+        expect(Padding.parse()).toBeUndefined();
+        expect(Padding.parse(null)).toBeUndefined();
+        expect(Padding.parse(undefined)).toBeUndefined();
+        expect(Padding.parse('Dennis' as any)).toBeUndefined();
+        expect(Padding.parse('3' as any)).toBeUndefined();
+        expect(Padding.parse([])).toBeUndefined();
+        expect(Padding.parse([3, '4'] as any)).toBeUndefined();
+        expect(Padding.parse(5)).toEqual(new Padding([5, 5, 5, 5]));
+        expect(Padding.parse([1])).toEqual(new Padding([1, 1, 1, 1]));
+        expect(Padding.parse([1, 2])).toEqual(new Padding([1, 2, 1, 2]));
+        expect(Padding.parse([1, 2, 3])).toEqual(new Padding([1, 2, 3, 2]));
+        expect(Padding.parse([1, 2, 3, 4])).toEqual(new Padding([1, 2, 3, 4]));
+        expect(Padding.parse([1, 2, 3, 4, 5])).toBeUndefined();
+
+        const passThru = new Padding([1, 2, 3, 4]);
+        expect(Padding.parse(passThru)).toBe(passThru);
+    });
+
+    test('Padding#toString', () => {
+        const padding = new Padding([1, 2, 3, 4]);
+        expect(padding.toString()).toBe('[1,2,3,4]');
+    });
+});

package/src/style-spec/util/padding.ts

@@ -0,0 +1,64 @@
+/**
+ * A set of four numbers representing padding around a box. Create instances from
+ * bare arrays or numeric values using the static method `Padding.parse`.
+ * @private
+ */
+class Padding {
+    /** Padding values are in CSS order: top, right, bottom, left */
+    values: [number, number, number, number];
+
+    constructor(values: [number, number, number, number]) {
+        this.values = values.slice() as [number, number, number, number];
+    }
+
+    /**
+     * Numeric padding values
+     * @returns A `Padding` instance, or `undefined` if the input is not a valid padding value.
+     */
+    static parse(input?: number | number[] | Padding | null): Padding | void {
+        if (input instanceof Padding) {
+            return input;
+        }
+
+        // Backwards compatibility: bare number is treated the same as array with single value.
+        // Padding applies to all four sides.
+        if (typeof input === 'number') {
+            return new Padding([input, input, input, input]);
+        }
+
+        if (!Array.isArray(input)) {
+            return undefined;
+        }
+
+        if (input.length < 1 || input.length > 4) {
+            return undefined;
+        }
+
+        for (const val of input) {
+            if (typeof val !== 'number') {
+                return undefined;
+            }
+        }
+
+        // Expand shortcut properties into explicit 4-sided values
+        switch (input.length) {
+            case 1:
+                input = [input[0], input[0], input[0], input[0]];
+                break;
+            case 2:
+                input = [input[0], input[1], input[0], input[1]];
+                break;
+            case 3:
+                input = [input[0], input[1], input[2], input[1]];
+                break;
+        }
+
+        return new Padding(input as [number, number, number, number]);
+    }
+
+    toString(): string {
+        return JSON.stringify(this.values);
+    }
+}
+
+export default Padding;

package/src/style-spec/util/ref_properties.ts

@@ -1,2 +1,3 @@
 
-export default ['type', 'source', 'source-layer', 'minzoom', 'maxzoom', 'filter', 'layout'];
+const refProperties = ['type', 'source', 'source-layer', 'minzoom', 'maxzoom', 'filter', 'layout'];
+export default refProperties;

package/src/style-spec/validate/validate.ts

@@ -21,6 +21,7 @@ import validateTerrain from './validate_terrain';
 import validateString from './validate_string';
 import validateFormatted from './validate_formatted';
 import validateImage from './validate_image';
+import validatePadding from './validate_padding';
 
 const VALIDATORS = {
     '*'() {
@@ -41,7 +42,8 @@ const VALIDATORS = {
     'terrain': validateTerrain,
     'string': validateString,
     'formatted': validateFormatted,
-    'resolvedImage': validateImage
+    'resolvedImage': validateImage,
+    'padding': validatePadding
 };
 
 // Main recursive validation function. Tracks:

package/src/style-spec/validate/validate_expression.ts

@@ -3,6 +3,7 @@ import ValidationError from '../error/validation_error';
 import {createExpression, createPropertyExpression} from '../expression';
 import {deepUnbundle} from '../util/unbundle_jsonlint';
 import {isStateConstant, isGlobalPropertyConstant, isFeatureConstant} from '../expression/is_constant';
+import {Expression} from '../expression/expression';
 
 export default function validateExpression(options: any): Array<ValidationError> {
     const expression = (options.expressionContext === 'property' ? createPropertyExpression : createExpression)(deepUnbundle(options.value), options.valueSpec);
@@ -12,7 +13,7 @@ export default function validateExpression(options: any): Array<ValidationError>
         });
     }
 
-    const expressionObj = (expression.value as any).expression || (expression.value as any)._styleExpression.expression;
+    const expressionObj: Expression = (expression.value as any).expression || (expression.value as any)._styleExpression.expression;
 
     if (options.expressionContext === 'property' && (options.propertyKey === 'text-font') &&
         !expressionObj.outputDefined()) {

package/src/style-spec/validate/validate_function.ts

@@ -13,7 +13,7 @@ import {
     supportsInterpolation
 } from '../util/properties';
 
-export default function validateFunction(options) {
+export default function validateFunction(options): Array<ValidationError> {
     const functionValueSpec = options.valueSpec;
     const functionType = unbundle(options.value.type);
     let stopKeyType;
@@ -195,7 +195,7 @@ export default function validateFunction(options) {
         return [];
     }
 
-    function validateFunctionDefault(options) {
+    function validateFunctionDefault(options): Array<ValidationError> {
         return validate({
             key: options.key,
             value: options.value,

package/src/style-spec/validate/validate_glyphs_url.ts

@@ -2,7 +2,7 @@
 import ValidationError from '../error/validation_error';
 import validateString from './validate_string';
 
-export default function(options) {
+export default function validateGlyphsUrl(options) {
     const value = options.value;
     const key = options.key;
 

package/src/style-spec/validate/validate_object.ts

@@ -3,14 +3,14 @@ import ValidationError from '../error/validation_error';
 import getType from '../util/get_type';
 import validateSpec from './validate';
 
-export default function validateObject(options) {
+export default function validateObject(options): Array<ValidationError> {
     const key = options.key;
     const object = options.value;
     const elementSpecs = options.valueSpec || {};
     const elementValidators = options.objectElementValidators || {};
     const style = options.style;
     const styleSpec = options.styleSpec;
-    let errors = [];
+    let errors = [] as Array<ValidationError>;
 
     const type = getType(object);
     if (type !== 'object') {

package/src/style-spec/validate/validate_padding.test.ts

@@ -0,0 +1,82 @@
+import validatePadding from './validate_padding';
+
+describe('Validate Padding', () => {
+    test('Should return error if type is not number or array', () => {
+        let errors = validatePadding({key: 'padding', value: '3'});
+        expect(errors).toHaveLength(1);
+        expect(errors[0].message).toBe('padding: number expected, string found');
+
+        errors = validatePadding({key: 'padding', value: true});
+        expect(errors).toHaveLength(1);
+        expect(errors[0].message).toBe('padding: number expected, boolean found');
+
+        errors = validatePadding({key: 'padding', value: null});
+        expect(errors).toHaveLength(1);
+        expect(errors[0].message).toBe('padding: number expected, null found');
+
+        errors = validatePadding({key: 'padding', value: {x: 1, y: 1}});
+        expect(errors).toHaveLength(1);
+        expect(errors[0].message).toBe('padding: number expected, object found');
+
+        errors = validatePadding({key: 'padding', value: NaN});
+        expect(errors).toHaveLength(1);
+        expect(errors[0].message).toBe('padding: number expected, NaN found');
+    });
+
+    test('Should pass if type is number', () => {
+        const errors = validatePadding({key: 'padding', value: 1});
+        expect(errors).toHaveLength(0);
+    });
+
+    test('Should return error if array length is invalid', () => {
+        let errors = validatePadding({key: 'padding', value: []});
+        expect(errors).toHaveLength(1);
+        expect(errors[0].message).toBe('padding: padding requires 1 to 4 values; 0 values found');
+
+        errors = validatePadding({key: 'padding', value: [1, 1, 1, 1, 1]});
+        expect(errors).toHaveLength(1);
+        expect(errors[0].message).toBe('padding: padding requires 1 to 4 values; 5 values found');
+
+        errors = validatePadding({key: 'padding', value: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]});
+        expect(errors).toHaveLength(1);
+        expect(errors[0].message).toBe('padding: padding requires 1 to 4 values; 12 values found');
+    });
+
+    test('Should return error if array contains non-numeric values', () => {
+        let errors = validatePadding({key: 'padding', value: ['1']});
+        expect(errors).toHaveLength(1);
+        expect(errors[0].message).toBe('padding[0]: number expected, string found');
+
+        errors = validatePadding({key: 'padding', value: [true]});
+        expect(errors).toHaveLength(1);
+        expect(errors[0].message).toBe('padding[0]: number expected, boolean found');
+
+        errors = validatePadding({key: 'padding', value: [NaN]});
+        expect(errors).toHaveLength(1);
+        expect(errors[0].message).toBe('padding[0]: number expected, NaN found');
+
+        errors = validatePadding({key: 'padding', value: [{x: 1}]});
+        expect(errors).toHaveLength(1);
+        expect(errors[0].message).toBe('padding[0]: number expected, object found');
+
+        errors = validatePadding({key: 'padding', value: [1, 3, false]});
+        expect(errors).toHaveLength(1);
+        expect(errors[0].message).toBe('padding[2]: number expected, boolean found');
+
+        errors = validatePadding({key: 'padding', value: ['1', 3, false]});
+        expect(errors).toHaveLength(2);
+        expect(errors[0].message).toBe('padding[0]: number expected, string found');
+        expect(errors[1].message).toBe('padding[2]: number expected, boolean found');
+    });
+
+    test('Should pass if type is numeric array', () => {
+        let errors = validatePadding({key: 'padding', value: [1]});
+        expect(errors).toHaveLength(0);
+        errors = validatePadding({key: 'padding', value: [1, 1]});
+        expect(errors).toHaveLength(0);
+        errors = validatePadding({key: 'padding', value: [1, 1, 1]});
+        expect(errors).toHaveLength(0);
+        errors = validatePadding({key: 'padding', value: [1, 1, 1, 1]});
+        expect(errors).toHaveLength(0);
+    });
+});

package/src/style-spec/validate/validate_padding.ts

@@ -0,0 +1,36 @@
+import ValidationError from '../error/validation_error';
+import getType from '../util/get_type';
+import validate from './validate';
+import validateNumber from './validate_number';
+
+export default function validatePadding(options) {
+    const key = options.key;
+    const value = options.value;
+    const type = getType(value);
+
+    if (type === 'array') {
+        if (value.length < 1 || value.length > 4) {
+            return [new ValidationError(key, value, `padding requires 1 to 4 values; ${value.length} values found`)];
+        }
+
+        const arrayElementSpec = {
+            type: 'number'
+        };
+
+        let errors = [];
+        for (let i = 0; i < value.length; i++) {
+            errors = errors.concat(validate({
+                key: `${key}[${i}]`,
+                value: value[i],
+                valueSpec: arrayElementSpec
+            }));
+        }
+        return errors;
+    } else {
+        return validateNumber({
+            key,
+            value,
+            valueSpec: {}
+        });
+    }
+}

package/src/style-spec/validate_style.min.ts

@@ -11,6 +11,7 @@ import validateLayer from './validate/validate_layer';
 import validateFilter from './validate/validate_filter';
 import validatePaintProperty from './validate/validate_paint_property';
 import validateLayoutProperty from './validate/validate_layout_property';
+import type {StyleSpecification} from './types.g';
 
 /**
  * Validate a MapLibre GL style against the style specification. This entrypoint,
@@ -27,7 +28,7 @@ import validateLayoutProperty from './validate/validate_layout_property';
  *   var validate = require('maplibre-gl-style-spec/lib/validate_style.min');
  *   var errors = validate(style);
  */
-function validateStyleMin(style, styleSpec = latestStyleSpec) {
+function validateStyleMin(style: StyleSpecification, styleSpec = latestStyleSpec) {
 
     let errors = [];
 
@@ -45,10 +46,10 @@ function validateStyleMin(style, styleSpec = latestStyleSpec) {
         }
     }));
 
-    if (style.constants) {
+    if (style['constants']) {
         errors = errors.concat(validateConstants({
             key: 'constants',
-            value: style.constants,
+            value: style['constants'],
             style,
             styleSpec
         }));

package/src/style-spec/validate_style.ts

@@ -1,14 +1,15 @@
 
 import validateStyleMin from './validate_style.min';
-import {v8} from './style-spec';
+import {v8, ValidationError} from './style-spec';
 import readStyle from './read_style';
+import type {StyleSpecification} from './types.g';
 
 /**
  * Validate a Mapbox GL style against the style specification.
  *
  * @private
  * @alias validate
- * @param {Object|String|Buffer} style The style to be validated. If a `String`
+ * @param {StyleSpecification|string|Buffer} style The style to be validated. If a `String`
  *     or `Buffer` is provided, the returned errors will contain line numbers.
  * @param {Object} [styleSpec] The style specification to validate against.
  *     If omitted, the spec version is inferred from the stylesheet.
@@ -19,7 +20,7 @@ import readStyle from './read_style';
  *   var errors = validate(style);
  */
 
-export default function validateStyle(style, styleSpec = v8) {
+export default function validateStyle(style: StyleSpecification | string | Buffer, styleSpec = v8): Array<ValidationError> {
     let s = style;
 
     try {