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

Upgrade to Emotion 11 #32216

Closed
wants to merge 9 commits into from
Closed

Upgrade to Emotion 11 #32216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
bc072fd
Upgrade to Emotion 11
sarayourfriend May 4, 2021
c43dd57
Give each cache a unique key
sarayourfriend May 4, 2021
5afba78
Update remaining emotion dependencies
sarayourfriend May 17, 2021
dacdfaa
Update stray bad import
sarayourfriend May 17, 2021
948deb0
Fix emotion/jest serializer specification
sarayourfriend May 17, 2021
b3dae36
Update snapshots and tests to match new serializer style
sarayourfriend May 17, 2021
5e7f874
Update native config
sarayourfriend May 17, 2021
3ff61fd
Add @emotion/react for type dependency
sarayourfriend May 18, 2021
d0d9805
Manual dedupe @emotion/styled
sirreal May 21, 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' ],
};
};
479 changes: 392 additions & 87 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 5 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,11 @@
"@babel/plugin-syntax-jsx": "7.12.13",
"@babel/runtime-corejs3": "7.13.10",
"@babel/traverse": "7.13.0",
"@emotion/native": "10.0.27",
"@emotion/native": "11.0.0",
"@emotion/babel-plugin": "11.3.0",
"@emotion/jest": "11.3.0",
"@emotion/react": "11.4.0",
"@emotion/styled": "11.3.0",
"@octokit/rest": "16.26.0",
"@octokit/webhooks": "7.1.0",
"@storybook/addon-a11y": "6.2.5",
Expand Down Expand Up @@ -146,7 +150,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 @@ -172,7 +175,6 @@
"husky": "3.0.5",
"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: 8px;
}

.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
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Basic rendering should render 1`] = `"<div tabindex=\\"-1\\" class=\\"block-editor-link-control\\"><div class=\\"block-editor-link-control__search-input-wrapper\\"><form><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input css-wdf2ti-Wrapper e1puf3u0\\"><div class=\\"components-base-control__field css-11vcxb9-StyledField e1puf3u1\\"><input required=\\"\\" class=\\"block-editor-url-input__input\\" type=\\"text\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-label=\\"URL\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><div class=\\"block-editor-link-control__search-actions\\"><button type=\\"submit\\" class=\\"components-button block-editor-link-control__search-submit has-icon\\" aria-label=\\"Submit\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2 -2 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M6.734 16.106l2.176-2.38-1.093-1.028-3.846 4.158 3.846 4.157 1.093-1.027-2.176-2.38h2.811c1.125 0 2.25.03 3.374 0 1.428-.001 3.362-.25 4.963-1.277 1.66-1.065 2.868-2.906 2.868-5.859 0-2.479-1.327-4.896-3.65-5.93-1.82-.813-3.044-.8-4.806-.788l-.567.002v1.5c.184 0 .368 0 .553-.002 1.82-.007 2.704-.014 4.21.657 1.854.827 2.76 2.657 2.76 4.561 0 2.472-.973 3.824-2.178 4.596-1.258.807-2.864 1.04-4.163 1.04h-.02c-1.115.03-2.229 0-3.344 0H6.734z\\"></path></svg></button></div></form></div><fieldset class=\\"block-editor-link-control__settings\\"><legend class=\\"components-visually-hidden\\">Currently selected link settings</legend><div class=\\"components-base-control components-toggle-control block-editor-link-control__setting css-wdf2ti-Wrapper e1puf3u0\\"><div class=\\"components-base-control__field css-11vcxb9-StyledField e1puf3u1\\"><span class=\\"components-form-toggle\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Open in new tab</label></div></div></fieldset></div>"`;
exports[`Basic rendering should render 1`] = `"<div tabindex=\\"-1\\" class=\\"block-editor-link-control\\"><div class=\\"block-editor-link-control__search-input-wrapper\\"><form><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input css-wdf2ti-Wrapper e1puf3u3\\"><div class=\\"components-base-control__field css-11vcxb9-StyledField e1puf3u2\\"><input required=\\"\\" class=\\"block-editor-url-input__input\\" type=\\"text\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-label=\\"URL\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><div class=\\"block-editor-link-control__search-actions\\"><button type=\\"submit\\" class=\\"components-button block-editor-link-control__search-submit has-icon\\" aria-label=\\"Submit\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2 -2 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M6.734 16.106l2.176-2.38-1.093-1.028-3.846 4.158 3.846 4.157 1.093-1.027-2.176-2.38h2.811c1.125 0 2.25.03 3.374 0 1.428-.001 3.362-.25 4.963-1.277 1.66-1.065 2.868-2.906 2.868-5.859 0-2.479-1.327-4.896-3.65-5.93-1.82-.813-3.044-.8-4.806-.788l-.567.002v1.5c.184 0 .368 0 .553-.002 1.82-.007 2.704-.014 4.21.657 1.854.827 2.76 2.657 2.76 4.561 0 2.472-.973 3.824-2.178 4.596-1.258.807-2.864 1.04-4.163 1.04h-.02c-1.115.03-2.229 0-3.344 0H6.734z\\"></path></svg></button></div></form></div><fieldset class=\\"block-editor-link-control__settings\\"><legend class=\\"components-visually-hidden\\">Currently selected link settings</legend><div class=\\"components-base-control components-toggle-control block-editor-link-control__setting css-wdf2ti-Wrapper e1puf3u3\\"><div class=\\"components-base-control__field css-11vcxb9-StyledField e1puf3u2\\"><span class=\\"components-form-toggle\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Open in new tab</label></div></div></fieldset></div>"`;
11 changes: 6 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,12 @@
],
"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/core": "^11.0.0",
"@emotion/css": "^11.1.3",
"@emotion/native": "^11.0.0",
"@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 +53,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/css';

/**
* 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/css';

/**
* Internal dependencies
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/css';
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/css';
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/css';
import styled from '@emotion/styled';

/**
Expand Down
28 changes: 14 additions & 14 deletions packages/components/src/color-picker/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,10 +96,10 @@ Snapshot Diff:
</div>
@@ -119,22 +119,22 @@
<div
className="components-base-control__field css-11vcxb9-StyledField e1puf3u1"
className="components-base-control__field css-11vcxb9-StyledField e1puf3u2"
>
<label
className="components-base-control__label css-pezhm9-StyledLabel e1puf3u2"
className="components-base-control__label css-pezhm9-StyledLabel e1puf3u1"
- htmlFor="inspector-text-control-4"
+ htmlFor="inspector-text-control-3"
>
Expand Down Expand Up @@ -218,10 +218,10 @@ Snapshot Diff:
</div>
@@ -119,22 +119,22 @@
<div
className="components-base-control__field css-11vcxb9-StyledField e1puf3u1"
className="components-base-control__field css-11vcxb9-StyledField e1puf3u2"
>
<label
className="components-base-control__label css-pezhm9-StyledLabel e1puf3u2"
className="components-base-control__label css-pezhm9-StyledLabel e1puf3u1"
- htmlFor="inspector-text-control-8"
+ htmlFor="inspector-text-control-7"
>
Expand Down Expand Up @@ -340,10 +340,10 @@ Snapshot Diff:
</div>
@@ -119,22 +119,22 @@
<div
className="components-base-control__field css-11vcxb9-StyledField e1puf3u1"
className="components-base-control__field css-11vcxb9-StyledField e1puf3u2"
>
<label
className="components-base-control__label css-pezhm9-StyledLabel e1puf3u2"
className="components-base-control__label css-pezhm9-StyledLabel e1puf3u1"
- htmlFor="inspector-text-control-10"
+ htmlFor="inspector-text-control-9"
>
Expand Down Expand Up @@ -462,10 +462,10 @@ Snapshot Diff:
</div>
@@ -119,22 +119,22 @@
<div
className="components-base-control__field css-11vcxb9-StyledField e1puf3u1"
className="components-base-control__field css-11vcxb9-StyledField e1puf3u2"
>
<label
className="components-base-control__label css-pezhm9-StyledLabel e1puf3u2"
className="components-base-control__label css-pezhm9-StyledLabel e1puf3u1"
- htmlFor="inspector-text-control-6"
+ htmlFor="inspector-text-control-5"
>
Expand Down Expand Up @@ -547,10 +547,10 @@ Snapshot Diff:
</div>
@@ -119,22 +119,22 @@
<div
className="components-base-control__field css-11vcxb9-StyledField e1puf3u1"
className="components-base-control__field css-11vcxb9-StyledField e1puf3u2"
>
<label
className="components-base-control__label css-pezhm9-StyledLabel e1puf3u2"
className="components-base-control__label css-pezhm9-StyledLabel e1puf3u1"
- htmlFor="inspector-text-control-2"
+ htmlFor="inspector-text-control-1"
>
Expand All @@ -574,7 +574,7 @@ Snapshot Diff:
`;

exports[`ColorPicker should render color picker 1`] = `
.emotion-4 {
.emotion-0 {
font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
font-size: 13px;
}
Expand All @@ -587,7 +587,7 @@ exports[`ColorPicker should render color picker 1`] = `
margin-bottom: inherit;
}

.emotion-0 {
.emotion-4 {
display: inline-block;
margin-bottom: 8px;
}
Expand Down Expand Up @@ -708,13 +708,13 @@ exports[`ColorPicker should render color picker 1`] = `
className="components-color-picker__inputs-fields"
>
<div
className="components-base-control components-color-picker__inputs-field emotion-4 emotion-5"
className="components-base-control components-color-picker__inputs-field emotion-0 emotion-1"
>
<div
className="components-base-control__field emotion-2 emotion-3"
>
<label
className="components-base-control__label emotion-0 emotion-1"
className="components-base-control__label emotion-4 emotion-5"
htmlFor="inspector-text-control-0"
>
Color value in hexadecimal
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/divider/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { css, cx } from 'emotion';
import { css, cx } from '@emotion/css';
// eslint-disable-next-line no-restricted-imports
import { Separator } from 'reakit';
// eslint-disable-next-line no-restricted-imports, no-duplicate-imports
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/divider/styles.ts
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
8 changes: 4 additions & 4 deletions packages/components/src/divider/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`props should render correctly 1`] = `
.emotion-0 {
border-color: rgba(0,0,0,0.1);
border-color: rgba(0, 0, 0, 0.1);
border-width: 0 0 1px 0;
height: 0;
margin: 0;
Expand All @@ -25,7 +25,7 @@ Snapshot Diff:

@@ -2,10 +2,8 @@
Object {
"border-color": "rgba(0,0,0,0.1)",
"border-color": "rgba(0, 0, 0, 0.1)",
"border-width": "0 0 1px 0",
"height": "0",
"margin": "0",
Expand All @@ -43,7 +43,7 @@ Snapshot Diff:

@@ -2,9 +2,8 @@
Object {
"border-color": "rgba(0,0,0,0.1)",
"border-color": "rgba(0, 0, 0, 0.1)",
"border-width": "0 0 1px 0",
"height": "0",
"margin": "0",
Expand All @@ -60,7 +60,7 @@ Snapshot Diff:

@@ -2,9 +2,8 @@
Object {
"border-color": "rgba(0,0,0,0.1)",
"border-color": "rgba(0, 0, 0, 0.1)",
"border-width": "0 0 1px 0",
"height": "0",
"margin": "0",
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/elevation/hook.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { css, cx } from 'emotion';
import { css, cx } from '@emotion/css';
import { isNil } from 'lodash';

/**
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/elevation/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';

export const Elevation = css`
background: transparent;
Expand Down
Loading