Move Emotion and MDX packages to peerDeps #1867

hasparus · 2021-07-19T22:44:59Z

Having Emotion and MDX packages in dependencies leads to a bunch of problems that repeatedly popped up over last few years.

In general, if something depends on a React context, we can't really hide it as dependency from the user, as a version conflict can lead to a context mismatch (we pass the theme to context, but it's read from another one).

We install Emotion for the user, but the abstraction leaks — without knowing that we use Emotion these context mismatch errors can be absurdly hard to debug.

Changes in this PR:

Move @emotion/react and @emotion/styled to peer deps.
Move MDX packages to peer deps.
Adapt all npm install guildelines to include peerDeps.
Write release notes describing the breaking change.

Connected issues:

Release notes

BREAKING CHANGE: @emotion/react and @mdx-js/react were moved to peerDependencies of theme-ui, @theme-ui/mdx and @theme-ui/sidenav and must be installed separately. This is a revert of change from Theme UI v0.3, and it's meant to help solve version clashes and context mismatch bugs on user side. Connected issues: #1793, #1531, #1530, #1388, #1345, #1130.

📦 Published PR as canary version: 0.13.0--canary.1867.408bee0d2d84fbaf22e6f2ca925d50f4c82ad1db.0

✨ Test out this PR locally via:

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

vercel · 2021-07-19T22:45:02Z

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/8fMZ6Yf9pT7wW2dLr8bLwsCFKDFZ
✅ Preview: https://theme-ui-git-peer-deps-systemui.vercel.app

Swizec · 2021-11-16T15:41:44Z

Any prediction when this is getting merged? We keep tripping over it every few months when someone tries to upgrade packages.

flo-sch

Just some imports I am not fully sure about

packages/core/package.json

packages/parse-props/package.json

hasparus · 2021-11-16T18:23:23Z

@Swizec, I'll reluctantly say soon™. It's been a while since somebody messaged about this problem so I hoped other libs updated to Emotion 11 and it's not occuring so often 😓

Swizec · 2021-11-17T14:12:14Z

@hasparus we recently ran into it because everything updated to latest. But it was like emotion 11.6.0 in one place and 11.5.0 in another 💩

Made up example version numbers but something like that. We had to carefully ensure everything used the exact same version and it was a pain to figure out what the problem was.

beerose

(was asked by @hasparus to take a look at this PR)

LGTM

hasparus · 2021-12-27T22:17:40Z

🚀 PR was released in v0.13.0 🚀

hasparus added this to the v0.10 milestone Jul 19, 2021

hasparus added the minor Increment the minor version when merged label Jul 19, 2021

hasparus added 3 commits August 9, 2021 08:28

feat(deps): move Emotion to peerDeps

e22b5d1

feat(deps): move @mdx-js/react to peerDeps

da4a330

docs(readme): mention @theme-ui/core in the main readme

31f18df

hasparus force-pushed the peer-deps branch from 15b108c to 31f18df Compare August 9, 2021 06:28

hasparus requested a review from lachlanjc as a code owner August 9, 2021 06:28

vercel bot had a problem deploying to Preview August 9, 2021 06:28 Failure

hasparus requested review from fcisio and flo-sch August 9, 2021 06:30

chore(deps): bump Gatsby to v3

35394d8

vercel bot had a problem deploying to Preview November 14, 2021 16:47 Failure

flo-sch reviewed Nov 16, 2021

View reviewed changes

packages/core/package.json Show resolved Hide resolved

packages/parse-props/package.json Outdated Show resolved Hide resolved

hasparus added 2 commits December 20, 2021 11:22

Merge branch 'develop' into peer-deps

a0fc7a2

fix(eslint): Add import/no-extraneous-dependencies and fix bad imports

9f9e09b

vercel bot deployed to Preview December 20, 2021 10:49 View deployment

hasparus requested a review from flo-sch December 20, 2021 10:52

chore(ci): run eslint --quiet in GH Actions

5a14694

vercel bot deployed to Preview December 20, 2021 10:55 View deployment

beerose approved these changes Dec 20, 2021

View reviewed changes

hasparus mentioned this pull request Dec 20, 2021

Remove @emotion/styled usage #2043

Merged

hasparus merged commit 07e067c into develop Dec 21, 2021

hasparus deleted the peer-deps branch December 21, 2021 17:53

hasparus added the released This issue/pull request has been released. label Dec 27, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Move Emotion and MDX packages to peerDeps #1867

Move Emotion and MDX packages to peerDeps #1867

hasparus commented Jul 19, 2021 •

edited

vercel bot commented Jul 19, 2021 •

edited

Swizec commented Nov 16, 2021

flo-sch left a comment

hasparus commented Nov 16, 2021

Swizec commented Nov 17, 2021

beerose left a comment

hasparus commented Dec 27, 2021

Move Emotion and MDX packages to peerDeps #1867

Move Emotion and MDX packages to peerDeps #1867

Conversation

hasparus commented Jul 19, 2021 • edited

Release notes

vercel bot commented Jul 19, 2021 • edited

Swizec commented Nov 16, 2021

flo-sch left a comment

Choose a reason for hiding this comment

hasparus commented Nov 16, 2021

Swizec commented Nov 17, 2021

beerose left a comment

Choose a reason for hiding this comment

hasparus commented Dec 27, 2021

hasparus commented Jul 19, 2021 •

edited

vercel bot commented Jul 19, 2021 •

edited