Remove @emotion/styled usage by hasparus · Pull Request #2043 · system-ui/theme-ui

hasparus · 2021-12-20T11:08:51Z

Continues work of old PR #1368.

📦 Published PR as canary version: 0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0

✨ Test out this PR locally via:

npm install @theme-ui/color-modes@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/color@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/components@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/core@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/css@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/custom-properties@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/editor@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install gatsby-plugin-theme-ui@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install gatsby-theme-style-guide@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install gatsby-theme-ui-layout@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/match-media@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/mdx@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/parse-props@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/preset-base@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/preset-bootstrap@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/preset-bulma@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/preset-dark@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/preset-deep@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/preset-funk@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/preset-future@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/preset-polaris@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/preset-roboto@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/preset-sketchy@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/preset-swiss@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/preset-system@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/preset-tailwind@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/preset-tosh@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/presets@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/prism@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/sidenav@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/style-guide@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/tailwind@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/theme-provider@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install theme-ui@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
npm install @theme-ui/typography@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
# or 
yarn add @theme-ui/color-modes@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/color@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/components@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/core@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/css@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/custom-properties@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/editor@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add gatsby-plugin-theme-ui@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add gatsby-theme-style-guide@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add gatsby-theme-ui-layout@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/match-media@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/mdx@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/parse-props@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/preset-base@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/preset-bootstrap@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/preset-bulma@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/preset-dark@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/preset-deep@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/preset-funk@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/preset-future@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/preset-polaris@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/preset-roboto@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/preset-sketchy@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/preset-swiss@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/preset-system@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/preset-tailwind@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/preset-tosh@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/presets@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/prism@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/sidenav@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/style-guide@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/tailwind@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/theme-provider@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add theme-ui@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0
yarn add @theme-ui/typography@0.14.0--canary.2043.a8ab69e57240f26f57b17517635946d6918bb5e7.0

great! Co-authored-by: Lachlan Campbell <lachlanjc@hey.com>

…Script

…it history)

vercel · 2021-12-20T11:08:55Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/systemui/theme-ui/B7FtdecZQ2TJhgq1AJATTwtcnSch
✅ Preview: https://theme-ui-git-remove-emotion-styled-2-systemui.vercel.app

…package.json peerDeps

lachlanjc

Omg, thank you thank you for this massive upgrade!! Such an improvement. I've reviewed the diff for the first 2/3 & will get to the rest later, but this seems like the perfect implementation.

packages/components/src/Box.tsx

packages/components/src/Close.tsx

packages/components/src/Embed.tsx

packages/components/src/Flex.tsx

lachlanjc · 2021-12-20T14:53:55Z

packages/components/src/IconButton.tsx

+        __themeKey="buttons"
+        __css={{
+          // @ts-expect-error
+          label: props.__css?.label || 'IconButton',


Can we add a code comment with what this is doing?

This still stands out as a bit confusing to me

Nice catch. I preserved it because it was there already, but it seems that no other component passes Emotion label to IconButton.

packages/components/src/MenuButton.tsx

lachlanjc

Finished reading the diff, this is all looking great! Seems like the last piece is adding very basic tests for the other components, & updating docs about migrating to the peer dep. But so appreciate you taking this on.

packages/components/src/Progress.tsx

packages/components/src/SVG.tsx

packages/components/src/Select.tsx

packages/components/src/Switch.tsx

packages/components/test/Buttons.spec.tsx

lachlanjc · 2021-12-20T16:27:32Z

Do you think this fixes all the context mismatch issues??

Co-authored-by: Lachlan Campbell <lachlanjc@hey.com>

…rnalProps function

hasparus · 2022-03-18T21:59:56Z

@lachlanjc I fixed a few leftover bugs in @theme-ui/mdx.

scripts/typecheck-built-files really needs a migration to PNPM it seems.

MIGRATING.md

packages/components/src/Close.tsx

Co-authored-by: Lachlan Campbell <lachlanjc@hey.com>

hasparus · 2022-03-21T12:53:42Z

🚀 PR was released in v0.14.0 🚀

atanasster and others added 19 commits August 9, 2021 09:09

chore: replace emotion/styled with emotion/css

e8ede46

update fuction name for devtools

3c2e4c8

remove React import for forwardRef

27565ed

chore: remove @emotion/styled from components deps

938876a

Update packages/components/src/Box.js

ff35264

great! Co-authored-by: Lachlan Campbell <lachlanjc@hey.com>

test(components): split tests into multiple .tsx files

8ff513e

fix(components): make Field 'name' and 'label' props optional in Type…

26c9fc3

…Script

refactor(components): rename Box.js to Box.tsx (separate commit for G…

87369b8

…it history)

feat(components): remove styled-system dependency from Box

e43a711

test(components): update snapshots

df6b648

refactor(components): change components extensions to .tsx

efb991f

wip(components): add ts-expect-error to internal API __css calls

5f2a506

feat(mdx): remove deprecated Styled API

77eb226

refactor(components): fix type errors in all components

ba37eb9

Merge branch 'develop' into remove-emotion-styled-2

6e55e42

chore(deps): update yarn.lock

57b42bb

wip(mdx): remove usage of styled

ee80aaf

wip(components): fix type errors

3aa8922

Merge branch 'peer-deps' into remove-emotion-styled-2

9c748f7

hasparus requested a review from lachlanjc as a code owner December 20, 2021 11:08

hasparus changed the title ~~Remove dependency on @emotion/styled~~ Remove @emotion/styled usage Dec 20, 2021

chore: Remove mentions of @emotion/styled from components readme and …

0e295a4

…package.json peerDeps

vercel bot had a problem deploying to Preview December 20, 2021 11:11 Failure

docs: Remove @emotion/styled from how-it-works guide

696df8c

vercel bot had a problem deploying to Preview December 20, 2021 11:15 Failure

lachlanjc reviewed Dec 20, 2021

View reviewed changes

Update packages/components/src/Progress.tsx

4e2e954

Co-authored-by: Lachlan Campbell <lachlanjc@hey.com>

Merge branch 'develop' into remove-emotion-styled-2

94fc994

vercel bot deployed to Preview March 18, 2022 17:21 View deployment

refactor(components): get rid of @ts-expect-error in favoir of __inte…

0ff45a0

…rnalProps function

hasparus force-pushed the remove-emotion-styled-2 branch from 8327c49 to 0ff45a0 Compare March 18, 2022 17:23

vercel bot deployed to Preview March 18, 2022 17:24 View deployment

chore(components): fix components tests

b994c5e

vercel bot deployed to Preview March 18, 2022 17:45 View deployment

vercel bot deployed to Preview March 18, 2022 21:11 View deployment

chore(components): fix themed()

9775deb

hasparus force-pushed the remove-emotion-styled-2 branch from 41ccf05 to 9775deb Compare March 18, 2022 21:25

vercel bot deployed to Preview March 18, 2022 21:25 View deployment

hasparus added 2 commits March 18, 2022 22:35

chore(gatsby-plugin-theme-ui): remove @emotion/styled from dependencies

1b1dc9e

Remove @emotion/styled from readme

3ac90bb

vercel bot deployed to Preview March 18, 2022 21:49 View deployment

chore: use Yarn resolutions in typecheck-built-files

5e94da1

vercel bot deployed to Preview March 18, 2022 22:55 View deployment

lachlanjc reviewed Mar 20, 2022

View reviewed changes

MIGRATING.md Outdated Show resolved Hide resolved

packages/components/src/Close.tsx Outdated Show resolved Hide resolved

Update MIGRATING.md

991f836

Co-authored-by: Lachlan Campbell <lachlanjc@hey.com>

vercel bot deployed to Preview March 20, 2022 22:47 View deployment

Update packages/components/src/Close.tsx

35b216c

Co-authored-by: Lachlan Campbell <lachlanjc@hey.com>

vercel bot deployed to Preview March 20, 2022 22:51 View deployment

hasparus added 3 commits March 21, 2022 12:50

Fix typo

0b94a2e

Describe migration path for removed Themed.X as=Y pattern

0e1c8b6

Update snapshot

7b4d915

vercel bot deployed to Preview March 21, 2022 11:56 View deployment

hasparus merged commit 10b33de into develop Mar 21, 2022

hasparus deleted the remove-emotion-styled-2 branch March 21, 2022 12:23

hasparus added the released This issue/pull request has been released. label Mar 21, 2022

Conversation

hasparus commented Dec 20, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Dec 20, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lachlanjc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lachlanjc Dec 20, 2021

Choose a reason for hiding this comment

Uh oh!

lachlanjc Jan 8, 2022

Choose a reason for hiding this comment

Uh oh!

hasparus Mar 18, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

lachlanjc left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lachlanjc commented Dec 20, 2021

Uh oh!

hasparus commented Mar 18, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

hasparus commented Mar 21, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

hasparus commented Dec 20, 2021 •

edited

Loading

vercel bot commented Dec 20, 2021 •

edited

Loading

lachlanjc left a comment •

edited

Loading

hasparus commented Mar 18, 2022 •

edited

Loading