feat: upgrade to Emotion 10 (#2166)

packages/netlify-cms-widget-map/package.json

@@ -22,13 +22,13 @@
   },
   "devDependencies": {
     "cross-env": "^5.2.0",
-    "css-loader": "^2.1.0",
+    "css-loader": "^2.1.1",
     "to-string-loader": "^1.1.5",
-    "webpack": "^4.16.1",
-    "webpack-cli": "^3.1.0"
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.2.3"
   },
   "peerDependencies": {
-    "emotion": "^9.2.6",
+    "@emotion/core": "^10.0.9",
     "lodash": "^4.17.10",
     "netlify-cms-ui-default": "^2.0.0",
     "prop-types": "^15.5.10",
@@ -36,6 +36,6 @@
     "react-immutable-proptypes": "^2.1.0"
   },
   "dependencies": {
-    "ol": "^5.3.0"
+    "ol": "^5.3.1"
   }
 }

packages/netlify-cms-widget-map/src/withMapControl.js

@@ -1,3 +1,6 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ClassNames } from '@emotion/core';
 import olStyles from 'ol/ol.css';
 import Map from 'ol/Map.js';
 import View from 'ol/View.js';
@@ -7,13 +10,6 @@ import TileLayer from 'ol/layer/Tile.js';
 import VectorLayer from 'ol/layer/Vector.js';
 import OSMSource from 'ol/source/OSM.js';
 import VectorSource from 'ol/source/Vector.js';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { injectGlobal } from 'react-emotion';
-
-injectGlobal`
-  ${olStyles}
-`;
 
 const formatOptions = {
   dataProjection: 'EPSG:4326',
@@ -70,7 +66,23 @@ export default function withMapControl({ getFormat, getMap } = {}) {
     }
 
     render() {
-      return <div ref={this.mapContainer}> </div>;
+      return (
+        <ClassNames>
+          {({ cx, css }) => (
+            <div
+              className={cx(
+                this.props.classNameWrapper,
+                css`
+                  ${olStyles};
+                  padding: 0;
+                  overflow: hidden;
+                `,
+              )}
+              ref={this.mapContainer}
+            />
+          )}
+        </ClassNames>
+      );
     }
   };
 }