WIP: Pull out MDX to be opt-in

[hasparus]

This PR removes the peer dependency on @mdx-js/react from the main theme-ui package, and changes @theme-ui/mdx to work with any version of @mdx-js/react or a compatible library.

We have 2 reasons to do this.

1. Not every app using Theme UI needs MDX. Codebases I've seen quite often have a documentation website website and an actual product app in separate packages and often even in separate repositiories.
2. @mdx-js packages are now ESM-only, so Theme UI is locked on a previous major, what leads to multiple annoying problems.
   • This tweet sums up the situation pretty nicely.

Although Theme UI might eventually become ESM-only, this PR seems to me like a good move because of the first reason I mentioned.

All credits to johno for the idea.

Release Notes

Breaking: theme-ui no longer includes @theme-ui/mdx

• MDXProvider is no longer included in Theme UI ThemeProvider.

  • Migration: Use useThemedStylesWithMdx together with MDXProvider and useMDXComponents from @mdx-js/react.

    import { MDXProvider, useMDXComponents } from '@mdx-js/react'
    import { useThemedStylesWithMdx } from '@theme-ui/mdx'
    import { ThemeProvider } from 'theme-ui'
    
    function MyProvider({ children }) {
      const components = useThemedStylesWithMdx(useMDXComponents())
    
      return (
        <ThemeProvider theme={{/* ... */}}>
          <MDXProvider components={components}>{children}</MDXProvider>
        </ThemeProvider>
      )
    }
    

• Themed components dict is no longer reexported from theme-ui.

  • Migration: Import it from @theme-ui/mdx instead.

    -  import { Themed } from 'theme-ui'
    +  import { Themed } from '@theme-ui/mdx'
    

---

• [x] Finish implementation and tests.
• [ ] Get docs to run.
• [ ] Create a new example.
• [ ] Write release notes.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
theme-ui	✅ Ready (Inspect)	Visit Preview	Sep 10, 2022 at 11:41PM (UTC)

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit cd66918022306869d2440119e351271a17704fb1:

Sandbox	Source
next-theme-ui-example	Configuration
gatsby-plugin-theme-ui-example	Configuration

[hasparus]

Jest doesn't resolve ESM in --coverage mode unless we use v8 coverage provider.

[hasparus]

Needs https://github.com/system-ui/theme-ui/pull/2292 to be merged to pass the typecheck step on CI.

[hasparus]

@lachlanjc I'd say this is ready for review. The cypress action cache problem can be fixed separately, because it also happens on other branches.

[LekoArts]

@hasparus I want to try this out but it doesn't seem like this was published on npm? The develop alias stops at .22 https://www.npmjs.com/package/theme-ui

[hasparus]

Thanks for noticing that @LekoArts. I inadvertently broke the auto release when I migrated to PNPM in this PR.

Should be fine now.

• https://unpkg.com/[email protected]/package.json
• https://www.npmjs.com/package/theme-ui/v/0.15.0-develop.26

[LekoArts]

Thanks!

[LekoArts]

@hasparus I think this was still a bad publish if you look at https://unpkg.com/browse/[email protected]/dist/theme-ui.cjs.js

My unit tests + trying it out on a live site both fail with:

Error: Cannot find module '../../../node_modules/.pnpm/@[email protected]/node_modules/@preconstruct/hook'
Require stack:
- /Users/lejoe/code/github/gatsby-themes/node_modules/theme-ui/dist/theme-ui.cjs.js

I can bring this into an issue if you want instead of commenting on this PR 😅

[hasparus]

@LekoArts I created the issue. I'm gonna go back to it on the weekend and test this version properly in my projects.

[LekoArts]

@hasparus Cool! Don't feel rushed, it's not urgent on my end :)

[hasparus]

@LekoArts I just published 0.15.0-develop.30. Didn't get the MDX functionality in my projects yet, but the preconstruct/hook error is gone.

[LekoArts]

@hasparus Thanks! Also all working fine on my end https://github.com/LekoArts/gatsby-themes/pull/989

[hasparus]

:rocket: PR was released in v0.15.0 :rocket: