Merge pull request #879 from system-ui/prism-options

Add Prism preset to options

Author: LB

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

@@ -20,6 +20,7 @@ prevent a flash of unstyled colors when using color modes.
 
 | Key                      | Default value    | Description                                                                      |
 | ------------------------ | ---------------- | -------------------------------------------------------------------------------- |
+| `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/). You can also use a package string of your own choosing. |
 | `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`.
@@ -34,8 +35,8 @@ module.exports = {
   plugins: [
     { resolve: 'gatsby-plugin-theme-ui',
       options: {
+        prismPreset: 'night-owl'
         preset: '@theme-ui/preset-funk'
-        // or require('@theme-ui/preset-funk')
       }
     }],
 }

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

@@ -1,5 +1,7 @@
-exports.onPreInit = (__, options) => {
-  let { preset } = options
+const prismPresetDictionary = require(`./utils/preset-dictionary`)
+
+exports.onPreInit = ({ reporter }, options) => {
+  let { preset, prismPreset } = options
 
   if (typeof preset === 'string') {
     try {
@@ -10,6 +12,18 @@ exports.onPreInit = (__, options) => {
       )
     }
   }
+
+  if (prismPreset in prismPresetDictionary) {
+    prismPreset = prismPresetDictionary[prismPreset]
+  }
+
+  if (prismPreset) {
+    try {
+      options.prismPreset = require(prismPreset)
+    } catch {
+      reporter.warn(`It appears the prism dependency is not installed.`)
+    }
+  }
 }
 
 exports.createSchemaCustomization = ({ actions }) => {
@@ -18,15 +32,20 @@ exports.createSchemaCustomization = ({ actions }) => {
   createTypes(`
       type ThemeUiConfig implements Node {
         preset: JSON,
+        prismPreset: JSON,
       }
     `)
 }
 
-exports.sourceNodes = ({ actions, createContentDigest }, { preset = {} }) => {
+exports.sourceNodes = (
+  { actions, createContentDigest },
+  { preset = {}, prismPreset = {} }
+) => {
   const { createNode } = actions
 
   const themeUiConfig = {
     preset,
+    prismPreset,
   }
 
   createNode({

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

@@ -5,6 +5,7 @@ const useThemeUiConfig = () => {
     query {
       themeUiConfig(id: { eq: "gatsby-plugin-theme-ui-config" }) {
         preset
+        prismPreset
       }
     }
   `)

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

@@ -6,11 +6,17 @@ import useThemeUiConfig from './hooks/configOptions'
 
 const Root = ({ children }) => {
   const themeUiConfig = useThemeUiConfig()
-  const { preset } = themeUiConfig
+  const { preset, prismPreset } = themeUiConfig
 
   const theme = preset.default || preset
 
-  const fullTheme = merge(theme, localTheme)
+  const themeWithPrism = merge(theme, {
+    styles: {
+      pre: prismPreset,
+    },
+  })
+
+  const fullTheme = merge(themeWithPrism, localTheme)
 
   return (
     <ThemeProvider theme={fullTheme} components={components}>

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

@@ -7,6 +7,7 @@ module.exports = {
   useStaticQuery: jest.fn(() => ({
     themeUiConfig: {
       preset: {},
+      prismPreset: {},
     },
   })),
 }

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

@@ -23,6 +23,9 @@ test('renders with theme context', () => {
   const root = render(wrapRootElement({ element: <Consumer /> }, {}))
   expect(context.theme).toEqual({
     colors: {},
+    styles: {
+      pre: {},
+    },
   })
 })
 
@@ -32,8 +35,8 @@ test.skip('renders with ColorMode component', () => {
     modes: {
       dark: {
         primary: 'magenta',
-      }
-    }
+      },
+    },
   }
   const root = renderer.create(
     wrapRootElement(

packages/gatsby-plugin-theme-ui/utils/preset-dictionary.js

@@ -0,0 +1,21 @@
+module.exports = {
+  dracula: '@theme-ui/prism/presets/dracula.json',
+  'duotone-dark': '@theme-ui/prism/presets/duotone-dark.json',
+  'duotone-light': '@theme-ui/prism/presets/duotone-light.json',
+  github: '@theme-ui/prism/presets/github.json',
+  'night-owl-light': '@theme-ui/prism/presets/night-owl-light.json',
+  'night-owl': '@theme-ui/prism/presets/night-owl.json',
+  'oceanic-next': '@theme-ui/prism/presets/oceanic-next.json',
+  'prism-coy': '@theme-ui/prism/presets/prism-coy.json',
+  'prism-dark': '@theme-ui/prism/presets/prism-dark.json',
+  'prism-funky': '@theme-ui/prism/presets/prism-funky.json',
+  'prism-okaidia': '@theme-ui/prism/presets/prism-okaidia.json',
+  'prism-solarizedlight': '@theme-ui/prism/presets/prism-solarizedlight.json',
+  'prism-tomorrow': '@theme-ui/prism/presets/prism-tomorrow.json',
+  'prism-twilight': '@theme-ui/prism/presets/prism-twilight.json',
+  prism: '@theme-ui/prism/presets/prism.json',
+  'shades-of-purple': '@theme-ui/prism/presets/shades-of-purple.json',
+  'theme-ui': '@theme-ui/prism/presets/theme-ui.json',
+  ultramin: '@theme-ui/prism/presets/ultramin.json',
+  'vs-dark': '@theme-ui/prism/presets/vs-dark.json',
+}