Fix server build styles (#149)

.changeset/purple-trainers-switch.md

@@ -0,0 +1,5 @@
+---
+'docusaurus-theme-redoc': major
+---
+
+Enable server style sheet collection by default, fixes style issues on fresh load

packages/docusaurus-theme-redoc/src/index.ts

@@ -15,7 +15,7 @@ export default function redocTheme(
 ): Plugin<null> {
   return {
     name: 'docusaurus-theme-redoc',
-    configureWebpack() {
+    configureWebpack(_config, isServer) {
       return {
         resolve: {
           fallback: {
@@ -29,6 +29,14 @@ export default function redocTheme(
             ),
           }),
           new NodePolyfillPlugin(),
+          ...(isServer
+            ? [
+                new webpack.NormalModuleReplacementPlugin(
+                  /theme\/Redoc\/Styles\.jsx/,
+                  path.join(__dirname, 'theme', 'Redoc', 'ServerStyles.js'),
+                ),
+              ]
+            : []),
         ],
       };
     },

packages/docusaurus-theme-redoc/src/redocData.ts

@@ -1,5 +1,5 @@
 import { RedocRawOptions } from 'redoc';
-import { merge } from './merge';
+import merge from 'lodash/merge';
 import { GlobalData, RedocThemeOverrides, ThemeOptions } from './types/options';
 
 const defaultOptions: Partial<RedocRawOptions> = {

packages/docusaurus-theme-redoc/src/theme/Redoc/Redoc.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Redoc as RedocComponent } from 'redoc';
 import { SpecProps } from '../../types/common';
 import { useSpec } from '../../hooks/useSpec';
+import { ServerStyles } from './Styles';
 import './styles.css';
 
 /*!
@@ -14,9 +15,12 @@ function Redoc(props: SpecProps): JSX.Element {
   const { store } = useSpec(props);
 
   return (
-    <div className="redocusaurus">
-      <RedocComponent store={store} />
-    </div>
+    <>
+      <ServerStyles store={store} />
+      <div className="redocusaurus">
+        <RedocComponent store={store} />
+      </div>
+    </>
   );
 }
 

packages/docusaurus-theme-redoc/src/theme/Redoc/ServerStyles.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { AppStore, Redoc } from 'redoc';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { renderToString } from 'react-dom/server';
+import { ServerStyleSheet } from 'styled-components';
+
+export function ServerStyles({ store }: { store: AppStore }) {
+  const sheet = new ServerStyleSheet();
+  renderToString(sheet.collectStyles(React.createElement(Redoc, { store })));
+  const css = sheet.getStyleTags();
+
+  return (
+    <div
+      className="redocusaurus-styles"
+      dangerouslySetInnerHTML={{
+        __html: css,
+      }}
+    />
+  );
+}

packages/docusaurus-theme-redoc/src/theme/Redoc/Styles.tsx

@@ -0,0 +1,7 @@
+import type { AppStore } from 'redoc';
+
+function ClientStyles(_props: { store: AppStore }) {
+  return null;
+}
+
+export { ClientStyles as ServerStyles };

packages/docusaurus-theme-redoc/src/types/modules.d.ts

@@ -4,14 +4,6 @@ interface SpecProps {
   url?: string;
 }
 
-declare module '@theme/ServerStyle' {
-  /**
-   * @see https://github.com/facebook/docusaurus/issues/3236#issuecomment-788953743
-   */
-  const ServerStyle: (props: { from: React.ReactNode }) => JSX.Element;
-  export default ServerStyle;
-}
-
 declare module '@theme/Redoc' {
   const Redoc: (props: SpecProps) => JSX.Element;
   export default Redoc;