Updated babel/webpack

.babelrc

@@ -1,6 +1,15 @@
 {
-  "presets": ["env", "react"],
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
-  "plugins": ["transform-object-rest-spread", "transform-class-properties"],
+  "plugins": [
+    "react-hot-loader/babel",
+    "@babel/plugin-proposal-class-properties",
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        "legacy": true
+      }
+    ],
+  ],
   "env": {
     "test": {
       "plugins": [
@@ -10,4 +19,4 @@
       ]
     }
   }
-}
+}

config/webpack.config.js

@@ -10,6 +10,7 @@ const PORT = process.env.PORT || "8888";
 
 module.exports = {
   target: 'web',
+  mode: 'development',
   entry: [
     `webpack-dev-server/client?http://${HOST}:${PORT}`,
     `webpack/hot/only-dev-server`,
@@ -27,7 +28,7 @@ module.exports = {
     noParse: [
       /mapbox-gl\/dist\/mapbox-gl.js/
     ],
-    loaders: loaders
+    rules: loaders
   },
   node: {
     fs: "empty",

config/webpack.loaders.js

@@ -1,54 +1,53 @@
+const path = require("path");
+
 module.exports = [
   {
     test: /\.jsx?$/,
-    exclude: /(node_modules|bower_components|public)/,
+    exclude: [
-    loaders: ['react-hot-loader/webpack']
+      path.resolve(__dirname, '../node_modules')
+    ],
+    use: 'babel-loader'
   },
   // HACK: This is a massive hack and reaches into the mapbox-gl private API.
   // We have to include this for access to `normalizeSourceURL`. We should
   // remove this ASAP, see <https://github.com/mapbox/mapbox-gl-js/issues/2416>
-  {
-    test: /.*node_modules[\/\\]mapbox-gl[\/\\]src[\/\\]util[\/\\].*\.js/,
-    loader: 'babel-loader',
-    query: {
-      presets: ['env', 'react', 'flow'],
-      plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties'],
-    }
-  },
   {
     test: /\.jsx?$/,
-    // Note: These modules aren't ES5 therefore we much compile them.
+    include: [
-    exclude: /(.*node_modules(?![\/\\](@mapbox[\/\\]mapbox-gl-style-spec|ol|mapbox-to-ol-style))|bower_components|public)/,
+      path.resolve(__dirname, '../node_modules/mapbox-gl/src/util/')
-    loader: 'babel-loader',
+    ],
-    query: {
+    use: {
-      presets: ['env', 'react'],
+      loader: 'babel-loader',
-      plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties'],
+      options: {
+        presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow'],
+        plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties'],
+      }
     }
   },
   {
     test: /\.(eot|ttf|woff|woff2)$/,
-    loader: 'file-loader?name=fonts/[name].[ext]'
+    use: 'file-loader?name=fonts/[name].[ext]'
   },
   {
     test: /\.ico$/,
-    loader: 'file-loader?name=[name].[ext]'
+    use: 'file-loader?name=[name].[ext]'
   },
   {
     test: /\.(svg|gif|jpg|png)$/,
-    loader: 'file-loader?name=img/[name].[ext]'
+    use: 'file-loader?name=img/[name].[ext]'
-  },
-  {
-    test: /\.json$/,
-    loader: 'json-loader'
   },
   {
     test: /[\/\\](node_modules|global|src)[\/\\].*\.scss$/,
-    loaders: ["style-loader", "css-loader", "sass-loader"]
+    use: [
+      'style-loader',
+      "css-loader",
+      "sass-loader"
+    ]
   },
   {
     test: /[\/\\](node_modules|global|src)[\/\\].*\.css$/,
-    loaders: [
+    use: [
-      'style-loader?sourceMap',
+      'style-loader',
       'css-loader'
     ]
   }

config/webpack.production.config.js

@@ -1,7 +1,6 @@
 var webpack = require('webpack');
 var path = require('path');
 var loaders = require('./webpack.loaders');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var WebpackCleanupPlugin = require('webpack-cleanup-plugin');
 var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
@@ -17,8 +16,8 @@ module.exports = {
   },
   output: {
     path: OUTPATH,
-    filename: '[name].[chunkhash].js',
+    filename: '[name].[contenthash].js',
-    chunkFilename: '[chunkhash].js'
+    chunkFilename: '[contenthash].js'
   },
   resolve: {
     extensions: ['.js', '.jsx']
@@ -27,7 +26,7 @@ module.exports = {
     noParse: [
       /mapbox-gl\/dist\/mapbox-gl.js/
     ],
-    loaders
+    rules: loaders
   },
   node: {
     fs: "empty",
@@ -43,9 +42,6 @@ module.exports = {
       }
     }),
     new UglifyJsPlugin(),
-    new ExtractTextPlugin('[contenthash].css', {
-      allChunks: true
-    }),
     new HtmlWebpackPlugin({
       template: './src/template.html',
       title: 'Maputnik'

package.json

@@ -20,6 +20,7 @@
   "license": "MIT",
   "homepage": "https://github.com/maputnik/editor#readme",
   "dependencies": {
+    "@babel/runtime": "^7.1.2",
     "@mapbox/mapbox-gl-rtl-text": "^0.2.1",
     "@mapbox/mapbox-gl-style-spec": "^13.1.0",
     "classnames": "^2.2.6",
@@ -96,56 +97,50 @@
     }
   },
   "devDependencies": {
-    "babel-core": "^6.26.3",
+    "@babel/core": "^7.1.2",
-    "babel-eslint": "^8.2.3",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
-    "babel-loader": "7.1.4",
+    "@babel/plugin-proposal-decorators": "^7.1.2",
+    "@babel/plugin-transform-runtime": "^7.1.0",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "8.0.4",
     "babel-plugin-istanbul": "^4.1.6",
-    "babel-plugin-transform-class-properties": "^6.24.1",
+    "copy-webpack-plugin": "^4.5.2",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-plugin-transform-flow-strip-types": "^6.22.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-flow": "^6.23.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-register": "^6.26.0",
-    "babel-runtime": "^6.26.0",
-    "copy-webpack-plugin": "^4.5.1",
     "cors": "^2.8.4",
     "cross-env": "^5.2.0",
-    "css-loader": "^0.28.11",
+    "css-loader": "^1.0.0",
     "eslint": "^4.19.1",
     "eslint-plugin-react": "^7.4.0",
     "express": "^4.16.3",
-    "extract-text-webpack-plugin": "^3.0.2",
+    "file-loader": "^2.0.0",
-    "file-loader": "^1.1.5",
     "html-webpack-plugin": "^3.2.0",
     "is-docker": "^1.1.0",
     "istanbul": "^0.4.5",
-    "istanbul-lib-coverage": "^1.2.0",
+    "istanbul-lib-coverage": "^2.0.1",
-    "json-loader": "^0.5.7",
     "mkdirp": "^0.5.1",
     "mocha": "^5.2.0",
-    "node-sass": "^4.9.0",
+    "node-sass": "^4.9.3",
     "raw-loader": "^0.5.1",
-    "react-hot-loader": "^3.1.1",
+    "react-hot-loader": "^4.3.11",
-    "sass-loader": "^7.0.1",
+    "sass-loader": "^7.1.0",
-    "selenium-standalone": "^6.14.0",
+    "selenium-standalone": "^6.15.3",
-    "style-loader": "^0.20.3",
+    "style-loader": "^0.23.0",
-    "stylelint": "^9.2.0",
+    "stylelint": "^9.6.0",
     "stylelint-config-recommended-scss": "^3.2.0",
-    "stylelint-scss": "^3.0.0",
+    "stylelint-scss": "^3.3.1",
     "transform-loader": "^0.2.4",
     "uglifyjs-webpack-plugin": "^1.2.4",
     "uuid": "^3.3.2",
-    "wdio-mocha-framework": "^0.5.13",
+    "wdio-mocha-framework": "^0.6.3",
     "wdio-selenium-standalone-service": "0.0.10",
-    "wdio-spec-reporter": "^0.1.2",
+    "wdio-spec-reporter": "^0.1.5",
-    "webdriverio": "^4.12.0",
+    "webdriverio": "^4.13.2",
-    "webpack": "^3.8.1",
+    "webpack": "^4.20.2",
-    "webpack-bundle-analyzer": "^2.9.0",
+    "webpack-bundle-analyzer": "^3.0.2",
     "webpack-cleanup-plugin": "^0.5.1",
-    "webpack-dev-server": "^2.9.4"
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.9"
   }
 }

src/components/App.jsx

@@ -21,7 +21,7 @@ import ShortcutsModal from './modals/ShortcutsModal'
 import SurveyModal from './modals/SurveyModal'
 
 import { downloadGlyphsMetadata, downloadSpriteMetadata } from '../libs/metadata'
-import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import {latest, validate} from '@mapbox/mapbox-gl-style-spec'
 import style from '../libs/style'
 import { initialStyleUrl, loadStyleUrl } from '../libs/urlopen'
 import { undoMessages, redoMessages } from '../libs/diffmessage'
@@ -168,7 +168,7 @@ export default class App extends React.Component {
       sources: {},
       vectorLayers: {},
       inspectModeEnabled: false,
-      spec: styleSpec.latest,
+      spec: latest,
       isOpen: {
         settings: false,
         sources: false,
@@ -238,7 +238,7 @@ export default class App extends React.Component {
 
   onStyleChanged = (newStyle, save=true) => {
 
-    const errors = styleSpec.validate(newStyle, styleSpec.latest)
+    const errors = validate(newStyle, latest)
     if(errors.length === 0) {
 
       if(newStyle.glyphs !== this.state.mapStyle.glyphs) {

src/components/filter/FilterEditor.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { combiningFilterOps } from '../../libs/filterops.js'
 
-import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import {latest} from '@mapbox/mapbox-gl-style-spec'
 import DocLabel from '../fields/DocLabel'
 import SelectInput from '../inputs/SelectInput'
 import SingleFilterEditor from './SingleFilterEditor'
@@ -89,7 +89,7 @@ export default class CombiningFilterEditor extends React.Component {
       <div className="maputnik-filter-editor-compound-select" data-wd-key="layer-filter">
         <DocLabel
           label={"Compound Filter"}
-          doc={styleSpec.latest.layer.filter.doc + " Combine multiple filters together by using a compound filter."}
+          doc={latest.layer.filter.doc + " Combine multiple filters together by using a compound filter."}
         />
         <SelectInput
           value={combiningOp}

src/components/layers/LayerIdBlock.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import {latest} from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 
@@ -13,7 +13,7 @@ class LayerIdBlock extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"ID"} doc={styleSpec.latest.layer.id.doc}
+    return <InputBlock label={"ID"} doc={latest.layer.id.doc}
       data-wd-key={this.props.wdKey}
     >
       <StringInput

src/components/layers/LayerSourceBlock.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import {latest} from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
 import AutocompleteInput from '../inputs/AutocompleteInput'
 
@@ -19,7 +19,7 @@ class LayerSourceBlock extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Source"} doc={styleSpec.latest.layer.source.doc}
+    return <InputBlock label={"Source"} doc={latest.layer.source.doc}
       data-wd-key={this.props.wdKey}
     >
       <AutocompleteInput

src/components/layers/LayerSourceLayerBlock.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import {latest} from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
 import AutocompleteInput from '../inputs/AutocompleteInput'
 
@@ -20,7 +20,7 @@ class LayerSourceLayer extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Source Layer"} doc={styleSpec.latest.layer['source-layer'].doc}
+    return <InputBlock label={"Source Layer"} doc={latest.layer['source-layer'].doc}
       data-wd-key="layer-source-layer"
     >
       <AutocompleteInput

src/components/layers/LayerTypeBlock.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import {latest} from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
 import SelectInput from '../inputs/SelectInput'
 
@@ -13,7 +13,7 @@ class LayerTypeBlock extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Type"} doc={styleSpec.latest.layer.type.doc}
+    return <InputBlock label={"Type"} doc={latest.layer.type.doc}
       data-wd-key={this.props.wdKey}
     >
       <SelectInput

src/components/layers/MaxZoomBlock.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import {latest} from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
 import NumberInput from '../inputs/NumberInput'
 
@@ -12,15 +12,15 @@ class MaxZoomBlock extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Max Zoom"} doc={styleSpec.latest.layer.maxzoom.doc}
+    return <InputBlock label={"Max Zoom"} doc={latest.layer.maxzoom.doc}
       data-wd-key="max-zoom"
     >
       <NumberInput
         value={this.props.value}
         onChange={this.props.onChange}
-        min={styleSpec.latest.layer.maxzoom.minimum}
+        min={latest.layer.maxzoom.minimum}
-        max={styleSpec.latest.layer.maxzoom.maximum}
+        max={latest.layer.maxzoom.maximum}
-        default={styleSpec.latest.layer.maxzoom.maximum}
+        default={latest.layer.maxzoom.maximum}
       />
     </InputBlock>
   }

src/components/layers/MinZoomBlock.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import {latest} from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
 import NumberInput from '../inputs/NumberInput'
 
@@ -12,15 +12,15 @@ class MinZoomBlock extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Min Zoom"} doc={styleSpec.latest.layer.minzoom.doc}
+    return <InputBlock label={"Min Zoom"} doc={latest.layer.minzoom.doc}
       data-wd-key="min-zoom"
     >
       <NumberInput
         value={this.props.value}
         onChange={this.props.onChange}
-        min={styleSpec.latest.layer.minzoom.minimum}
+        min={latest.layer.minzoom.minimum}
-        max={styleSpec.latest.layer.minzoom.maximum}
+        max={latest.layer.minzoom.maximum}
-        default={styleSpec.latest.layer.minzoom.minimum}
+        default={latest.layer.minzoom.minimum}
       />
     </InputBlock>
   }

src/components/modals/ExportModal.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { saveAs } from 'file-saver'
 
-import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import {format} from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import CheckboxInput from '../inputs/CheckboxInput'
@@ -36,7 +36,7 @@ class ExportModal extends React.Component {
   }
 
   downloadStyle() {
-    const tokenStyle = styleSpec.format(stripAccessTokens(style.replaceAccessTokens(this.props.mapStyle)));
+    const tokenStyle = format(stripAccessTokens(style.replaceAccessTokens(this.props.mapStyle)));
 
     const blob = new Blob([tokenStyle], {type: "application/json;charset=utf-8"});
     saveAs(blob, this.props.mapStyle.id + ".json");

src/components/modals/SettingsModal.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import {latest} from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
@@ -44,7 +44,7 @@ class SettingsModal extends React.Component {
       title={'Style Settings'}
     >
       <div style={{minWidth: 350}}>
-      <InputBlock label={"Name"} doc={styleSpec.latest.$root.name.doc}>
+      <InputBlock label={"Name"} doc={latest.$root.name.doc}>
         <StringInput {...inputProps}
           data-wd-key="modal-settings.name" 
           value={this.props.mapStyle.name}
@@ -58,7 +58,7 @@ class SettingsModal extends React.Component {
           onChange={this.changeStyleProperty.bind(this, "owner")}
         />
       </InputBlock>
-      <InputBlock label={"Sprite URL"} doc={styleSpec.latest.$root.sprite.doc}>
+      <InputBlock label={"Sprite URL"} doc={latest.$root.sprite.doc}>
         <StringInput {...inputProps}
           data-wd-key="modal-settings.sprite" 
           value={this.props.mapStyle.sprite}
@@ -66,7 +66,7 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Glyphs URL"} doc={styleSpec.latest.$root.glyphs.doc}>
+      <InputBlock label={"Glyphs URL"} doc={latest.$root.glyphs.doc}>
         <StringInput {...inputProps}
           data-wd-key="modal-settings.glyphs" 
           value={this.props.mapStyle.glyphs}

src/components/modals/SourcesModal.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import {latest} from '@mapbox/mapbox-gl-style-spec'
 import Modal from './Modal'
 import Button from '../Button'
 import InputBlock from '../inputs/InputBlock'
@@ -152,7 +152,7 @@ class AddSource extends React.Component {
           onChange={v => this.setState({ sourceId: v})}
         />
       </InputBlock>
-      <InputBlock label={"Source Type"} doc={styleSpec.latest.source_vector.type.doc}>
+      <InputBlock label={"Source Type"} doc={latest.source_vector.type.doc}>
         <SelectInput
           options={[
             ['geojson', 'GeoJSON'],

src/components/sources/SourceTypeEditor.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import {latest} from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import NumberInput from '../inputs/NumberInput'
@@ -16,7 +16,7 @@ class TileJSONSourceEditor extends React.Component {
 
   render() {
     return <div>
-      <InputBlock label={"TileJSON URL"} doc={styleSpec.latest.source_vector.url.doc}>
+      <InputBlock label={"TileJSON URL"} doc={latest.source_vector.url.doc}>
         <StringInput
           value={this.props.source.url}
           onChange={url => this.props.onChange({
@@ -50,7 +50,7 @@ class TileURLSourceEditor extends React.Component {
     const prefix = ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th']
     const tiles = this.props.source.tiles || []
     return tiles.map((tileUrl, tileIndex) => {
-      return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"} doc={styleSpec.latest.source_vector.tiles.doc}>
+      return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"} doc={latest.source_vector.tiles.doc}>
         <StringInput
           value={tileUrl}
           onChange={this.changeTileUrl.bind(this, tileIndex)}
@@ -62,7 +62,7 @@ class TileURLSourceEditor extends React.Component {
   render() {
     return <div>
       {this.renderTileUrls()}
-      <InputBlock label={"Min Zoom"} doc={styleSpec.latest.source_vector.minzoom.doc}>
+      <InputBlock label={"Min Zoom"} doc={latest.source_vector.minzoom.doc}>
         <NumberInput
           value={this.props.source.minzoom || 0}
           onChange={minzoom => this.props.onChange({
@@ -71,7 +71,7 @@ class TileURLSourceEditor extends React.Component {
           })}
         />
       </InputBlock>
-      <InputBlock label={"Max Zoom"} doc={styleSpec.latest.source_vector.maxzoom.doc}>
+      <InputBlock label={"Max Zoom"} doc={latest.source_vector.maxzoom.doc}>
         <NumberInput
           value={this.props.source.maxzoom || 22}
           onChange={maxzoom => this.props.onChange({
@@ -93,7 +93,7 @@ class GeoJSONSourceEditor extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"GeoJSON Data"} doc={styleSpec.latest.source_geojson.data.doc}>
+    return <InputBlock label={"GeoJSON Data"} doc={latest.source_geojson.data.doc}>
       <StringInput
         value={this.props.source.data}
         onChange={data => this.props.onChange({
@@ -125,14 +125,14 @@ class SourceTypeEditor extends React.Component {
       case 'tilexyz_raster': return <TileURLSourceEditor {...commonProps} />
       case 'tilejson_raster-dem': return <TileJSONSourceEditor {...commonProps} />
       case 'tilexyz_raster-dem': return <TileURLSourceEditor {...commonProps}>
-        <InputBlock label={"Encoding"} doc={styleSpec.latest.source_raster_dem.encoding.doc}>
+        <InputBlock label={"Encoding"} doc={latest.source_raster_dem.encoding.doc}>
           <SelectInput
-            options={Object.keys(styleSpec.latest.source_raster_dem.encoding.values)}
+            options={Object.keys(latest.source_raster_dem.encoding.values)}
             onChange={encoding => this.props.onChange({
               ...this.props.source,
               encoding: encoding
             })}
-            value={this.props.source.encoding || styleSpec.latest.source_raster_dem.encoding.default}
+            value={this.props.source.encoding || latest.source_raster_dem.encoding.default}
           />
         </InputBlock>
       </TileURLSourceEditor>

src/libs/diffmessage.js

@@ -1,7 +1,7 @@
-import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import {diff} from '@mapbox/mapbox-gl-style-spec'
 
 export function diffMessages(beforeStyle, afterStyle) {
-  const changes = styleSpec.diff(beforeStyle, afterStyle)
+  const changes = diff(beforeStyle, afterStyle)
   return changes.map(cmd => cmd.command + ' ' + cmd.args.join(' '))
 }
 

src/libs/filterops.js

@@ -1,6 +1,6 @@
-import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import {latest} from '@mapbox/mapbox-gl-style-spec'
 export const combiningFilterOps = ['all', 'any', 'none']
 export const setFilterOps = ['in', '!in']
 export const otherFilterOps = Object
-  .keys(styleSpec.latest.filter_operator.values)
+  .keys(latest.filter_operator.values)
   .filter(op => combiningFilterOps.indexOf(op) < 0)

src/libs/layer.js

@@ -1,16 +1,16 @@
-import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import {latest} from '@mapbox/mapbox-gl-style-spec'
 
 export function changeType(layer, newType) {
   const changedPaintProps = { ...layer.paint }
   Object.keys(changedPaintProps).forEach(propertyName => {
-    if(!(propertyName in styleSpec.latest['paint_' + newType])) {
+    if(!(propertyName in latest['paint_' + newType])) {
       delete changedPaintProps[propertyName]
     }
   })
 
   const changedLayoutProps = { ...layer.layout }
   Object.keys(changedLayoutProps).forEach(propertyName => {
-    if(!(propertyName in styleSpec.latest['layout_' + newType])) {
+    if(!(propertyName in latest['layout_' + newType])) {
       delete changedLayoutProps[propertyName]
     }
   })