Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Upgrade to Emotion 11 #32930

Merged
merged 21 commits into from
Jun 24, 2021
Merged

Upgrade to Emotion 11 #32930

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
2cb228f
Upgrade to Emotion 11
sarayourfriend May 4, 2021
1984d4a
Give each cache a unique key
sarayourfriend May 4, 2021
26b423c
Update remaining emotion dependencies
sarayourfriend May 17, 2021
5250b78
Update stray bad import
sarayourfriend May 17, 2021
22506e1
Fix emotion/jest serializer specification
sarayourfriend May 17, 2021
de31d0a
Update snapshots and tests to match new serializer style
sarayourfriend May 17, 2021
97c36d5
Update native config
sarayourfriend May 17, 2021
686b02c
Add @emotion/react for type dependency
sarayourfriend May 18, 2021
d0861bc
Manual dedupe @emotion/styled
sirreal May 21, 2021
5a35d05
Clean dependencies
scinos May 25, 2021
041f9c5
Update snapshots
scinos Jun 22, 2021
2998be1
Fix usages of emotion 10
scinos Jun 22, 2021
c998a04
Update snapshot
scinos Jun 22, 2021
b310a2e
Update card to use emotion 11
sarayourfriend Jun 23, 2021
62ca46e
Update snapshots
sarayourfriend Jun 23, 2021
acef0fe
Remove explicit @emotion/core dependency
sarayourfriend Jun 24, 2021
0ab3bd3
Remove complex logic by just updating the declared plugins directly
sarayourfriend Jun 24, 2021
7b17a6b
Update snapshots
sarayourfriend Jun 24, 2021
0e494d7
Prevent collisions
sarayourfriend Jun 24, 2021
04e90c2
Hoist emotion/native dependency to global package.json
sarayourfriend Jun 24, 2021
2933d17
Fix errant @emotion/css imports that should have been @emotion/react
sarayourfriend Jun 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion babel.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' ],
};
};
491 changes: 396 additions & 95 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand Down
10 changes: 5 additions & 5 deletions packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
9 changes: 4 additions & 5 deletions packages/components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion ...es/components/src/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* External dependencies
*/
import styled from '@emotion/styled';
import { css } from '@emotion/core';
import { css } from '@emotion/react';

/**
* Internal dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* External dependencies
*/
import styled from '@emotion/styled';
import { css } from '@emotion/core';
import { css } from '@emotion/react';

/**
* Internal dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/base-field/hook.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { cx } from 'emotion';
import { cx } from '@emotion/css';

/**
* WordPress dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/base-field/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { css } from 'emotion';
import { css } from '@emotion/css';

/**
* Internal dependencies
Expand Down
17 changes: 8 additions & 9 deletions packages/components/src/base-field/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -45,6 +45,7 @@ Snapshot Diff:
- "width": "auto",
+ "width": "100%",
},
Object {},
]
`;

Expand All @@ -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",
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}
}
Expand All @@ -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];
}

Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/box-control/styles/box-control-icon-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/box-control/styles/box-control-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { css } from '@emotion/core';
import { css } from '@emotion/react';
import styled from '@emotion/styled';
/**
* Internal dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/box-control/styles/box-control-visualizer-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { css } from '@emotion/core';
import { css } from '@emotion/react';
import styled from '@emotion/styled';

/**
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/card/card-body/hook.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { cx } from 'emotion';
import { cx } from '@emotion/css';

/**
* WordPress dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/card/card-divider/hook.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { cx } from 'emotion';
import { cx } from '@emotion/css';

/**
* WordPress dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/card/card-footer/hook.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { cx } from 'emotion';
import { cx } from '@emotion/css';

/**
* WordPress dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/card/card-header/hook.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { cx } from 'emotion';
import { cx } from '@emotion/css';

/**
* WordPress dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/card/card-media/hook.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { cx } from 'emotion';
import { cx } from '@emotion/css';

/**
* WordPress dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/card/card/component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { css } from 'emotion';
import { css } from '@emotion/css';

/**
* WordPress dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/card/card/hook.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { cx } from 'emotion';
import { cx } from '@emotion/css';

/**
* WordPress dependencies
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/card/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { css } from 'emotion';
import { css } from '@emotion/css';

/**
* Internal dependencies
Expand Down
Loading