let gatsby-plugin-theme-ui take base preset options

Author: Laurie Barth

packages/gatsby-plugin-theme-ui/README.md

@@ -16,6 +16,33 @@ module.exports = {
 In addition to providing context, this plugin will also
 prevent a flash of unstyled colors when using color modes.
 
+## Options
+
+| Key                      | Default value    | Description                                                                      |
+| ------------------------ | ---------------- | -------------------------------------------------------------------------------- |
+| `themeModule`               | `null`            | JSON theme object, use the `require` syntax to include it in options. Make sure the package you're requiring is installed in your dependencies.               |
+| `themeModulePath`            | `null`  | A string package name that the plugin will require for you. Make sure the package you're requiring is installed in your dependencies.                                                             |
+| `moduleExportName`              | `default` | The name of the export from the theme module, applies to `themeModule` or `themeModulePath` resolution depending which one you're using    |
+
+> Note that if your theme is exported at the top level, the `moduleExportName` of `default` is bypassed. See [theme-ui/preset-deep](https://github.com/system-ui/theme-ui/blob/master/packages/preset-deep/src/index.ts).
+
+The theme module you include in options is considered your base theme. Any further customization and shadowing will be merged with it. 
+
+### Using options
+
+```js
+// gatsby-config.js
+module.exports = {
+  plugins: [
+    { resolve: 'gatsby-plugin-theme-ui',
+      options: {
+        themeModulePath: '@theme-ui/preset-funk'
+        // or themeModule: require('@theme-ui/preset-funk')
+      }
+    }],
+}
+```
+
 ## Customizing the theme
 
 To customize the theme used in your Gatsby site,

packages/gatsby-plugin-theme-ui/gatsby-node.js

@@ -0,0 +1,45 @@
+exports.onPreInit = (__, options) => {
+    let {themeModulePath} = options
+    if(themeModulePath) {
+        options.themeModulePath = require(themeModulePath)
+    }
+}
+
+exports.createSchemaCustomization = ({ actions }) => {
+    const { createTypes } = actions
+  
+    createTypes(`
+      type ThemeUiConfig implements Node {
+        themeModule: JSON,
+        themeModulePath: JSON,
+        moduleExportName: String,
+      }
+    `)
+  }
+  
+  exports.sourceNodes = (
+    { actions, createContentDigest },
+    { moduleExportName = 'default', themeModule, themeModulePath}
+  ) => {      
+    const { createNode } = actions
+  
+    const themeUiConfig = {
+        themeModule,
+        themeModulePath,
+        moduleExportName,
+    }
+  
+    createNode({
+      ...themeUiConfig,
+      id: `gatsby-plugin-theme-ui-config`,
+      parent: null,
+      children: [],
+      internal: {
+        type: `ThemeUiConfig`,
+        contentDigest: createContentDigest(themeUiConfig),
+        content: JSON.stringify(themeUiConfig),
+        description: `Options for gatsby-plugin-theme-ui`,
+      },
+    })
+  } 
+

packages/gatsby-plugin-theme-ui/src/hooks/configOptions.js

@@ -0,0 +1,17 @@
+import { useStaticQuery, graphql } from "gatsby"
+
+const useThemeUiConfig = () => {
+  const data = useStaticQuery(graphql`
+    query {
+      themeUiConfig(id: { eq: "gatsby-plugin-theme-ui-config" }) {
+        themeModule
+        themeModulePath
+        moduleExportName
+      }
+    }
+  `)
+
+  return data.themeUiConfig
+}
+
+export default useThemeUiConfig

packages/gatsby-plugin-theme-ui/src/provider.js

@@ -2,14 +2,43 @@
 import {
   jsx,
   ThemeProvider,
+  merge
 } from 'theme-ui'
 import theme from './index'
 import components from './components'
+import useThemeUiConfig from './hooks/configOptions'
 
-export const wrapRootElement = ({ element }) =>
-  jsx(ThemeProvider, {
-      theme,
-      components,
-    },
-    element,
+
+const Root = ({children}) => {
+  const themeUiConfig = useThemeUiConfig()
+  const {themeModule, themeModulePath, moduleExportName} = themeUiConfig
+
+  let themeWrapper
+  if (themeModule) {
+    themeWrapper = themeModule
+  }
+
+  if (themeModulePath) {
+    themeWrapper = themeModulePath
+  }
+  
+  if(themeWrapper && (moduleExportName in themeWrapper)) {
+    themeWrapper = themeWrapper[moduleExportName]
+  }
+
+  themeWrapper = merge(themeWrapper, {
+    ...theme
+  })
+  return (
+    <ThemeProvider theme={themeWrapper} components={components}>
+    {children}
+    </ThemeProvider>
   )
+}
+
+export const wrapRootElement = ({ element }) => {
+  return (
+    <Root>{element}</Root>
+  )
+}
+