Merge pull request #878 from system-ui/add-options

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

Author: LB

jest-preprocess.js

@@ -0,0 +1,3 @@
+module.exports = require('babel-jest').createTransformer({
+  presets: ['babel-preset-gatsby'],
+})

package.json

@@ -96,7 +96,10 @@
     ],
     "setupFiles": [
       "jest-canvas-mock"
-    ]
+    ],
+    "transform": {
+      "^.+\\.jsx?$": "<rootDir>/jest-preprocess.js"
+    }
   },
   "husky": {
     "hooks": {

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

@@ -16,6 +16,31 @@ 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                                                                      |
+| ------------------------ | ---------------- | -------------------------------------------------------------------------------- |
+| `preset`               | `null`            | This can be a JSON theme object or a string package name. Make sure the package you're requiring is installed in your dependencies.               |
+
+> Note that this plugin assumes the theme object is exported as `default`.
+
+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: {
+        preset: '@theme-ui/preset-funk'
+        // or 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,44 @@
+exports.onPreInit = (__, options) => {
+  let { preset } = options
+
+  if (typeof preset === 'string') {
+    try {
+      options.preset = require(preset)
+    } catch {
+      reporter.warn(
+        `It appears your theme dependency is not installed. Only local styles will appear.`
+      )
+    }
+  }
+}
+
+exports.createSchemaCustomization = ({ actions }) => {
+  const { createTypes } = actions
+
+  createTypes(`
+      type ThemeUiConfig implements Node {
+        preset: JSON,
+      }
+    `)
+}
+
+exports.sourceNodes = ({ actions, createContentDigest }, { preset = {} }) => {
+  const { createNode } = actions
+
+  const themeUiConfig = {
+    preset,
+  }
+
+  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,15 @@
+import { useStaticQuery, graphql } from 'gatsby'
+
+const useThemeUiConfig = () => {
+  const data = useStaticQuery(graphql`
+    query {
+      themeUiConfig(id: { eq: "gatsby-plugin-theme-ui-config" }) {
+        preset
+      }
+    }
+  `)
+
+  return data.themeUiConfig
+}
+
+export default useThemeUiConfig

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

@@ -1,15 +1,24 @@
 /** @jsx jsx */
-import {
-  jsx,
-  ThemeProvider,
-} from 'theme-ui'
-import theme from './index'
+import { jsx, ThemeProvider, merge } from 'theme-ui'
+import localTheme 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 { preset } = themeUiConfig
+
+  const theme = preset.default || preset
+
+  const fullTheme = merge(theme, localTheme)
+
+  return (
+    <ThemeProvider theme={fullTheme} components={components}>
+      {children}
+    </ThemeProvider>
   )
+}
+
+export const wrapRootElement = ({ element }) => {
+  return <Root>{element}</Root>
+}

packages/gatsby-plugin-theme-ui/test/__mocks__/gatsby.js

@@ -0,0 +1,12 @@
+const React = require('react')
+const gatsby = jest.requireActual('gatsby')
+
+module.exports = {
+  ...gatsby,
+  graphql: jest.fn(),
+  useStaticQuery: jest.fn(() => ({
+    themeUiConfig: {
+      preset: {},
+    },
+  })),
+}