Upgrades Emotion to v11

Author: majgaard

babel.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: [
-    'emotion',
+    '@emotion',
     ['@babel/plugin-proposal-class-properties', { loose: true }],
     '@babel/plugin-transform-runtime',
   ],

docs/App/Footer.js

@@ -1,7 +1,7 @@
 // @flow
 /** @jsx jsx */
 import { type Node } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 
 // const smallDevice = '@media (max-width: 769px)';
 const largeDevice = '@media (min-width: 770px)';

docs/App/GitHubButton.js

@@ -1,6 +1,6 @@
 // @flow
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 
 type Props = { count: number, repo: string };
 

docs/App/Header.js

@@ -2,7 +2,7 @@
 /** @jsx jsx */
 import fetch from 'unfetch';
 import { Component, type Node } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { withRouter } from 'react-router-dom';
 
 import Select from 'react-select';

docs/App/PageNav.js

@@ -1,7 +1,7 @@
 // @flow
 /** @jsx jsx */
 import { Component, type ElementRef } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { Route, Switch } from 'react-router-dom';
 
 import type { RouterProps } from '../types';

docs/App/TwitterButton.js

@@ -1,6 +1,6 @@
 // @flow
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 
 const TwitterButton = () => (
   <div css={{ alignItems: 'center', display: 'inline-flex' }}>

docs/App/components.js

@@ -2,7 +2,7 @@
 /** @jsx jsx */
 import { Component, type ElementConfig } from 'react';
 import { Link, withRouter } from 'react-router-dom';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 
 const navWidth = 180;
 const appWidth = 800;

docs/ExampleWrapper.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core'; // eslint-disable-line no-unused-vars
+import { jsx } from '@emotion/react'; // eslint-disable-line no-unused-vars
 import { Component } from 'react';
 import CodeSandboxer from 'react-codesandboxer';
 import { CodeBlock } from './markdown/renderer';

docs/Svg.js

@@ -1,6 +1,6 @@
 // @flow
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 
 const Svg = ({ size, ...props }: { size: number }) => (
   <svg

docs/examples/Experimental.js

@@ -1,7 +1,7 @@
 // @flow
 /** @jsx jsx */
 import { Component } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import moment from 'moment';
 import chrono from 'chrono-node';