Upgrade to Emotion 11 (#32930)

* Upgrade to Emotion 11 * Give each cache a unique key * Update remaining emotion dependencies * Update stray bad import * Fix emotion/jest serializer specification * Update snapshots and tests to match new serializer style * Update native config * Add @emotion/react for type dependency * Manual dedupe @emotion/styled * Clean dependencies * Update snapshots * Fix usages of emotion 10 * Update snapshot * Update card to use emotion 11 * Update snapshots * Remove explicit @emotion/core dependency * Remove complex logic by just updating the declared plugins directly * Update snapshots * Prevent collisions * Hoist emotion/native dependency to global package.json * Fix errant @emotion/css imports that should have been @emotion/react Co-authored-by: Jon Surrell <[email protected]> Co-authored-by: Sergio Cinos <[email protected]>
WordPress · Jun 24, 2021 · 9d14cdf · 9d14cdf
1 parent 761f983
commit 9d14cdf
Show file tree

Hide file tree

Showing 97 changed files with 1,021 additions and 672 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -3,6 +3,6 @@ module.exports = ( api ) => {
 
 	return {
 		presets: [ '@wordpress/babel-preset-default' ],
-		plugins: [ 'babel-plugin-emotion', 'babel-plugin-inline-json-import' ],
+		plugins: [ '@emotion/babel-plugin', 'babel-plugin-inline-json-import' ],
 	};
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -89,7 +89,9 @@
 		"@babel/plugin-syntax-jsx": "7.12.13",
 		"@babel/runtime-corejs3": "7.13.10",
 		"@babel/traverse": "7.13.0",
-		"@emotion/native": "10.0.27",
+		"@emotion/babel-plugin": "11.3.0",
+		"@emotion/jest": "11.3.0",
+		"@emotion/native": "^11.0.0",
 		"@octokit/rest": "16.26.0",
 		"@octokit/webhooks": "7.1.0",
 		"@storybook/addon-a11y": "6.2.5",
@@ -147,7 +149,6 @@
 		"appium": "1.20.2",
 		"babel-jest": "26.6.3",
 		"babel-loader": "8.2.2",
-		"babel-plugin-emotion": "10.2.2",
 		"babel-plugin-inline-json-import": "0.3.2",
 		"babel-plugin-react-native-classname-to-style": "1.2.2",
 		"babel-plugin-react-native-platform-specific-extensions": "1.1.1",
@@ -174,7 +175,6 @@
 		"husky": "6.0.0",
 		"inquirer": "7.1.0",
 		"jest": "26.6.3",
-		"jest-emotion": "10.0.32",
 		"jest-junit": "11.0.0",
 		"jest-serializer-enzyme": "1.0.0",
 		"jest-watch-typeahead": "0.6.1",

diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -1,24 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ColorPaletteControl matches the snapshot 1`] = `
-.emotion-2 {
+.emotion-0 {
   font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
 }
 
-.emotion-0 {
+.emotion-2 {
   margin-bottom: calc(4px * 2);
 }
 
-.components-panel__row .emotion-0 {
+.components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
 
 <div
-  className="components-base-control block-editor-color-gradient-control emotion-2 emotion-3"
+  className="components-base-control block-editor-color-gradient-control emotion-0 emotion-1"
 >
   <div
-    className="components-base-control__field emotion-0 emotion-1"
+    className="components-base-control__field emotion-2 emotion-3"
   >
     <fieldset>
       <legend>

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -30,10 +30,10 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.13.10",
-		"@emotion/cache": "^10.0.27",
-		"@emotion/core": "^10.1.1",
-		"@emotion/css": "^10.0.22",
-		"@emotion/styled": "^10.0.23",
+		"@emotion/cache": "^11.1.3",
+		"@emotion/css": "^11.1.3",
+		"@emotion/react": "^11.1.5",
+		"@emotion/styled": "^11.3.0",
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/compose": "file:../compose",
 		"@wordpress/date": "file:../date",
@@ -51,7 +51,6 @@
 		"classnames": "^2.2.5",
 		"dom-scroll-into-view": "^1.2.1",
 		"downshift": "^6.0.15",
-		"emotion": "^10.0.23",
 		"gradient-parser": "^0.1.5",
 		"highlight-words-core": "^1.2.2",
 		"lodash": "^4.17.21",

diff --git a/...es/components/src/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.js b/...es/components/src/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 /**
  * Internal dependencies

diff --git a/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js b/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 /**
  * Internal dependencies

diff --git a/packages/components/src/base-field/hook.js b/packages/components/src/base-field/hook.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 
 /**
  * WordPress dependencies

diff --git a/packages/components/src/base-field/styles.js b/packages/components/src/base-field/styles.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 /**
  * Internal dependencies

diff --git a/packages/components/src/base-field/test/__snapshots__/index.js.snap b/packages/components/src/base-field/test/__snapshots__/index.js.snap
@@ -5,7 +5,7 @@ Snapshot Diff:
 - Received styles
 + Base styles
 
-@@ -12,11 +12,11 @@
+@@ -11,11 +11,11 @@
       "-webkit-justify-content": "space-between",
       "-webkit-transition": "border-color 100ms ease",
       "align-items": "center",
@@ -25,7 +25,7 @@ Snapshot Diff:
 - Received styles
 + Base styles
 
-@@ -15,18 +15,17 @@
+@@ -14,19 +14,18 @@
       "background": "#fff",
       "border": "1px solid",
       "border-color": "#757575",
@@ -45,6 +45,7 @@ Snapshot Diff:
 -     "width": "auto",
 +     "width": "100%",
     },
+    Object {},
   ]
 `;
 
@@ -53,7 +54,7 @@ Snapshot Diff:
 - Received styles
 + Base styles
 
-@@ -11,11 +11,10 @@
+@@ -10,11 +10,10 @@
       "-webkit-flex-direction": "row",
       "-webkit-justify-content": "space-between",
       "-webkit-transition": "border-color 100ms ease",
@@ -82,7 +83,6 @@ exports[`base field should render correctly 1`] = `
   flex-direction: row;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
   width: 100%;
   background: #fff;
@@ -106,17 +106,16 @@ exports[`base field should render correctly 1`] = `
   width: 100%;
 }
 
-.emotion-0 > * + *:not(marquee) {
+.emotion-0>*+*:not(marquee) {
   margin-left: calc(4px * 2);
 }
 
-.emotion-0 > * {
+.emotion-0>* {
   min-width: 0;
 }
 
-@media ( prefers-reduced-motion:reduce ) {
+@media ( prefers-reduced-motion: reduce ) {
   .emotion-0 {
-    -webkit-transition-duration: 0ms;
     transition-duration: 0ms;
   }
 }
@@ -131,7 +130,7 @@ exports[`base field should render correctly 1`] = `
 
 .emotion-0:focus,
 .emotion-0[data-focused='true'] {
-  border-color: var( --wp-admin-theme-color,#00669b);
+  border-color: var( --wp-admin-theme-color, #00669b);
   box-shadow: 0 0 0,0.5px,[object Object];
 }
 

diff --git a/packages/components/src/box-control/styles/box-control-icon-styles.js b/packages/components/src/box-control/styles/box-control-icon-styles.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 export const Root = styled.span`

diff --git a/packages/components/src/box-control/styles/box-control-styles.js b/packages/components/src/box-control/styles/box-control-styles.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 /**
  * Internal dependencies

diff --git a/packages/components/src/box-control/styles/box-control-visualizer-styles.js b/packages/components/src/box-control/styles/box-control-visualizer-styles.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 /**

diff --git a/packages/components/src/card/card-body/hook.js b/packages/components/src/card/card-body/hook.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 
 /**
  * WordPress dependencies

diff --git a/packages/components/src/card/card-divider/hook.js b/packages/components/src/card/card-divider/hook.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 
 /**
  * WordPress dependencies

diff --git a/packages/components/src/card/card-footer/hook.js b/packages/components/src/card/card-footer/hook.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 
 /**
  * WordPress dependencies

diff --git a/packages/components/src/card/card-header/hook.js b/packages/components/src/card/card-header/hook.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 
 /**
  * WordPress dependencies

diff --git a/packages/components/src/card/card-media/hook.js b/packages/components/src/card/card-media/hook.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 
 /**
  * WordPress dependencies

diff --git a/packages/components/src/card/card/component.js b/packages/components/src/card/card/component.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 /**
  * WordPress dependencies

diff --git a/packages/components/src/card/card/hook.js b/packages/components/src/card/card/hook.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 
 /**
  * WordPress dependencies

diff --git a/packages/components/src/card/styles.js b/packages/components/src/card/styles.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 /**
  * Internal dependencies