feat: Update theme-ui to v0.3.x (#371)

Theme UI updated to v0.3 a while ago and I now finally had time to go through the breaking changes: https://theme-ui.com/migrating#v03 In general this update should be painless and without any breaking changes (for most people). The sites look and function identical, it was more a technical refactoring. ## Breaking Changes These changes might be breaking for some people: - `@lekoarts/gatsby-theme-specimens`: Renamed the `theme` prop on the `<Heading />` component to `config` - `@lekoarts/gatsby-theme-specimens` & `@lekoarts/gatsby-theme-styleguide`: Removed `theme-ui` as a direct dependency and moved them to `peerDependencies`. This supersedes the PR #262 ## Description - Updated all `gatsby`, `react`, `react-dom` packages to latest version - Removed `@emotion/core` and `@mdx-js/react` packages as `theme-ui` now comes with it - Removed `<Styled.root />` components as Theme UI now places that on the `body` by default - Replaced `Styled.x` with e.g. `Link`, `Heading` - Moved `@emotion/core`, `@mdx-js/mdx` & `@mdx-js/react` to `yarn resolutions` to only have one version of each dependency - Use `merge` from `theme-ui` for config merging - Clean up `<Global />` by moving stuff to the Theme UI config - Rename some internal TypeScript types - Add/Update some comments - Use optional chaining.?
LekoArts · Apr 27, 2020 · 67a05ac · 67a05ac
1 parent c30767a
commit 67a05ac
Show file tree

Hide file tree

Showing 113 changed files with 2,315 additions and 2,098 deletions.
diff --git a/cypress/e2e/cara.ts b/cypress/e2e/cara.ts
@@ -28,11 +28,11 @@ describe(`gatsby-theme-cara`, () => {
     cy.findByLabelText(/toggle dark mode/i)
   })
   it(`should have functioning dark mode toggle`, () => {
-    cy.findByTestId(`theme-root`)
+    cy.get(`body`)
       .should(`have.css`, `color`, `rgb(226, 232, 240)`)
       .should(`have.css`, `background`, `rgb(20, 24, 33) none repeat scroll 0% 0% / auto padding-box border-box`)
     cy.findByLabelText(/toggle dark mode/i).click()
-    cy.findByTestId(`theme-root`)
+    cy.get(`body`)
       .should(`have.css`, `color`, `rgb(45, 55, 72)`)
       .should(`have.css`, `background`, `rgb(247, 250, 252) none repeat scroll 0% 0% / auto padding-box border-box`)
   })

diff --git a/cypress/e2e/emilia.ts b/cypress/e2e/emilia.ts
@@ -25,11 +25,11 @@ describe(`gatsby-theme-emilia`, () => {
     cy.findByText(/Boggarts lavender robes/i)
   })
   it(`should have functioning theme toggle`, () => {
-    cy.findByTestId(`theme-root`)
+    cy.get(`body`)
       .should(`have.css`, `color`, `rgb(45, 55, 72)`)
       .should(`have.css`, `background`, `rgb(247, 250, 252) none repeat scroll 0% 0% / auto padding-box border-box`)
     cy.findByLabelText(/activate dark mode/i).click()
-    cy.findByTestId(`theme-root`)
+    cy.get(`body`)
       .should(`have.css`, `color`, `rgb(203, 213, 224)`)
       .should(`have.css`, `background`, `rgb(26, 32, 44) none repeat scroll 0% 0% / auto padding-box border-box`)
     cy.findByLabelText(/activate light mode/i)

diff --git a/cypress/e2e/emma.ts b/cypress/e2e/emma.ts
@@ -21,11 +21,11 @@ describe(`gatsby-theme-emma`, () => {
         cy.findByLabelText(/toggle dark mode/i).click()
       }
     })
-    cy.findByTestId(`theme-root`)
+    cy.get(`body`)
       .should(`have.css`, `color`, `rgb(45, 55, 72)`)
       .should(`have.css`, `background`, `rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box`)
     cy.findByLabelText(/toggle dark mode/i).click()
-    cy.findByTestId(`theme-root`)
+    cy.get(`body`)
       .should(`have.css`, `color`, `rgb(255, 255, 255)`)
       .should(`have.css`, `background`, `rgb(45, 55, 72) none repeat scroll 0% 0% / auto padding-box border-box`)
   })

diff --git a/cypress/e2e/graphql-playground.ts b/cypress/e2e/graphql-playground.ts
@@ -28,11 +28,11 @@ describe(`gatsby-theme-graphql-playground`, () => {
     cy.findByTestId(/iFrame-Get the Site Title/i)
   })
   it(`should have functioning theme toggle`, () => {
-    cy.findByTestId(`theme-root`)
+    cy.get(`body`)
       .should(`have.css`, `color`, `rgb(45, 55, 72)`)
       .should(`have.css`, `background`, `rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box`)
     cy.findByLabelText(/activate dark mode/i).click()
-    cy.findByTestId(`theme-root`)
+    cy.get(`body`)
       .should(`have.css`, `color`, `rgb(237, 242, 247)`)
       .should(`have.css`, `background`, `rgb(45, 55, 72) none repeat scroll 0% 0% / auto padding-box border-box`)
     cy.findByLabelText(/activate light mode/i)

diff --git a/cypress/e2e/minimal-blog.ts b/cypress/e2e/minimal-blog.ts
@@ -114,11 +114,11 @@ describe(`gatsby-theme-minimal-blog`, () => {
     cy.findByLabelText(/Activate Dark Mode/i)
   })
   it(`should have functioning dark mode toggle`, () => {
-    cy.findByTestId(`theme-root`)
+    cy.get(`body`)
       .should(`have.css`, `color`, `rgb(45, 55, 72)`)
       .should(`have.css`, `background`, `rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box`)
     cy.findByLabelText(/Activate Dark Mode/i).click()
-    cy.findByTestId(`theme-root`)
+    cy.get(`body`)
       .should(`have.css`, `color`, `rgb(203, 213, 224)`)
       .should(`have.css`, `background`, `rgb(26, 32, 44) none repeat scroll 0% 0% / auto padding-box border-box`)
   })

diff --git a/examples/cara/package.json b/examples/cara/package.json
@@ -17,13 +17,13 @@
   },
   "dependencies": {
     "@lekoarts/gatsby-theme-cara": "^1.1.8",
-    "gatsby": "^2.13.72",
+    "gatsby": "^2.20.36",
     "gatsby-plugin-google-analytics": "^2.1.8",
     "gatsby-plugin-manifest": "^2.2.6",
     "gatsby-plugin-netlify": "^2.1.6",
     "gatsby-plugin-offline": "^2.2.7",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   },
   "devDependencies": {
     "cross-env": "^5.2.0"

diff --git a/examples/emilia/gatsby-config.js b/examples/emilia/gatsby-config.js
@@ -9,6 +9,7 @@ module.exports = {
   plugins: [
     {
       resolve: `@lekoarts/gatsby-theme-emilia`,
+      // See the theme's README for all available options
       options: {},
     },
     {

diff --git a/examples/emilia/package.json b/examples/emilia/package.json
@@ -17,14 +17,14 @@
   },
   "dependencies": {
     "@lekoarts/gatsby-theme-emilia": "^1.2.8",
-    "gatsby": "^2.15.2",
+    "gatsby": "^2.20.36",
     "gatsby-plugin-google-analytics": "^2.1.13",
     "gatsby-plugin-manifest": "^2.2.13",
     "gatsby-plugin-netlify": "^2.1.11",
     "gatsby-plugin-offline": "^3.0.1",
     "gatsby-plugin-sitemap": "^2.2.7",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   },
   "devDependencies": {
     "cross-env": "^5.2.1"

diff --git a/examples/emma/gatsby-config.js b/examples/emma/gatsby-config.js
@@ -9,6 +9,7 @@ module.exports = {
   plugins: [
     {
       resolve: `@lekoarts/gatsby-theme-emma`,
+      // See the theme's README for all available options
       options: {},
     },
     {

diff --git a/examples/emma/package.json b/examples/emma/package.json
@@ -17,14 +17,14 @@
   },
   "dependencies": {
     "@lekoarts/gatsby-theme-emma": "^1.3.8",
-    "gatsby": "^2.13.72",
+    "gatsby": "^2.20.36",
     "gatsby-plugin-google-analytics": "^2.1.8",
     "gatsby-plugin-manifest": "^2.2.6",
     "gatsby-plugin-netlify": "^2.1.6",
     "gatsby-plugin-offline": "^2.2.7",
     "gatsby-plugin-sitemap": "^2.2.7",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   },
   "devDependencies": {
     "cross-env": "^5.2.0"

diff --git a/examples/graphql-playground/gatsby-config.js b/examples/graphql-playground/gatsby-config.js
@@ -2,6 +2,7 @@ module.exports = {
   plugins: [
     {
       resolve: `@lekoarts/gatsby-theme-graphql-playground`,
+      // See the theme's README for all available options
       options: {},
     },
     `gatsby-plugin-netlify`,

diff --git a/examples/graphql-playground/package.json b/examples/graphql-playground/package.json
@@ -17,10 +17,10 @@
   },
   "dependencies": {
     "@lekoarts/gatsby-theme-graphql-playground": "^1.0.19",
-    "gatsby": "^2.17.7",
+    "gatsby": "^2.20.36",
     "gatsby-plugin-netlify": "^2.1.23",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   },
   "devDependencies": {
     "cross-env": "^5.2.0"

diff --git a/...es/minimal-blog/content/posts/fantastic-beasts-and-where-to-find-them/index.mdx b/...es/minimal-blog/content/posts/fantastic-beasts-and-where-to-find-them/index.mdx
@@ -49,6 +49,20 @@ var treePromise = new Promise(function(resolve) {
 });
 ```
 
+Normal block without language:
+
+```
+import Test from "../components/test"
+
+const Layout = ({ children }) => (
+  <Test>
+    {children}
+  </Test>
+)
+
+export default Layout
+```
+
 Code block with code highlighting:
 
 ```jsx:title=src/components/post.jsx {5-7,10}

diff --git a/examples/minimal-blog/gatsby-config.js b/examples/minimal-blog/gatsby-config.js
@@ -9,6 +9,7 @@ module.exports = {
   plugins: [
     {
       resolve: `@lekoarts/gatsby-theme-minimal-blog`,
+      // See the theme's README for all available options
       options: {
         navigation: [
           {
@@ -65,6 +66,5 @@ module.exports = {
     },
     `gatsby-plugin-offline`,
     `gatsby-plugin-netlify`,
-    // `gatsby-plugin-webpack-bundle-analyser-v2`,
   ],
 }
diff --git a/examples/minimal-blog/package.json b/examples/minimal-blog/package.json
@@ -17,17 +17,16 @@
   },
   "dependencies": {
     "@lekoarts/gatsby-theme-minimal-blog": "^2.2.11",
-    "gatsby": "^2.13.3",
+    "gatsby": "^2.20.36",
     "gatsby-plugin-google-analytics": "^2.1.4",
     "gatsby-plugin-manifest": "^2.2.3",
     "gatsby-plugin-netlify": "^2.1.3",
     "gatsby-plugin-offline": "^2.2.4",
     "gatsby-plugin-sitemap": "^2.2.19",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   },
   "devDependencies": {
-    "cross-env": "^5.2.0",
-    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.8"
+    "cross-env": "^5.2.0"
   }
 }
diff --git a/examples/specimens/gatsby-config.js b/examples/specimens/gatsby-config.js
@@ -11,6 +11,7 @@ module.exports = {
   plugins: [
     {
       resolve: `@lekoarts/gatsby-theme-specimens`,
+      // See the theme's README for all available options
       options: {
         CMYK: true,
       },

diff --git a/examples/specimens/package.json b/examples/specimens/package.json
@@ -16,29 +16,27 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.16",
     "@lekoarts/gatsby-theme-specimens": "^2.1.8",
-    "@mdx-js/mdx": "^1.3.1",
-    "@mdx-js/react": "^1.3.1",
-    "@theme-ui/presets": "^0.2.44",
-    "gatsby": "^2.13.72",
+    "@mdx-js/mdx": "^1.5.9",
+    "@theme-ui/presets": "^0.3.0",
+    "gatsby": "^2.20.36",
     "gatsby-plugin-catch-links": "^2.1.4",
     "gatsby-plugin-emotion": "^4.1.3",
     "gatsby-plugin-manifest": "^2.2.6",
-    "gatsby-plugin-mdx": "^1.0.25",
+    "gatsby-plugin-mdx": "^1.1.11",
     "gatsby-plugin-netlify": "^2.1.6",
     "gatsby-plugin-offline": "^2.2.7",
     "gatsby-plugin-react-helmet": "^3.1.4",
-    "gatsby-plugin-theme-ui": "^0.2.34",
+    "gatsby-plugin-theme-ui": "^0.3.0",
     "gatsby-source-filesystem": "^2.1.10",
     "mdx-utils": "^0.2.0",
-    "prism-react-renderer": "^0.1.7",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
+    "prism-react-renderer": "^1.1.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-helmet": "^5.2.1",
-    "react-live": "^2.2.0",
+    "react-live": "^2.2.2",
     "remark-slug": "^5.1.2",
-    "theme-ui": "^0.2.35"
+    "theme-ui": "^0.3.1"
   },
   "devDependencies": {
     "cross-env": "^5.2.0"

diff --git a/examples/specimens/src/components/wrapPageElement.js b/examples/specimens/src/components/wrapPageElement.js
@@ -1,9 +1,4 @@
 import React from "react"
-import { Styled } from "theme-ui"
 import Layout from "./layout"
 
-export const wrapPageElement = ({ element }) => (
-  <Layout>
-    <Styled.root>{element}</Styled.root>
-  </Layout>
-)
+export const wrapPageElement = ({ element }) => <Layout>{element}</Layout>
diff --git a/examples/specimens/src/gatsby-plugin-theme-ui/components.js b/examples/specimens/src/gatsby-plugin-theme-ui/components.js
@@ -62,7 +62,7 @@ const components = {
   FontFamily: ({ fonts, previewText }) => <FontFamily fonts={fonts} previewText={previewText} />,
   FontSize: ({ fontSizes }) => <FontSize fontSizes={fontSizes} />,
   FontWeight: ({ fontWeights, previewText }) => <FontWeight fontWeights={fontWeights} previewText={previewText} />,
-  Heading: ({ styles, theme, previewText }) => <Heading styles={styles} theme={theme} previewText={previewText} />,
+  Heading: ({ styles, config, previewText }) => <Heading styles={styles} config={config} previewText={previewText} />,
   Palette: ({ colors, mode, single, minimal, prefix }) => (
     <Palette colors={colors} mode={mode} single={single} minimal={minimal} prefix={prefix} />
   ),

diff --git a/examples/specimens/src/pages/index.mdx b/examples/specimens/src/pages/index.mdx
@@ -355,7 +355,7 @@ render(
       input: theme.styles,
       allowed: [`h1`, `h2`],
     })}
-    theme={theme}
+    config={theme}
   />
 );
 ```

diff --git a/examples/status-dashboard/gatsby-config.js b/examples/status-dashboard/gatsby-config.js
@@ -9,6 +9,7 @@ module.exports = {
     siteDescription: process.env.SITE_DESCRIPTION || `Showing the statuses of my Netlify deploys & CircleCI tests.`,
   },
   plugins: [
+    // See the theme's README for all available components
     `@lekoarts/gatsby-theme-status-dashboard`,
     `gatsby-plugin-react-helmet`,
     `gatsby-plugin-emotion`,

diff --git a/examples/status-dashboard/package.json b/examples/status-dashboard/package.json
@@ -18,14 +18,14 @@
   "dependencies": {
     "@emotion/core": "^10.0.16",
     "@lekoarts/gatsby-theme-status-dashboard": "^1.0.21",
-    "gatsby": "^2.13.72",
+    "gatsby": "^2.20.36",
     "gatsby-plugin-emotion": "^4.1.3",
     "gatsby-plugin-manifest": "^2.2.6",
     "gatsby-plugin-netlify": "^2.1.6",
     "gatsby-plugin-offline": "^2.2.7",
     "gatsby-plugin-react-helmet": "^3.1.4",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-helmet": "^5.2.1"
   },
   "devDependencies": {

diff --git a/examples/styleguide/gatsby-config.js b/examples/styleguide/gatsby-config.js
@@ -13,6 +13,7 @@ module.exports = {
     `gatsby-plugin-theme-ui`,
     {
       resolve: `@lekoarts/gatsby-theme-styleguide`,
+      // See the theme's README for all available options
       options: {
         basePath: `/`,
       },

diff --git a/examples/styleguide/package.json b/examples/styleguide/package.json
@@ -16,16 +16,15 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.22",
     "@lekoarts/gatsby-theme-styleguide": "^1.0.15",
-    "@mdx-js/react": "^1.5.1",
-    "gatsby": "^2.18.7",
+    "gatsby": "^2.20.36",
     "gatsby-plugin-netlify": "^2.1.27",
     "gatsby-plugin-react-helmet": "^3.1.16",
-    "gatsby-plugin-theme-ui": "^0.2.43",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-helmet": "^5.2.1"
+    "gatsby-plugin-theme-ui": "^0.3.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-helmet": "^5.2.1",
+    "theme-ui": "^0.3.1"
   },
   "devDependencies": {
     "cross-env": "^6.0.3"