Merge pull request #3321 from JedWatson/emotion-10

emotion 9 --> emotion 10

Author: gwyneplaine

.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = {
         argsIgnorePattern: '^event$',
         ignoreRestSiblings: true,
         vars: 'all',
+        varsIgnorePattern: 'jsx|emotionJSX'
       },
     ],
     curly: [2, 'multi-line'],

docs/App/Footer.js

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

docs/App/GitHubButton.js

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

docs/App/Header.js

@@ -1,7 +1,8 @@
 // @flow
-
+/** @jsx jsx */
 import fetch from 'unfetch';
-import React, { Component, type Node } from 'react';
+import { Component, type Node  } from 'react';
+import { jsx } from '@emotion/core';
 import { withRouter } from 'react-router-dom';
 
 import Select from '../../src';

docs/App/PageNav.js

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

docs/App/TwitterButton.js

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

docs/App/components.js

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

docs/ExampleWrapper.js

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

docs/Svg.js

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

docs/Tests.js

@@ -240,7 +240,7 @@ export default function Tests() {
       <div id={'cypress-long-values'}>
         <Select
           id="long-value-select"
-          instsanceId="long-value-select"
+          instanceId="long-value-select"
           classNamePrefix="react-select"
           defaultValue={optionLength[3]}
           options={optionLength}