Migration to Emotion 11 #17640

Andarist · 2022-03-06T21:10:57Z

Issue:

What I did

How to test

Is this testable with Jest or Chromatic screenshots?
Does this need a new example in the kitchen sink apps?
Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

nx-cloud · 2022-03-06T21:10:59Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit a263bf7. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

✅ Successfully ran 1 target

nx run-many --target=prepare --all --parallel --max-parallel=15 -- --optimized

Sent with 💌 from NxCloud.

# Conflicts: # addons/docs/package.json # addons/storyshots/storyshots-core/package.json # lib/ui/src/containers/menu.tsx # yarn.lock

…once

lib/theming/src/index.ts

ndelangen · 2022-03-21T14:45:37Z

amazing work, what's left to do?

Andarist · 2022-03-30T08:37:53Z

I got to the bottom of those changes in the baselines.

TLDR - there was probably a parsing bug in Stylis v3 (or in @emotion/stylis) and the previous version was incorrect. The new one is actually correct, both on the technical level and also visually.

Those styles here were producing this css~ string:

&&{border-collapse:collapse;border-spacing:0;color:#FFFFFF;td, th{padding:0;border:none;vertical-align:top;text-overflow:ellipsis;}font-size:13px;line-height:20px;text-align:left;width:100%;margin-top:25px;margin-bottom:40px;thead th:first-of-type, td:first-of-type{width:25%;}th:first-of-type, td:first-of-type{padding-left:20px;}th:nth-of-type(2), td:nth-of-type(2){width:35%;}td:nth-of-type(3){width:15%;}th:last-of-type, td:last-of-type{padding-right:20px;width:25%;}th{color:rgba(255,255,255,0.55);padding-top:10px;padding-bottom:10px;padding-left:15px;padding-right:15px;}td{padding-top:10px;padding-bottom:10px;&:not(:first-of-type){padding-left:15px;padding-right:15px;}&:last-of-type{padding-right:20px;}}margin-left:1px;margin-right:1px;tr:first-child/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */{td:first-child/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */, th:first-child/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */{border-top-left-radius:4px;}td:last-child/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */, th:last-child/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */{border-top-right-radius:4px;}}tr:last-child/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */{td:first-child/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */, th:first-child/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */{border-bottom-left-radius:4px;}td:last-child/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */, th:last-child/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */{border-bottom-right-radius:4px;}}tbody{box-shadow:rgba(0, 0, 0, 0.20) 0 2px 5px 1px,
          rgba(255,255,255,0.15) 0 0 0 1px;border-radius:4px;@media not all and (min-resolution:.001dpcm){@supports (-webkit-appearance:none){border-width:1px;border-style:solid;border-color:rgba(255,255,255,0.15);}}tr{background:transparent;overflow:hidden;&:not(:first-child/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */){border-top-width:1px;border-top-style:solid;border-top-color:#404040;}}td{background:#333333;}}}th span, td span, td button{display:inline;background-color:rgba(255,255,255,.1);animation:animation-r0iffl 1.5s ease-in-out infinite;color:transparent;box-shadow:none;border-radius:0;}

In here basically, the whole block is wrapped with && { ... }, so everything inside should produce rules with a "double scope". However, with Emotion 10 we got such a rule out of this:

.css-1eaai6p td:last-child,.css-1eaai6p th:last-child{border-top-right-radius:4px;}

We can notice that it doesn't contain the double scope which is definitely not correct. From the very same string the new version produces such a rule:

.css-1eaai6p.css-1eaai6p tr:last-child td:last-child,.css-1eaai6p.css-1eaai6p tr:last-child th:last-child{border-bottom-right-radius:4px;}

We can also notice that the old one has only a single :last-child whereas the correct one has :last-child :last-child in it.

This caused a minor visual bug in the old version and that was fixed with this dependency upgrade.

A funny thing is that if I either:

prettify this CSS string
OR remove "ignoreSsrWarning" comments

then the whole thing parses correctly with the old version. So there was definitely some edge-case bug in the parsing there.

ndelangen · 2022-03-30T13:55:35Z

I think this replaces this PR: #13300

Andarist · 2022-03-31T08:00:52Z

addons/storyshots/storyshots-core/stories/storyshot.enzyme.test.js

 import initStoryshots from '../dist/ts3.9';

 initStoryshots({
  framework: 'react',
  configPath: path.join(__dirname, '..', '.storybook'),
  renderer: mount,
-  snapshotSerializers: [enzymeSerializer(), emotionSerializer()],


This was creating an infinite loop because the emotion serializer is already used in the root jest.config.js and this config was merged with this one here. As the result - 2 emotion serializers were applied here and this messed them up.

More details can be found here:
emotion-js/emotion#2704

app/angular/src/server/framework-preset-angular-cli.test.ts

Andarist · 2022-03-31T08:02:32Z

examples/react-ts/src/__snapshots__/storyshots.test.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`Storyshots Demo/AccountForm Standard 1`] = `
-.emotion-15 {
+.emotion-0 {


those snapshots just have different generated "indices" for those masked class names

lib/components/src/controls/Object.tsx

Andarist · 2022-03-31T08:06:20Z

lib/theming/src/emotion10types.ts

@@ -0,0 +1,266 @@
+import { Interpolation } from '@emotion/react';


it's basically just a copy-paste (adjusted one) from @emotion/styled@10

I added a little note telling us to remove this when releasing 7.0

shilman

So exciting!! A couple bits

lib/cli/src/versions.ts

lib/components/src/controls/Object.tsx

# Conflicts: # addons/storyshots/storyshots-core/package.json # examples/official-storybook/package.json # lib/cli/src/versions.ts # yarn.lock

…tion11 # Conflicts: # addons/storyshots/storyshots-core/package.json # lib/cli/src/versions.ts # yarn.lock

ndelangen · 2022-04-07T07:09:37Z

lib/theming/src/index.ts


 import { Theme } from './types';

-export { CacheProvider };


@Andarist I think this CacheProvider export is now removed, can we add this back?

actually, never mind it IS exported on line 13!

ndelangen · 2022-04-07T07:12:31Z

lib/theming/src/index.ts


 import { Theme } from './types';

-export { CacheProvider };


actually, never mind it IS exported on line 13!

ndelangen · 2022-04-07T07:13:16Z

I'll merge as soon as CI is green(-ish)

ndelangen · 2022-04-07T07:22:03Z

going to ignore this error:

[vite]: Rollup failed to resolve import "react-dom/client" from "node_modules/@storybook/react/dist/esm/client/preview/render.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
build.rollupOptions.external

for not, since @IanVS is fixing that issue (caused by #17215)

Update Emotion deps

50b1731

Andarist added 3 commits March 9, 2022 07:58

Copy over Emotion 10 styles

c2b6cd0

Fix types for theme-related APIs

e9dfab4

Merge branch 'next' into emotion11

1d761c2

# Conflicts: # addons/docs/package.json # addons/storyshots/storyshots-core/package.json # lib/ui/src/containers/menu.tsx # yarn.lock

Andarist added the dependencies label Mar 18, 2022

Andarist added 2 commits March 18, 2022 22:59

update snapshots

18a8e84

Fixed an issue with some snapshotSerializers being applied more than …

729a870

…once

ndelangen self-requested a review March 21, 2022 14:43

ndelangen reviewed Mar 21, 2022

View reviewed changes

lib/theming/src/index.ts Outdated Show resolved Hide resolved

Andarist mentioned this pull request Mar 30, 2022

UI: Upgrade to Emotion 11 #13300

Closed

Andarist added 2 commits March 31, 2022 09:42

Merge branch 'next' into emotion11

2c16154

Add a TODO comment

ccbb7f4

Andarist commented Mar 31, 2022

View reviewed changes

app/angular/src/server/framework-preset-angular-cli.test.ts Show resolved Hide resolved

Andarist commented Mar 31, 2022

View reviewed changes

lib/components/src/controls/Object.tsx Show resolved Hide resolved

Andarist commented Mar 31, 2022

View reviewed changes

Andarist changed the title ~~[WIP] Migration to Emotion 11~~ Migration to Emotion 11 Mar 31, 2022

ciampo mentioned this pull request Mar 31, 2022

Refactor storybook config Automattic/wp-calypso#55997

Merged

Andarist marked this pull request as ready for review March 31, 2022 08:07

ciampo mentioned this pull request Mar 31, 2022

Upgrade to Emotion 11 WordPress/gutenberg#32930

Merged

7 tasks

Merge branch 'next' into emotion11

8b1f7bd

Andarist requested a review from ndelangen March 31, 2022 08:31

ndelangen and others added 3 commits March 31, 2022 12:41

Merge branch 'next' into emotion11

ca1b4b6

Merge branch 'next' into emotion11

54520ee

Merge branch 'next' into emotion11

030b20c

shilman reviewed Apr 4, 2022

View reviewed changes

lib/cli/src/versions.ts Outdated Show resolved Hide resolved

lib/components/src/controls/Object.tsx Show resolved Hide resolved

Andarist added 3 commits April 5, 2022 13:52

Merge branch 'next' into emotion11

fc7fd5e

# Conflicts: # addons/storyshots/storyshots-core/package.json # examples/official-storybook/package.json # lib/cli/src/versions.ts # yarn.lock

make useTheme generic again to avoid a breaking change

e7d45b8

update snapshot

1c16897

ndelangen mentioned this pull request Apr 7, 2022

[Deps] Update emotion #16177

Closed

ndelangen added 2 commits April 7, 2022 08:38

Merge branch 'next' into emotion11

bf47ce5

# Conflicts: # addons/storyshots/storyshots-core/package.json # examples/official-storybook/package.json # lib/cli/src/versions.ts # yarn.lock

Merge branch 'emotion11' of github.com:storybookjs/storybook into emo…

5b75d9b

…tion11 # Conflicts: # addons/storyshots/storyshots-core/package.json # lib/cli/src/versions.ts # yarn.lock

ndelangen assigned ndelangen and Andarist Apr 7, 2022

ndelangen added 3 commits April 7, 2022 08:45

corrections on versions

853d2d9

Merge branch 'next' into emotion11

1572813

fix versions.ts

a263bf7

ndelangen requested changes Apr 7, 2022

View reviewed changes

ndelangen approved these changes Apr 7, 2022

View reviewed changes

lib/theming/src/index.ts

import { Theme } from './types';

export { CacheProvider };

Copy link

Member

ndelangen Apr 7, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

actually, never mind it IS exported on line 13!

ndelangen merged commit 4418703 into next Apr 7, 2022

ndelangen deleted the emotion11 branch April 7, 2022 07:26

drianoaz mentioned this pull request Apr 7, 2022

stitches component "Types of property 'css' are incompatible." error occurred when storybook is installed stitchesjs/stitches#897

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migration to Emotion 11 #17640

Migration to Emotion 11 #17640

Andarist commented Mar 6, 2022 •

edited by ndelangen

nx-cloud bot commented Mar 6, 2022 •

edited

ndelangen commented Mar 21, 2022

Andarist commented Mar 30, 2022

ndelangen commented Mar 30, 2022

Andarist Mar 31, 2022

Andarist Mar 31, 2022

Andarist Mar 31, 2022 •

edited

ndelangen Apr 7, 2022 •

edited

shilman left a comment

ndelangen Apr 7, 2022

ndelangen Apr 7, 2022

ndelangen Apr 7, 2022

ndelangen commented Apr 7, 2022

ndelangen commented Apr 7, 2022

		@@ -0,0 +1,266 @@
		import { Interpolation } from '@emotion/react';

Migration to Emotion 11 #17640

Migration to Emotion 11 #17640

Conversation

Andarist commented Mar 6, 2022 • edited by ndelangen

What I did

How to test

nx-cloud bot commented Mar 6, 2022 • edited

☁️ Nx Cloud Report

ndelangen commented Mar 21, 2022

Andarist commented Mar 30, 2022

ndelangen commented Mar 30, 2022

Andarist Mar 31, 2022

Choose a reason for hiding this comment

Andarist Mar 31, 2022

Choose a reason for hiding this comment

Andarist Mar 31, 2022 • edited

Choose a reason for hiding this comment

ndelangen Apr 7, 2022 • edited

Choose a reason for hiding this comment

shilman left a comment

Choose a reason for hiding this comment

ndelangen Apr 7, 2022

Choose a reason for hiding this comment

ndelangen Apr 7, 2022

Choose a reason for hiding this comment

ndelangen Apr 7, 2022

Choose a reason for hiding this comment

ndelangen commented Apr 7, 2022

ndelangen commented Apr 7, 2022

Andarist commented Mar 6, 2022 •

edited by ndelangen

nx-cloud bot commented Mar 6, 2022 •

edited

Andarist Mar 31, 2022 •

edited

ndelangen Apr 7, 2022 •

edited