Docz: Theme customization appears broken in 2.3.0

[stefcameron]

Bug Report

Thank you for the continued work on this project. With the 2.3.0 release of docz and gatsby-theme-docz, it feels like theme customization is broken.

What's described in https://www.docz.site/docs/gatsby-theme under "Creating your own Docz theme" no longer works for using custom components.

I can't figure out why. I don't see anything immediately apparent in the CHANGELOGs that would be breaking change in relation to theme customization.

If I go back to 2.2.0, customizations for code and pre work as expected.

I also tried just having a pass-through src/gatsby-theme-docz/index.js file that just uses exactly the same components as from import baseComponents from 'gatsby-theme-docz/src/components', no substitutions, and it works in 2.2.0, but doesn't work in 2.3.0.

In 2.2.0, my <code> and <pre> tags are nicely formatted, whether using the base components or using my customizations. My customizations get called in this case.

In 2.3.0, they're just plain tags, no theme formatting whatsoever, whether I'm using base components or my customizations. If I use my customizations, they don't get called. Just ignored.

It also makes no difference whether I build with docz build or docz dev. The outcome is the same: No formatted code blocks.

Here's my src/gatsby-theme-docz/index.js file (this is nearly verbatim your example in your docs):

import React from 'react';
import { theme, useConfig, ComponentsProvider } from 'docz';
import { Styled, ThemeProvider } from 'theme-ui';
import defaultTheme from 'gatsby-theme-docz/src/theme';
import components from 'gatsby-theme-docz/src/components';

const map = {
  ...components
};

const Theme = ({ children }) => {
  const config = useConfig();
  return (
    <ThemeProvider theme={config.themeConfig}>
      <ComponentsProvider components={map}>
        <Styled.root>{children}</Styled.root>
      </ComponentsProvider>
    </ThemeProvider>
  );
};

export default theme(defaultTheme)(Theme);

Environment

• docz version: 2.3.0
• OS: macOS 10.15.3
• Node/npm version: Node 12.16.1 / npm 6.13.7 / yarn 1.22.4

Additional context/Screenshots

This is the code block in 2.2.0 (properly formatted with default theme):

And this is the same one in 2.3.0 (no formatting at all):

[rakannimer]

Hey @stefcameron,

Thanks for catching and reporting this issue!

I think it's caused by this commit.

Any chance you can provide a small repro to make it faster to look into ?

[stefcameron]

@rakannimer I can try, but will take some time. It would involve a bunch of files. How would I provide that to you?

[rakannimer]

A link to a public github repo would work. Please take your time !

[stefcameron]

@rakannimer As requested: https://github.com/stefcameron/docz-issue-1443

[rakannimer]

It should be fixed in 2.3.1.

Could you give it a try and let us know ?

[stefcameron]

@rakannimer Yes, 2.3.1 fixes the issue! Thank you for the quick turn-around. This issue can be closed as "fixed" now but I'm leaving it open for you in case there's more to do in your process. Otherwise, feel free to close it.

[rakannimer]

Happy to hear that @stefcameron. Thanks for reporting and providing a repro !