Remove @emotion/styled usage #2043

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

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

GPG key ID: B5690EEEBB952194

Verified
Learn about vigilant mode

e8ede46

update fuction name for devtools

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

GPG key ID: B5690EEEBB952194

Verified
Learn about vigilant mode

3c2e4c8

remove React import for forwardRef

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

GPG key ID: B5690EEEBB952194

Verified
Learn about vigilant mode

27565ed

chore: remove @emotion/styled from components deps

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

GPG key ID: B5690EEEBB952194

Verified
Learn about vigilant mode

938876a

Update packages/components/src/Box.js

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

GPG key ID: B5690EEEBB952194

Verified
Learn about vigilant mode

ff35264

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

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

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

GPG key ID: B5690EEEBB952194

Verified
Learn about vigilant mode

8ff513e

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

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

GPG key ID: B5690EEEBB952194

Verified
Learn about vigilant mode

26c9fc3

…Script

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

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

GPG key ID: B5690EEEBB952194

Verified
Learn about vigilant mode

87369b8

…it history)

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

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

GPG key ID: B5690EEEBB952194

Verified
Learn about vigilant mode

e43a711

test(components): update snapshots

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

GPG key ID: B5690EEEBB952194

Verified
Learn about vigilant mode

df6b648

refactor(components): change components extensions to .tsx

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

GPG key ID: B5690EEEBB952194

Verified
Learn about vigilant mode

efb991f

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

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

GPG key ID: B5690EEEBB952194

Verified
Learn about vigilant mode

5f2a506

feat(mdx): remove deprecated Styled API

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

GPG key ID: B5690EEEBB952194

Verified
Learn about vigilant mode

77eb226

refactor(components): fix type errors in all components

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

GPG key ID: B5690EEEBB952194

Verified
Learn about vigilant mode

ba37eb9

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

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

GPG key ID: B5690EEEBB952194

Verified
Learn about vigilant mode

6e55e42

chore(deps): update yarn.lock

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

GPG key ID: B5690EEEBB952194

Verified
Learn about vigilant mode

57b42bb

wip(mdx): remove usage of styled

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

GPG key ID: B5690EEEBB952194

Verified
Learn about vigilant mode

ee80aaf

wip(components): fix type errors

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

GPG key ID: B5690EEEBB952194

Verified
Learn about vigilant mode

3aa8922

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

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

GPG key ID: B5690EEEBB952194

Verified
Learn about vigilant mode

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 …

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

GPG key ID: B5690EEEBB952194

Verified
Learn about vigilant mode

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

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

GPG key ID: B5690EEEBB952194

Verified
Learn about vigilant mode

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

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

GPG key ID: B5690EEEBB952194

Verified
Learn about vigilant mode

4e2e954

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

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

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

GPG key ID: B5690EEEBB952194

Verified
Learn about vigilant mode

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…

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.

GPG key ID: B5690EEEBB952194

Verified
Learn about vigilant mode

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 label Mar 21, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remove @emotion/styled usage #2043

Remove @emotion/styled usage #2043

hasparus commented Dec 20, 2021 •

edited

Loading

vercel bot commented Dec 20, 2021 •

edited

Loading

lachlanjc left a comment

lachlanjc Dec 20, 2021

lachlanjc Jan 8, 2022

hasparus Mar 18, 2022

lachlanjc left a comment •

edited

Loading

lachlanjc commented Dec 20, 2021

hasparus commented Mar 18, 2022 •

edited

Loading

hasparus commented Mar 21, 2022

Remove @emotion/styled usage #2043

Remove @emotion/styled usage #2043

Conversation

hasparus commented Dec 20, 2021 • edited Loading

vercel bot commented Dec 20, 2021 • edited Loading

lachlanjc left a comment

Choose a reason for hiding this comment

lachlanjc Dec 20, 2021

Choose a reason for hiding this comment

lachlanjc Jan 8, 2022

Choose a reason for hiding this comment

hasparus Mar 18, 2022

Choose a reason for hiding this comment

lachlanjc left a comment • edited Loading

Choose a reason for hiding this comment

lachlanjc commented Dec 20, 2021

hasparus commented Mar 18, 2022 • edited Loading

hasparus commented Mar 21, 2022

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