Use Emotion 10 (keystonejs#455)

* Use Emotion 10

* Update

* Update

* Update emotion again

* Remove now unnecessary options to babel-plugin-emotion

.eslintrc.js

@@ -7,7 +7,7 @@ module.exports = {
     jest: true,
     'cypress/globals': true,
   },
-  plugins: ['react', 'jest', 'cypress', 'import', 'flowtype'],
+  plugins: ['react', 'jest', 'cypress', 'import', 'flowtype', 'emotion'],
   rules: {
     curly: ['error', 'multi-line'],
     'jsx-quotes': 'error',
@@ -53,6 +53,10 @@ module.exports = {
     // this stops ESLint from throwing errors
     'flowtype/define-flow-type': 'error',
     'flowtype/use-flow-type': 'error',
+    'emotion/jsx-import': 'error',
+    'emotion/no-vanilla': 'error',
+    'emotion/import-from-emotion': 'error',
+    'emotion/styled-import': 'error',
   },
   extends: ['plugin:jest/recommended'],
 

package.json

@@ -25,6 +25,8 @@
   },
   "dependencies": {
     "@atlaskit/build-releases": "^2.1.3",
+    "@emotion/core": "^10.0.0-beta.5",
+    "@emotion/styled": "^10.0.0-beta.5",
     "apollo-cache-inmemory": "^1.2.10",
     "apollo-client": "^2.4.2",
     "apollo-errors": "^1.9.0",
@@ -37,7 +39,7 @@
     "babel-core": "^6.26.0",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^7.1.4",
-    "babel-plugin-emotion": "^9.1.0",
+    "babel-plugin-emotion": "^10.0.0-beta.5",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-react-jsx-source": "^6.22.0",
@@ -56,9 +58,10 @@
     "date-fns": "^1.29.0",
     "dotenv-safe": "^6.0.0",
     "dumb-passwords": "^0.2.1",
-    "emotion": "^9.1.1",
+    "emotion": "^10.0.0-beta.5",
     "eslint": "^5.6.1",
     "eslint-junit": "^1.0.1",
+    "eslint-plugin-emotion": "10.0.0-beta.2",
     "eslint-plugin-flowtype": "^2.50.3",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jest": "^21.24.1",
@@ -109,7 +112,6 @@
     "react-copy-to-clipboard": "^5.0.1",
     "react-document-title": "^2.0.3",
     "react-dom": "^16.5.2",
-    "react-emotion": "^9.1.1",
     "react-focus-marshal": "^1.0.1",
     "react-focus-trap": "^2.6.0",
     "react-media": "^1.8.0",

packages/admin-ui/client/components/AnimateHeight.js

@@ -1,6 +1,8 @@
 // @flow
 
-import React, { Component, type Element, type Ref, type Node } from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { Component, type Element, type Ref, type Node } from 'react';
 import NodeResolver from 'react-node-resolver';
 
 const transition = 'height 220ms cubic-bezier(0.2, 0, 0, 1)';

packages/admin-ui/client/components/Animation.js

@@ -1,5 +1,6 @@
-import React, { Component } from 'react';
-import { keyframes } from 'react-emotion';
+/** @jsx jsx */
+import { jsx, keyframes } from '@emotion/core';
+import { Component } from 'react';
 
 const pulse = keyframes`
   from { transform: scale3d(1, 1, 1); }

packages/admin-ui/client/components/CreateItemModal.js

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import { Mutation } from 'react-apollo';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import { Button } from '@voussoir/ui/src/primitives/buttons';
 import { Drawer } from '@voussoir/ui/src/primitives/modals';

packages/admin-ui/client/components/ListTable.js

@@ -1,5 +1,7 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import React, { Component } from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import { Link } from 'react-router-dom';
 
 import { ShieldIcon, InfoIcon, TrashcanIcon, ArrowRightIcon } from '@voussoir/icons';

packages/admin-ui/client/components/PageError.js

@@ -1,4 +1,5 @@
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 
 import { StopIcon } from '@voussoir/icons';
 import { colors } from '@voussoir/ui/src/theme';

packages/admin-ui/client/components/PageLoading.js

@@ -1,4 +1,5 @@
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import { LoadingIndicator } from '@voussoir/ui/src/primitives/loading';
 
 export default function PageLoading() {

packages/admin-ui/client/components/Popout.js

@@ -1,7 +1,7 @@
 // @flow
 
 import React, { Fragment, type ComponentType, type Node, type Ref } from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import { Button } from '@voussoir/ui/src/primitives/buttons';
 import { Popout as PopoutModal } from '@voussoir/ui/src/primitives/modals';

packages/admin-ui/client/index.js

@@ -3,10 +3,9 @@ import ReactDOM from 'react-dom';
 import { ApolloProvider } from 'react-apollo';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import { ToastProvider } from 'react-toast-notifications';
-import { injectGlobal } from 'emotion';
+import { Global } from '@emotion/core';
 
 import globalStyles from '@voussoir/ui/src/globalStyles';
-injectGlobal(globalStyles);
 
 import apolloClient from './apolloClient';
 
@@ -25,6 +24,7 @@ const Keystone = () => (
   <ApolloProvider client={apolloClient}>
     <ToastProvider>
       <ConnectivityListener />
+      <Global styles={globalStyles} />
       <AdminMetaProvider>
         {adminMeta => {
           const { adminPath } = adminMeta;

packages/admin-ui/client/pages/Home/components.js

@@ -1,5 +1,6 @@
-import React from 'react';
-import styled from 'react-emotion';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import styled from '@emotion/styled';
 import { Link } from 'react-router-dom';
 import withPseudoState from 'react-pseudo-state';
 

packages/admin-ui/client/pages/Item/Footer.js

@@ -1,6 +1,8 @@
-import React, { Component } from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import raf from 'raf-schd';
 import { Button, LoadingButton } from '@voussoir/ui/src/primitives/buttons';
 import { colors } from '@voussoir/ui/src/theme';

packages/admin-ui/client/pages/Item/index.js

@@ -1,5 +1,7 @@
-import React, { Component, Fragment } from 'react';
-import styled from 'react-emotion';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { Component, Fragment } from 'react';
+import styled from '@emotion/styled';
 import { Mutation, Query } from 'react-apollo';
 import { Link, withRouter } from 'react-router-dom';
 import { CopyToClipboard } from 'react-copy-to-clipboard';

packages/admin-ui/client/pages/List/ColumnSelect.js

@@ -1,4 +1,5 @@
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import { CheckIcon, DashIcon, XIcon } from '@voussoir/icons';
 import { colors } from '@voussoir/ui/src/theme';
 import { OptionPrimitive } from '@voussoir/ui/src/primitives/filters';

packages/admin-ui/client/pages/List/Filters/AddFilterPopout.js

@@ -1,4 +1,6 @@
-import React, { Component, createRef } from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { Component, createRef } from 'react';
 import { Transition, TransitionGroup } from 'react-transition-group';
 
 import { ChevronLeftIcon, ChevronRightIcon, AlertIcon } from '@voussoir/icons';

packages/admin-ui/client/pages/List/Filters/PopoutForm.js

@@ -1,4 +1,6 @@
-import React, { Component, Fragment } from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { Component, Fragment } from 'react';
 
 import { colors, gridSize } from '@voussoir/ui/src/theme';
 import { Popout } from '../../../components/Popout';

packages/admin-ui/client/pages/List/ListDetails.js

@@ -1,5 +1,7 @@
-import React, { Component, createRef, Fragment } from 'react';
-import styled from 'react-emotion';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { Component, createRef, Fragment } from 'react';
+import styled from '@emotion/styled';
 import { withRouter } from 'react-router-dom';
 
 import { FoldIcon, PlusIcon, SearchIcon, UnfoldIcon, XIcon } from '@voussoir/icons';

packages/admin-ui/client/pages/List/Management.js

@@ -1,6 +1,8 @@
 /* global ENABLE_DEV_FEATURES */
 
-import React, { Component, Fragment } from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { Component, Fragment } from 'react';
 
 import { SettingsIcon, TrashcanIcon } from '@voussoir/icons';
 import { FlexGroup } from '@voussoir/ui/src/primitives/layout';

packages/admin-ui/client/pages/List/SortSelect.js

@@ -1,5 +1,7 @@
-import React, { Component } from 'react';
-import styled from 'react-emotion';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { Component } from 'react';
+import styled from '@emotion/styled';
 import { ChevronDownIcon, ChevronUpIcon } from '@voussoir/icons';
 import { OptionPrimitive } from '@voussoir/ui/src/primitives/filters';
 import { colors } from '@voussoir/ui/src/theme';

packages/admin-ui/client/pages/Signin.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import { Alert } from '@voussoir/ui/src/primitives/alert';
 import { Input } from '@voussoir/ui/src/primitives/forms';

packages/admin-ui/client/pages/Signout.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import { Link } from 'react-router-dom';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import SessionProvider from '../providers/Session';
 import logo from '../assets/logo.png';

packages/admin-ui/client/pages/StyleGuide/Components/Grid.js

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import { Grid, Cell } from '@voussoir/ui/src/primitives/layout';
 

packages/admin-ui/client/pages/StyleGuide/Components/Loading.js

@@ -1,5 +1,7 @@
-import React, { Component, Fragment } from 'react';
-import styled from 'react-emotion';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { Component, Fragment } from 'react';
+import styled from '@emotion/styled';
 
 import { colors } from '@voussoir/ui/src/theme';
 import { FlexGroup } from '@voussoir/ui/src/primitives/layout';

packages/admin-ui/client/pages/StyleGuide/Components/Modals.js

@@ -1,5 +1,5 @@
 import React, { Component, Fragment } from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import { Button } from '@voussoir/ui/src/primitives/buttons';
 import { FlexGroup } from '@voussoir/ui/src/primitives/layout';

packages/admin-ui/client/pages/StyleGuide/Icons.js

@@ -1,5 +1,7 @@
-import React, { Component, Fragment } from 'react';
-import styled from 'react-emotion';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { Component, Fragment } from 'react';
+import styled from '@emotion/styled';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import * as icons from '@voussoir/icons';
 

packages/admin-ui/client/pages/StyleGuide/Palette.js

@@ -1,4 +1,6 @@
-import React, { Fragment } from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { Fragment } from 'react';
 
 import { Grid, Cell } from '@voussoir/ui/src/primitives/layout';
 import { colors } from '@voussoir/ui/src/theme';

packages/admin-ui/client/pages/StyleGuide/index.js

@@ -1,4 +1,6 @@
-import React, { Component, Fragment } from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { Component, Fragment } from 'react';
 import { Redirect, Route, Switch, withRouter } from 'react-router-dom';
 
 import Nav from '../../components/Nav';

packages/admin-ui/client/public.js

@@ -3,10 +3,9 @@ import ReactDOM from 'react-dom';
 import { ApolloProvider } from 'react-apollo';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import { ToastProvider } from 'react-toast-notifications';
-import { injectGlobal } from 'emotion';
+import { Global } from '@emotion/core';
 
 import globalStyles from '@voussoir/ui/src/globalStyles';
-injectGlobal(globalStyles);
 
 import apolloClient from './apolloClient';
 
@@ -28,6 +27,7 @@ const Keystone = () => (
   <ApolloProvider client={apolloClient}>
     <ToastProvider>
       <ConnectivityListener />
+      <Global styles={globalStyles} />
       <AdminMetaProvider>
         {adminMeta =>
           adminMeta.withAuth ? (

packages/admin-ui/package.json

@@ -7,6 +7,8 @@
     "node": ">=8.4.0"
   },
   "dependencies": {
+    "@emotion/core": "^10.0.0-beta.5",
+    "@emotion/styled": "^10.0.0-beta.5",
     "@voussoir/field-views-loader": "^0.1.3",
     "@voussoir/fields": "^1.0.0",
     "@voussoir/icons": "^0.1.3",
@@ -20,7 +22,7 @@
     "apollo-upload-client": "^9.0.0",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.4",
-    "babel-plugin-emotion": "^9.1.0",
+    "babel-plugin-emotion": "^10.0.0-beta.5",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-react-jsx-source": "^6.22.0",
@@ -29,7 +31,7 @@
     "body-parser": "^1.18.2",
     "cross-fetch": "^2.2.0",
     "cuid": "^2.1.1",
-    "emotion": "^9.1.1",
+    "emotion": "^10.0.0-beta.5",
     "express": "^4.16.3",
     "express-session": "^1.15.6",
     "file-loader": "^1.1.11",
@@ -46,7 +48,6 @@
     "react-copy-to-clipboard": "^5.0.1",
     "react-document-title": "^2.0.3",
     "react-dom": "^16.5.2",
-    "react-emotion": "^9.1.1",
     "react-media": "^1.8.0",
     "react-node-resolver": "^2.0.0",
     "react-pseudo-state": "^1.0.1",

packages/admin-ui/server/getWebpackConfig.js

@@ -22,10 +22,7 @@ module.exports = function({ adminMeta, entry }) {
             plugins: [
               'transform-class-properties',
               'transform-object-rest-spread',
-              [
-                'emotion',
-                enableDevFeatures ? { hoist: true } : { sourceMap: true, autoLabel: true },
-              ],
+              ['emotion', enableDevFeatures ? { sourceMap: true } : {}],
               ...(enableDevFeatures ? ['transform-react-jsx-source'] : []),
             ],
           },

packages/arch/package.json

@@ -9,23 +9,24 @@
     "start": "cd ./www && yarn develop"
   },
   "dependencies": {
-    "emotion": "^9.1.1",
+    "@emotion/core": "^10.0.0-beta.5",
+    "@emotion/styled": "^10.0.0-beta.5",
+    "date-fns": "^1.29.0",
+    "emotion": "^10.0.0-beta.5",
     "fs-extra": "^7.0.0",
+    "kalendaryo": "^1.10.0",
     "octicons": "^7.2.0",
     "react": "^16.5.2",
     "react-dom": "^16.5.2",
-    "react-select": "^2.0.0",
-    "react-radios": "^1.1.0",
-    "react-node-resolver": "^2.0.0",
-    "date-fns": "^1.29.0",
-    "react-emotion": "^9.1.1",
-    "kalendaryo": "^1.10.0",
     "react-focus-marshal": "^1.0.1",
     "react-focus-trap": "^2.6.0",
+    "react-node-resolver": "^2.0.0",
     "react-pseudo-state": "^1.0.1",
+    "react-radios": "^1.1.0",
     "react-router-dom": "^4.2.2",
     "react-scrolllock": "^3.0.1",
+    "react-select": "^2.0.0",
     "react-transition-group": "^2.3.1",
     "to-pascal-case": "^1.0.0"
   }
-}
+}

packages/arch/packages/alert/index.js

@@ -1,7 +1,7 @@
 // @flow
 
 import { type Node } from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import { borderRadius, colors } from '../theme';