feat: upgrade to Emotion 10 (#2166)

packages/netlify-cms-widget-markdown/src/MarkdownControl/RawEditor.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import styled, { css, cx } from 'react-emotion';
+import styled from '@emotion/styled';
+import { ClassNames } from '@emotion/core';
 import { Editor as Slate } from 'slate-react';
 import Plain from 'slate-plain-serializer';
 import { debounce } from 'lodash';
@@ -9,8 +10,8 @@ import { lengths, fonts } from 'netlify-cms-ui-default';
 import { editorStyleVars, EditorControlBar } from '../styles';
 import Toolbar from './Toolbar';
 
-const styles = {
-  slateRaw: css`
+const styleStrings = {
+  slateRaw: `
     position: relative;
     overflow: hidden;
     overflow-x: auto;
@@ -83,12 +84,21 @@ export default class RawEditor extends React.Component {
             rawMode
           />
         </EditorControlBar>
-        <Slate
-          className={cx(className, styles.slateRaw)}
-          value={this.state.value}
-          onChange={this.handleChange}
-          onPaste={this.handlePaste}
-        />
+        <ClassNames>
+          {({ css, cx }) => (
+            <Slate
+              className={cx(
+                className,
+                css`
+                  ${styleStrings.slateRaw}
+                `,
+              )}
+              value={this.state.value}
+              onChange={this.handleChange}
+              onPaste={this.handlePaste}
+            />
+          )}
+        </ClassNames>
       </RawEditorContainer>
     );
   }

packages/netlify-cms-widget-markdown/src/MarkdownControl/Shortcode.js

@@ -2,7 +2,8 @@
 
 import React from 'react';
 import { Map } from 'immutable';
-import styled, { css } from 'react-emotion';
+import styled from '@emotion/styled';
+import { css } from '@emotion/core';
 import { partial, capitalize } from 'lodash';
 import { ListItemTopBar, components, colors, lengths } from 'netlify-cms-ui-default';
 import { getEditorControl, getEditorComponents } from './index';

packages/netlify-cms-widget-markdown/src/MarkdownControl/Toolbar.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import styled, { css } from 'react-emotion';
+import styled from '@emotion/styled';
+import { css } from '@emotion/core';
 import { List } from 'immutable';
 import {
   Toggle,
@@ -24,6 +25,7 @@ const ToolbarContainer = styled.div`
   padding: 11px 14px;
   min-height: 58px;
   transition: background-color ${transitions.main}, color ${transitions.main};
+  color: ${colors.text};
 `;
 
 const ToolbarDropdownWrapper = styled.div`

packages/netlify-cms-widget-markdown/src/MarkdownControl/ToolbarButton.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import { Icon, buttons } from 'netlify-cms-ui-default';
 
 const StyledToolbarButton = styled.button`

packages/netlify-cms-widget-markdown/src/MarkdownControl/VisualEditor.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import styled, { cx } from 'react-emotion';
+import styled from '@emotion/styled';
+import { ClassNames } from '@emotion/core';
 import { get, isEmpty, debounce, uniq } from 'lodash';
 import { List } from 'immutable';
 import { Value, Document, Block, Text } from 'slate';
@@ -259,19 +260,28 @@ export default class Editor extends React.Component {
             buttons={field.get('buttons')}
           />
         </EditorControlBar>
-        <Slate
-          className={cx(className, visualEditorStyles)}
-          value={this.state.value}
-          renderNode={renderNode}
-          renderMark={renderMark}
-          validateNode={validateNode}
-          plugins={plugins}
-          onChange={this.handleChange}
-          onKeyDown={onKeyDown}
-          onPaste={this.handlePaste}
-          ref={this.processRef}
-          spellCheck
-        />
+        <ClassNames>
+          {({ css, cx }) => (
+            <Slate
+              className={cx(
+                className,
+                css`
+                  ${visualEditorStyles}
+                `,
+              )}
+              value={this.state.value}
+              renderNode={renderNode}
+              renderMark={renderMark}
+              validateNode={validateNode}
+              plugins={plugins}
+              onChange={this.handleChange}
+              onKeyDown={onKeyDown}
+              onPaste={this.handlePaste}
+              ref={this.processRef}
+              spellCheck
+            />
+          )}
+        </ClassNames>
       </VisualEditorContainer>
     );
   }

packages/netlify-cms-widget-markdown/src/MarkdownControl/visualEditorStyles.js

@@ -1,8 +1,7 @@
-import { css } from 'react-emotion';
 import { colors, lengths, fonts } from 'netlify-cms-ui-default';
 import { editorStyleVars } from '../styles';
 
-export default css`
+export default `
   position: relative;
   overflow: hidden;
   overflow-x: auto;

packages/netlify-cms-widget-markdown/src/styles.js

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 export const editorStyleVars = {
   stickyDistanceBottom: '100px',