Pull out MDX to be opt-in

.codesandbox/ci.json

@@ -1,4 +1,5 @@
 {
+  "installCommand": "codesandbox-ci:install",
   "buildCommand": "build",
   "packages": ["packages/theme-ui", "packages/core"],
   "sandboxes": ["/examples/next", "/examples/gatsby-plugin"],

.eslintrc.js

@@ -26,6 +26,8 @@ module.exports = {
     // TypeScript checks this
     'no-undef': 'off',
     'no-lone-blocks': 'off',
+
+    'react/jsx-pascal-case': 'off', // needs a fix in @theme-ui/mdx
   },
   overrides: [
     {

.github/dependabot.yml

@@ -81,9 +81,6 @@ updates:
       - dependency-name: reakit
         versions:
           - 1.3.6
-      - dependency-name: lerna
-        versions:
-          - 4.0.0
       - dependency-name: prism-react-renderer
         versions:
           - 1.2.0

.github/workflows/ci.yml

@@ -15,36 +15,32 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - uses: actions/setup-node@v2
+      - uses: pnpm/action-setup@v2
         with:
-          node-version: 14.x
+          version: 7
 
-      - uses: bahmutov/npm-install@v1
+      - uses: actions/setup-node@v2
         with:
-          # By default, bahmutov/npm-install uses --frozen-lockfile
-          install-command:
-            yarn --ignore-optional --pure-lockfile --non-interactive
+          node-version: 18.x
+          cache: 'pnpm'
+
+      - name: Install
+        run: pnpm install --no-optional --no-frozen-lockfile
 
       - name: Run linter
-        run: yarn lint --quiet
+        run: pnpm lint --quiet
 
       - name: Run tests and collect coverage
-        run: yarn test --coverage
+        run: pnpm test:coverage
 
       - name: Typecheck
-        run: yarn typecheck
+        run: pnpm typecheck
 
       - name: Build
-        run: yarn build
-
-      - name: Typecheck built files
-        run: |
-          cd scripts/typecheck-built-files
-          yarn
-          yarn start
+        run: pnpm build
 
       - name: Run Codechecks
-        run: yarn codechecks
+        run: pnpm codechecks
         env:
           CC_SECRET: ${{ secrets.CC_SECRET }}
         if: ${{ env.CC_SECRET != '' }}
@@ -80,14 +76,17 @@ jobs:
       - name: Prepare repository
         run: git fetch --unshallow --tags
 
-      - uses: actions/setup-node@v2
+      - uses: pnpm/action-setup@v2
         with:
-          node-version: 14.x
+          version: 7
 
-      - uses: bahmutov/npm-install@v1
+      - uses: actions/setup-node@v2
         with:
-          install-command:
-            yarn --ignore-optional --pure-lockfile --non-interactive
+          node-version: 18.x
+          cache: 'pnpm'
+
+      - name: Install
+        run: pnpm install --no-optional --no-frozen-lockfile
 
       - name: Queue in release turnstile
         id: turnstyle
@@ -104,4 +103,10 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.AUTO_RELEASE_GH_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: yarn release
+        run: pnpm release
+
+      - name: Check published prerelease
+        if: github.ref == 'refs/heads/develop'
+        run: |
+          cd scripts/typecheck-built-files
+          pnpm start

.github/workflows/e2e.yml

@@ -21,26 +21,29 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - uses: actions/setup-node@v2
+      - uses: pnpm/action-setup@v2
         with:
-          node-version: 14.x
+          version: 7
 
-      - uses: bahmutov/npm-install@v1
+      - uses: actions/setup-node@v2
         with:
-          install-command: yarn --pure-lockfile --non-interactive
+          node-version: 18.x
+          cache: 'pnpm'
+
+      - name: Install
+        run: pnpm install --no-frozen-lockfile
 
-      - run: yarn build # build preconstruct libs
-      - run: yarn build:docs
+      - run: pnpm build:docs
 
-      - uses: cypress-io/github-action@v4
+      - uses: cypress-io/github-action@v4.2.0
         with:
           record: true
           parallel: true
           working-directory: packages/e2e
-          command: yarn record
-          start: yarn serve-docs
-          wait-on: 'http://localhost:9000'
+          command: pnpm record
+          start: pnpm serve-docs
           tag: ${{ github.event_name }}
+          install: false
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}

.gitignore

@@ -1,6 +1,5 @@
 .cache
 public
-package-lock.json
 node_modules
 dist
 coverage
@@ -11,8 +10,5 @@ coverage
 .envrc
 .envrc.ps1
 .publish-log.txt
-.yarn-error.log
-yarn-error.log
-
+yarn.lock
 .vercel
-/examples/**/yarn.lock

.npmrc

@@ -0,0 +1,4 @@
+auto-install-peers=true
+public-hoist-pattern[]='*eslint*'
+public-hoist-pattern[]='*prettier*'
+public-hoist-pattern[]='@emotion/react'

.nvmrc

@@ -0,0 +1 @@
+18

.pnpmfile.cjs

@@ -0,0 +1,42 @@
+const PACKAGES_WITH_ENFORCED_SINGLE_VERSION = ['@emotion/react']
+
+/**
+ * @author remorses
+ * @see https://github.com/pnpm/pnpm/issues/2713#issuecomment-1141000426
+ */
+function afterAllResolved(lockfile, context) {
+  context.log('Checking duplicate packages...')
+
+  const packagesKeys = Object.keys(lockfile.packages)
+  const found = {}
+  for (let p of packagesKeys) {
+    for (let x of PACKAGES_WITH_ENFORCED_SINGLE_VERSION) {
+      if (p.startsWith(`/${x}/`)) {
+        if (found[x]) {
+          found[x] += 1
+        } else {
+          found[x] = 1
+        }
+      }
+    }
+  }
+
+  let msg = ''
+
+  for (let p in found) {
+    const count = found[p]
+    if (count > 1) {
+      msg += `${p} found ${count} times\n`
+    }
+  }
+
+  if (msg) console.warn('\n\n\n🔥\n', '🔥', msg, '\n🔥\n\n\n')
+
+  return lockfile
+}
+
+module.exports = {
+  hooks: {
+    afterAllResolved,
+  },
+}

.prettierignore

@@ -2,6 +2,7 @@
 public
 package-lock.json
 yarn.lock
+pnpm-lock.yaml
 node_modules
 dist
 coverage

MIGRATING.md

@@ -1,5 +1,66 @@
 # Migration Guides
 
+## v0.15
+
+**MDX is now opt-in.**
+
+_If your project is not using MDX or importing `Themed`, you shouldn't need to
+change anything._
+
+If you are using MDX, this change enables you to use Theme UI together with
+[MDX v2](https://mdxjs.com/blog/v2/).
+
+- `MDXProvider` is no longer included in Theme UI `ThemeProvider`, and has been
+  removed in favour of an `useThemedStylesWithMdx` hook.
+
+  **Migration:** Use `useThemedStylesWithMdx` together with `MDXProvider` and
+  `useMDXComponents` from `@mdx-js/react`.
+
+  ```tsx
+  import {
+    MDXProvider,
+    useMDXComponents,
+    Components as MDXComponents,
+    MergeComponents as MergeMDXComponents,
+  } from '@mdx-js/react'
+  import { useThemedStylesWithMdx } from '@theme-ui/mdx'
+  import { ThemeProvider, Theme } from 'theme-ui'
+
+  interface MyProviderProps {
+    theme: Theme
+    components?: MDXComponents | MergeMDXComponents
+    children: React.ReactNode
+  }
+  function MyProvider({ theme, components, children }: MyProviderProps) {
+    const componentsWithStyles = useThemedStylesWithMdx(
+      useMDXComponents(components)
+    )
+
+    return (
+      <ThemeProvider theme={theme}>
+        <MDXProvider components={componentsWithStyles}>{children}</MDXProvider>
+      </ThemeProvider>
+    )
+  }
+  ```
+
+- `Themed` components dict and other exports from `@theme-ui/mdx` are no longer
+  reexported from `theme-ui`.
+
+  **Migration:** Import it from `@theme-ui/mdx` instead.
+
+  ```diff
+  -  import { Themed } from 'theme-ui'
+  +  import { Themed } from '@theme-ui/mdx'
+  ```
+
+**`Themed` object is no longer a component**
+
+_Previously, it was an alias for `Themed.div`._
+
+- **Migration:** Whenever you're using `<Themed />`, use `<Themed.div />`
+  instead.
+
 ## v0.14
 
 - `theme-ui`, `@theme-ui/components` and `@theme-ui/mdx` packages no longer