Add a prism preset options field

Author: Laurie Barth

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

@@ -23,6 +23,7 @@ prevent a flash of unstyled colors when using color modes.
 | `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    |
+| `prismPreset`              | `null` | The name of the preset you'd like to use to style code blocks inside your markdown files. The available presets can be found in the [theme-ui docs](https://theme-ui.com/packages/prism/).  |
 
 > 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).
 
@@ -36,8 +37,9 @@ module.exports = {
   plugins: [
     { resolve: 'gatsby-plugin-theme-ui',
       options: {
-        themeModulePath: '@theme-ui/preset-funk'
+        themeModulePath: '@theme-ui/preset-funk',
         // or themeModule: require('@theme-ui/preset-funk')
+        prismPreset: 'night-owl'
       }
     }],
 }

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

@@ -3,6 +3,9 @@ exports.onPreInit = (__, options) => {
     if(themeModulePath) {
         options.themeModulePath = require(themeModulePath)
     }
+    if(prismPreset) {
+      options.prismPreset = require(`@theme-ui/prism/presets/${prismPreset}.json`)
+    }
 }
 
 exports.createSchemaCustomization = ({ actions }) => {
@@ -13,20 +16,22 @@ exports.createSchemaCustomization = ({ actions }) => {
         themeModule: JSON,
         themeModulePath: JSON,
         moduleExportName: String,
+        prismPreset: JSON,
       }
     `)
   }
 
   exports.sourceNodes = (
     { actions, createContentDigest },
-    { moduleExportName = 'default', themeModule, themeModulePath}
+    { prismPreset, moduleExportName = 'default', themeModule, themeModulePath}
   ) => {      
     const { createNode } = actions
 
     const themeUiConfig = {
         themeModule,
         themeModulePath,
         moduleExportName,
+        prismPreset
     }
 
     createNode({

packages/gatsby-plugin-theme-ui/package.json

@@ -6,7 +6,8 @@
   "license": "MIT",
   "peerDependencies": {
     "gatsby": "^2.13.1",
-    "theme-ui": "^0.3.0"
+    "theme-ui": "^0.3.0",
+    "@theme-ui/prism": "0.3.0"
   },
   "keywords": [
     "gatsby",

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

@@ -7,6 +7,7 @@ const useThemeUiConfig = () => {
         themeModule
         themeModulePath
         moduleExportName
+        prismPreset
       }
     }
   `)

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

@@ -27,6 +27,7 @@ const Root = ({children}) => {
   }
 
   themeWrapper = merge(themeWrapper, {
+    prism: prismPreset,
     ...theme
   })
   return (