Upgrades Emotion to v11

.changeset/olive-toys-try.md

@@ -0,0 +1,8 @@
+---
+'@react-select/docs': major
+'react-select': major
+---
+
+Upgrades Emotion dependency to v11.0.0
+
+BREAKING CHANGE: The NonceProvider component now requires a `cacheKey` prop that corresponds to the `key` for the Emotion cache.

babel.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: [
-    'emotion',
+    '@emotion/babel-plugin',
     ['@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';
 

docs/examples/Popout.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { Component } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button';
 
 import Select from 'react-select';

docs/examples/StyleCompositionExample.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import Select from 'react-select';
 import { colourOptions } from '../data';
 

docs/markdown/renderer.js

@@ -1,7 +1,7 @@
 // @flow
 /** @jsx emotionJSX */
 import md from 'react-markings';
-import { jsx as emotionJSX } from '@emotion/core'; // eslint-disable-line no-unused-vars
+import { jsx as emotionJSX } from '@emotion/react'; // eslint-disable-line no-unused-vars
 import { Link as RRLink } from 'react-router-dom';
 
 import Svg from '../Svg';

docs/package.json

@@ -17,9 +17,9 @@
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/runtime": "^7.4.4",
-    "@emotion/core": "^10.0.9",
+    "@emotion/babel-plugin": "^11.0.0",
+    "@emotion/react": "^11.1.1",
     "babel-loader": "^8.0.0",
-    "babel-plugin-emotion": "^10.0.9",
     "chroma-js": "^1.3.6",
     "chrono-node": "^1.3.5",
     "codesandboxer": "^0.1.1",

docs/styled-components.js

@@ -1,6 +1,6 @@
 // @flow
 /** @jsx emotionJSX */
-import { jsx as emotionJSX } from '@emotion/core';
+import { jsx as emotionJSX } from '@emotion/react';
 
 import SyntaxHighlighter, {
   registerLanguage,

package.json

@@ -25,9 +25,11 @@
     "@babel/runtime": "^7.4.4",
     "@changesets/cli": "^2.0.3",
     "@changesets/get-github-info": "^0.2.1",
-    "@emotion/cache": "^10.0.9",
-    "@emotion/core": "^10.0.9",
-    "@emotion/css": "^10.0.9",
+    "@emotion/babel-plugin": "^11.0.0",
+    "@emotion/cache": "^11.0.0",
+    "@emotion/css": "^11.0.0",
+    "@emotion/jest": "^11.1.0",
+    "@emotion/react": "^11.1.1",
     "@preconstruct/cli": "^1.0.0",
     "@testing-library/dom": "7.0.4",
     "@testing-library/jest-dom": "5.1.1",
@@ -37,7 +39,6 @@
     "babel-eslint": "^9.0.0",
     "babel-jest": "^23.6.0",
     "babel-loader": "^8.0.0",
-    "babel-plugin-emotion": "^10.0.9",
     "bolt-check": "^0.3.0",
     "chroma-js": "^1.3.6",
     "chrono-node": "^1.3.5",
@@ -60,7 +61,6 @@
     "gh-pages": "^1.1.0",
     "html-webpack-plugin": "^3.2.0",
     "jest": "^25.1.0",
-    "jest-emotion": "^10.0.11",
     "jest-in-case": "^1.0.2",
     "memoize-one": "^5.0.0",
     "moment": "^2.20.1",
@@ -133,7 +133,7 @@
       "./test-setup.js"
     ],
     "snapshotSerializers": [
-      "jest-emotion"
+      "@emotion/jest/serializer"
     ]
   },
   "workspaces": [

packages/react-select/package.json

@@ -10,9 +10,9 @@
   "repository": "https://github.com/JedWatson/react-select/tree/master/packages/react-select",
   "dependencies": {
     "@babel/runtime": "^7.4.4",
-    "@emotion/cache": "^10.0.9",
-    "@emotion/core": "^10.0.9",
-    "@emotion/css": "^10.0.9",
+    "@emotion/cache": "^11.0.0",
+    "@emotion/css": "^11.0.0",
+    "@emotion/react": "^11.1.1",
     "memoize-one": "^5.0.0",
     "prop-types": "^15.6.0",
     "react-input-autosize": "^3.0.0",

packages/react-select/src/NonceProvider.js

@@ -1,24 +1,28 @@
 // @flow
 import React, { Component, type Node } from 'react';
-import { CacheProvider } from '@emotion/core';
+import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import memoizeOne from 'memoize-one';
 
 type NonceProviderProps = {
   nonce: string,
   children: Node,
+  cacheKey: string,
 };
 
 export default class NonceProvider extends Component<NonceProviderProps> {
   constructor(props: NonceProviderProps) {
     super(props);
     this.createEmotionCache = memoizeOne(this.createEmotionCache);
   }
-  createEmotionCache = (nonce: string) => {
-    return createCache({ nonce });
+  createEmotionCache = (nonce: string, key: string) => {
+    return createCache({ nonce, key });
   };
   render() {
-    const emotionCache = this.createEmotionCache(this.props.nonce);
+    const emotionCache = this.createEmotionCache(
+      this.props.nonce,
+      this.props.cacheKey
+    );
     return (
       <CacheProvider value={emotionCache}>{this.props.children}</CacheProvider>
     );

packages/react-select/src/__tests__/Select.test.js

@@ -12,7 +12,7 @@ import {
 } from './constants';
 import Select from '../Select';
 
-import { matchers } from 'jest-emotion';
+import { matchers } from '@emotion/jest';
 
 expect.extend(matchers);