feat: upgrade to Emotion 10 (#2166)

packages/netlify-cms-ui-default/package.json

@@ -18,18 +18,18 @@
   "dependencies": {
     "react-aria-menubutton": "^5.1.0",
     "react-toggled": "^1.1.2",
-    "react-transition-group": "^2.2.1"
+    "react-transition-group": "^2.6.0"
   },
   "devDependencies": {
     "cross-env": "^5.2.0",
-    "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",
+    "@emotion/styled": "^10.0.9",
     "lodash": "^4.13.1",
     "prop-types": "^15.5.10",
-    "react": "^16.4.1",
-    "react-emotion": "^9.2.6"
+    "react": "^16.4.1"
   }
 }

packages/netlify-cms-ui-default/src/AuthenticationPage.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 from './Icon';
 import { buttons, shadows } from './styles';
 

packages/netlify-cms-ui-default/src/Dropdown.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled, { css } from 'react-emotion';
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
 import { Wrapper, Button as DropdownButton, Menu, MenuItem } from 'react-aria-menubutton';
 import { buttons, components } from './styles';
 import Icon from './Icon';

packages/netlify-cms-ui-default/src/Icon.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 icons from './Icon/icons';
 
 const IconWrapper = styled.span`

packages/netlify-cms-ui-default/src/ListItemTopBar.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 from './Icon';
 import { colors, lengths, buttons } from './styles';
 

packages/netlify-cms-ui-default/src/Loader.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled, { css, keyframes } from 'react-emotion';
+import styled from '@emotion/styled';
+import { css, keyframes } from '@emotion/core';
 import CSSTransition from 'react-transition-group/CSSTransition';
 import { colors } from './styles';
 

packages/netlify-cms-ui-default/src/ObjectWidgetTopBar.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled, { css } from 'react-emotion';
+import styled from '@emotion/styled';
+import { css } from '@emotion/core';
 import Icon from './Icon';
 import { colors, buttons } from './styles';
 import Dropdown, { StyledDropdownButton, DropdownItem } from './Dropdown';

packages/netlify-cms-ui-default/src/Toggle.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled, { css } from 'react-emotion';
+import styled from '@emotion/styled';
+import { css } from '@emotion/core';
 import ReactToggled from 'react-toggled';
 import { colors, colorsRaw, shadows, transitions } from './styles';
 

packages/netlify-cms-ui-default/src/WidgetPreviewContainer.js

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 const WidgetPreviewContainer = styled.div`
   margin: 15px 2px;

packages/netlify-cms-ui-default/src/index.js

@@ -18,4 +18,5 @@ export {
   transitions,
   effects,
   reactSelectStyles,
+  GlobalStyles,
 } from './styles';

packages/netlify-cms-ui-default/src/styles.js

@@ -1,18 +1,5 @@
-import { css, injectGlobal } from 'react-emotion';
-
-export {
-  fonts,
-  colorsRaw,
-  colors,
-  lengths,
-  components,
-  buttons,
-  shadows,
-  borders,
-  transitions,
-  effects,
-  reactSelectStyles,
-};
+import React from 'react';
+import { css, Global } from '@emotion/core';
 
 /**
  * Font Stacks
@@ -102,6 +89,7 @@ const lengths = {
   borderWidth: '2px',
   topCardWidth: '682px',
   pageMargin: '28px 18px',
+  objectWidgetTopBarContainerPadding: '0 14px 14px',
 };
 
 const borders = {
@@ -130,27 +118,25 @@ const shadows = {
   `,
 };
 
+const gradients = {
+  checkerboard: `
+    linear-gradient(
+      45deg,
+      ${colors.checkerboardDark} 25%,
+      transparent 25%,
+      transparent 75%,
+      ${colors.checkerboardDark} 75%,
+      ${colors.checkerboardDark}
+    )
+  `,
+};
+
 const effects = {
   checkerboard: css`
     background-color: ${colors.checkerboardLight};
     background-size: 16px 16px;
     background-position: 0 0, 8px 8px;
-    background-image: linear-gradient(
-        45deg,
-        ${colors.checkerboardDark} 25%,
-        transparent 25%,
-        transparent 75%,
-        ${colors.checkerboardDark} 75%,
-        ${colors.checkerboardDark}
-      ),
-      linear-gradient(
-        45deg,
-        ${colors.checkerboardDark} 25%,
-        transparent 25%,
-        transparent 75%,
-        ${colors.checkerboardDark} 75%,
-        ${colors.checkerboardDark}
-      );
+    background-image: ${gradients.checkerboard}, ${gradients.checkerboard};
   `,
 };
 
@@ -305,7 +291,7 @@ const components = {
     margin-top: 8px;
   `,
   objectWidgetTopBarContainer: css`
-    padding: 0 14px 14px;
+    padding: ${lengths.objectWidgetTopBarContainerPadding};
   `,
   dropdownList: css`
     ${shadows.dropDeep};
@@ -350,8 +336,8 @@ const reactSelectStyles = {
     backgroundColor: state.isSelected
       ? `${colors.active}`
       : state.isFocused
-        ? `${colors.activeBackground}`
-        : 'transparent',
+      ? `${colors.activeBackground}`
+      : 'transparent',
     paddingLeft: '22px',
   }),
   menu: styles => ({ ...styles, right: 0, zIndex: 2 }),
@@ -381,73 +367,105 @@ const reactSelectStyles = {
   }),
 };
 
-injectGlobal`
-  *, *:before, *:after {
-    box-sizing: border-box;
-  }
+const GlobalStyles = () => (
+  <Global
+    styles={css`
+      *,
+      *:before,
+      *:after {
+        box-sizing: border-box;
+      }
 
-  :focus {
-    outline: -webkit-focus-ring-color auto ${lengths.borderRadius};
-  }
+      :focus {
+        outline: -webkit-focus-ring-color auto ${lengths.borderRadius};
+      }
 
-  /**
-   * Don't show outlines if the user is utilizing mouse rather than keyboard.
-   */
-  [data-whatintent="mouse"] *:focus {
-    outline: none;
-  }
+      /**
+       * Don't show outlines if the user is utilizing mouse rather than keyboard.
+       */
+      [data-whatintent='mouse'] *:focus {
+        outline: none;
+      }
 
+      input {
+        border: 0;
+      }
 
-  input {
-    border: 0;
-  }
+      body {
+        font-family: ${fonts.primary};
+        font-weight: normal;
+        background-color: ${colors.background};
+        color: ${colors.text};
+        margin: 0;
+      }
 
-  body {
-    font-family: ${fonts.primary};
-    font-weight: normal;
-    background-color: ${colors.background};
-    color: ${colors.text};
-    margin: 0;
-  }
+      ul,
+      ol {
+        padding-left: 0;
+      }
 
-  ul, ol {
-    padding-left: 0;
-  }
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      p {
+        font-family: ${fonts.primary};
+        color: ${colors.textLead};
+        font-size: 15px;
+        line-height: 1.5;
+        margin-top: 0;
+      }
 
-  h1, h2, h3, h4, h5, h6, p {
-    font-family: ${fonts.primary};
-    color: ${colors.textLead};
-    font-size: 15px;
-    line-height: 1.5;
-    margin-top: 0;
-  }
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        font-weight: 500;
+      }
 
-  h1, h2, h3, h4, h5, h6 {
-    font-weight: 500;
-  }
+      h1 {
+        font-size: 24px;
+        letter-spacing: 0.4px;
+        color: ${colors.textLead};
+      }
 
-  h1 {
-    font-size: 24px;
-    letter-spacing: 0.4px;
-    color: ${colors.textLead};
-  }
+      a,
+      button {
+        font-size: 14px;
+        font-weight: 500;
+      }
 
-  a,
-  button {
-    font-size: 14px;
-    font-weight: 500;
-  }
+      a {
+        color: ${colors.text};
+        text-decoration: none;
+      }
 
-  a {
-    color: ${colors.text};
-    text-decoration: none;
-  }
+      img {
+        max-width: 100%;
+      }
 
-  img {
-    max-width: 100%;
-  }
+      textarea {
+        resize: none;
+      }
+    `}
+  />
+);
 
-  textarea {
-    resize: none;
-  }
-`;
+export {
+  fonts,
+  colorsRaw,
+  colors,
+  lengths,
+  components,
+  buttons,
+  shadows,
+  borders,
+  transitions,
+  effects,
+  reactSelectStyles,
+  GlobalStyles,
+};