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.

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

Remove @emotion/styled usage #2043

Merged
merged 45 commits into from Mar 21, 2022
Merged

Remove @emotion/styled usage #2043

merged 45 commits into from Mar 21, 2022

Conversation

hasparus
Copy link
Member

@hasparus hasparus commented Dec 20, 2021

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

@vercel
Copy link

vercel bot commented Dec 20, 2021

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

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

@lachlanjc lachlanjc left a comment

Choose a reason for hiding this comment

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

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 Outdated Show resolved Hide resolved
packages/components/src/Close.tsx Outdated Show resolved Hide resolved
packages/components/src/Embed.tsx Outdated Show resolved Hide resolved
packages/components/src/Flex.tsx Outdated Show resolved Hide resolved
__themeKey="buttons"
__css={{
// @ts-expect-error
label: props.__css?.label || 'IconButton',
Copy link
Member

Choose a reason for hiding this comment

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

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

Copy link
Member

Choose a reason for hiding this comment

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

This still stands out as a bit confusing to me

Copy link
Member Author

Choose a reason for hiding this comment

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

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 Show resolved Hide resolved
Copy link
Member

@lachlanjc lachlanjc left a comment

Choose a reason for hiding this comment

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

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 Show resolved Hide resolved
packages/components/src/Progress.tsx Outdated Show resolved Hide resolved
packages/components/src/SVG.tsx Show resolved Hide resolved
packages/components/src/Select.tsx Show resolved Hide resolved
packages/components/src/Switch.tsx Show resolved Hide resolved
packages/components/test/Buttons.spec.tsx Outdated Show resolved Hide resolved
@lachlanjc
Copy link
Member

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

Co-authored-by: Lachlan Campbell <lachlanjc@hey.com>
@hasparus
Copy link
Member Author

hasparus commented Mar 18, 2022

@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 Outdated Show resolved Hide resolved
packages/components/src/Close.tsx Outdated Show resolved Hide resolved
Co-authored-by: Lachlan Campbell <lachlanjc@hey.com>
Co-authored-by: Lachlan Campbell <lachlanjc@hey.com>
@hasparus hasparus merged commit 10b33de into develop Mar 21, 2022
@hasparus hasparus deleted the remove-emotion-styled-2 branch March 21, 2022 12:23
@hasparus
Copy link
Member Author

🚀 PR was released in v0.14.0 🚀

@hasparus hasparus added the released This issue/pull request has been released. label Mar 21, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
released This issue/pull request has been released.
Projects
None yet
3 participants