Upgrades Emotion to v11

JedWatson · Nov 15, 2020 · 9b15f77 · 9b15f77
1 parent 5bee3f4
commit 9b15f77
Show file tree

Hide file tree

Showing 37 changed files with 259 additions and 168 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   plugins: [
-    'emotion',
+    '@emotion',
     ['@babel/plugin-proposal-class-properties', { loose: true }],
     '@babel/plugin-transform-runtime',
   ],

diff --git a/docs/App/Footer.js b/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)';

diff --git a/docs/App/GitHubButton.js b/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 };
 

diff --git a/docs/App/Header.js b/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';

diff --git a/docs/App/PageNav.js b/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';

diff --git a/docs/App/TwitterButton.js b/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' }}>

diff --git a/docs/App/components.js b/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;

diff --git a/docs/ExampleWrapper.js b/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';

diff --git a/docs/Svg.js b/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

diff --git a/docs/examples/Experimental.js b/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';
 

diff --git a/docs/examples/Popout.js b/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';

diff --git a/docs/examples/StyleCompositionExample.js b/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';
 

diff --git a/docs/markdown/renderer.js b/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';

diff --git a/docs/package.json b/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/react": "^11.0.0",
     "babel-loader": "^8.0.0",
-    "babel-plugin-emotion": "^10.0.9",
+    "babel-plugin-emotion": "^11.0.0",
     "chroma-js": "^1.3.6",
     "chrono-node": "^1.3.5",
     "codesandboxer": "^0.1.1",

diff --git a/docs/styled-components.js b/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,

diff --git a/package.json b/package.json
@@ -25,9 +25,9 @@
     "@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/cache": "^11.0.0",
+    "@emotion/react": "^11.0.0",
+    "@emotion/css": "^11.0.0",
     "@preconstruct/cli": "^1.0.0",
     "@testing-library/dom": "7.0.4",
     "@testing-library/jest-dom": "5.1.1",
@@ -37,7 +37,7 @@
     "babel-eslint": "^9.0.0",
     "babel-jest": "^23.6.0",
     "babel-loader": "^8.0.0",
-    "babel-plugin-emotion": "^10.0.9",
+    "@emotion/babel-plugin": "^11.0.0",
     "bolt-check": "^0.3.0",
     "chroma-js": "^1.3.6",
     "chrono-node": "^1.3.5",

diff --git a/packages/react-select/package.json b/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/react": "^11.0.0",
+    "@emotion/css": "^11.0.0",
     "memoize-one": "^5.0.0",
     "prop-types": "^15.6.0",
     "react-input-autosize": "^2.2.2",

diff --git a/packages/react-select/src/NonceProvider.js b/packages/react-select/src/NonceProvider.js
@@ -1,6 +1,6 @@
 // @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';
 

diff --git a/packages/react-select/src/__tests__/__snapshots__/Async.test.js.snap b/packages/react-select/src/__tests__/__snapshots__/Async.test.js.snap
@@ -6,13 +6,17 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
+
+
+
+
 .emotion-7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: hsl(0,0%,100%);
-  border-color: hsl(0,0%,80%);
+  background-color: hsl(0, 0%, 100%);
+  border-color: hsl(0, 0%, 80%);
   border-radius: 4px;
   border-style: solid;
   border-width: 1px;
@@ -21,23 +25,25 @@ exports[`defaults - snapshot 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
   min-height: 38px;
-  outline: 0 !important;
+  outline: 0!important;
   position: relative;
   -webkit-transition: all 100ms;
   transition: all 100ms;
   box-sizing: border-box;
 }
 
+
+
 .emotion-7:hover {
-  border-color: hsl(0,0%,70%);
+  border-color: hsl(0, 0%, 70%);
 }
 
 .emotion-2 {
@@ -52,6 +58,7 @@ exports[`defaults - snapshot 1`] = `
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
+  -webkit-box-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
@@ -63,12 +70,13 @@ exports[`defaults - snapshot 1`] = `
 }
 
 .emotion-0 {
-  color: hsl(0,0%,50%);
+  color: hsl(0, 0%, 50%);
   margin-left: 2px;
   margin-right: 2px;
   position: absolute;
   top: 50%;
   -webkit-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   box-sizing: border-box;
@@ -79,7 +87,7 @@ exports[`defaults - snapshot 1`] = `
   padding-bottom: 2px;
   padding-top: 2px;
   visibility: visible;
-  color: hsl(0,0%,20%);
+  color: hsl(0, 0%, 20%);
   box-sizing: border-box;
 }
 
@@ -105,15 +113,15 @@ exports[`defaults - snapshot 1`] = `
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
-  background-color: hsl(0,0%,80%);
+  background-color: hsl(0, 0%, 80%);
   margin-bottom: 8px;
   margin-top: 8px;
   width: 1px;
   box-sizing: border-box;
 }
 
 .emotion-5 {
-  color: hsl(0,0%,80%);
+  color: hsl(0, 0%, 80%);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -125,7 +133,7 @@ exports[`defaults - snapshot 1`] = `
 }
 
 .emotion-5:hover {
-  color: hsl(0,0%,60%);
+  color: hsl(0, 0%, 60%);
 }
 
 .emotion-4 {

diff --git a/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.js.snap b/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.js.snap
@@ -6,13 +6,17 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
+
+
+
+
 .emotion-7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: hsl(0,0%,100%);
-  border-color: hsl(0,0%,80%);
+  background-color: hsl(0, 0%, 100%);
+  border-color: hsl(0, 0%, 80%);
   border-radius: 4px;
   border-style: solid;
   border-width: 1px;
@@ -21,23 +25,25 @@ exports[`defaults - snapshot 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
   min-height: 38px;
-  outline: 0 !important;
+  outline: 0!important;
   position: relative;
   -webkit-transition: all 100ms;
   transition: all 100ms;
   box-sizing: border-box;
 }
 
+
+
 .emotion-7:hover {
-  border-color: hsl(0,0%,70%);
+  border-color: hsl(0, 0%, 70%);
 }
 
 .emotion-2 {
@@ -52,6 +58,7 @@ exports[`defaults - snapshot 1`] = `
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
+  -webkit-box-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
@@ -63,12 +70,13 @@ exports[`defaults - snapshot 1`] = `
 }
 
 .emotion-0 {
-  color: hsl(0,0%,50%);
+  color: hsl(0, 0%, 50%);
   margin-left: 2px;
   margin-right: 2px;
   position: absolute;
   top: 50%;
   -webkit-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   box-sizing: border-box;
@@ -79,7 +87,7 @@ exports[`defaults - snapshot 1`] = `
   padding-bottom: 2px;
   padding-top: 2px;
   visibility: visible;
-  color: hsl(0,0%,20%);
+  color: hsl(0, 0%, 20%);
   box-sizing: border-box;
 }
 
@@ -105,15 +113,15 @@ exports[`defaults - snapshot 1`] = `
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
-  background-color: hsl(0,0%,80%);
+  background-color: hsl(0, 0%, 80%);
   margin-bottom: 8px;
   margin-top: 8px;
   width: 1px;
   box-sizing: border-box;
 }
 
 .emotion-5 {
-  color: hsl(0,0%,80%);
+  color: hsl(0, 0%, 80%);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -125,7 +133,7 @@ exports[`defaults - snapshot 1`] = `
 }
 
 .emotion-5:hover {
-  color: hsl(0,0%,60%);
+  color: hsl(0, 0%, 60%);
 }
 
 .emotion-4 {