Gatsby: [v2] error potencial con gatsby-plugin-jss: es necesario borrar SheetsRegistry

Descripción

Con ciertas combinaciones de estilos, SheetsRegistry debe borrarse entre las páginas renderizadas.

pasos para reproducir

Este repositorio tiene una reproducción simplificada y rastrea mi solución:
https://github.com/cpboyd/gatsby-layout-mui-bug

Nota: No estoy seguro de dónde debería ocurrir el restablecimiento de SheetsRegistry . Lo coloqué después de la llamada ToString() porque parecía el lugar más fácil para colocarlo.

Resultado Esperado

Las páginas deben mostrarse de forma coherente entre la representación de Javascript y la representación estática.

Resultado actual

Los estilos estaban revueltos.

Ambiente

Sistema:
SO: macOS High Sierra 10.13.6
CPU: CPU x64 Intel (R) Core (TM) i7-8750H a 2.20 GHz
Shell: 3.2.57 - / bin / bash
Binarios:
Nodo: 10.9.0 - / usr / local / bin / node
Hilado: 1.9.4 - / usr / local / bin / yarn
npm: 6.4.0 - / usr / local / bin / npm
Navegadores:
Cromo: 68.0.3440.106
Safari: 11.1.2
npm Paquetes:
gatsby: ^ 2.0.0-rc.0 => 2.0.0-rc.0
imagen-de-gatsby: ^ 2.0.0-rc.0 => 2.0.0-rc.0
gatsby-plugin-google-analytics: ^ 2.0.0-rc.0 => 2.0.0-rc.0
gatsby-plugin-jss: ^ 2.0.2-rc.0 => 2.0.2-rc.0
gatsby-plugin-layout: siguiente => 1.0.0-rc.0
Gatsby-plugin-manifest: ^ 2.0.2-rc.0 => 2.0.2-rc.0
gatsby-plugin-offline: ^ 2.0.0-rc.0 => 2.0.0-rc.0
gatsby-plugin-react-casco: ^ 3.0.0-rc.0 => 3.0.0-rc.0
gatsby-plugin-sharp: ^ 2.0.0-rc.0 => 2.0.0-rc.0
gatsby-plugin-typecript: ^ 2.0.0-rc.0 => 2.0.0-rc.1
gatsby-plugin-typography: ^ 2.2.0-rc.0 => 2.2.0-rc.0
Gatsby-comment-external-links: ^ 0.0.4 => 0.0.4
imágenes-de-observación-de-gatsby: ^ 2.0.1-rc.0 => 2.0.1-rc.0
iframe-respuesta-comentario-gatsby: ^ 2.0.0-rc.0 => 2.0.0-rc.0
sistema de archivos fuente gatsby: ^ 2.0.1-rc.0 => 2.0.1-rc.0
transformador-gatsby-json: ^ 2.1.1-rc.0 => 2.1.1-rc.0
comentario-del-transformador-gatsby: ^ 2.1.1-rc.0 => 2.1.1-rc.0
gatsby-transformer-sharp: ^ 2.1.1-rc.0 => 2.1.1-rc.0
npmGlobalPackages:
gatsby-cli: 1.1.58

Contenido del archivo (si se modifica)

gatsby-config.js : N / A
package.json : N / A
gatsby-node.js : N / A
gatsby-browser.js : N / A

La API gatsby-ssr.js comenzaba con un nuevo SheetsRegistry cada vez que mostraba la página:

exports.replaceRenderer = (
  { bodyComponent, replaceBodyHTMLString, setHeadComponents },
  { theme = {} }
) => {
  const sheets = new SheetsRegistry()

  const bodyHTML = renderToString(
    <JssProvider registry={sheets}>
      <ThemeProvider theme={theme}>{bodyComponent}</ThemeProvider>
    </JssProvider>
  )

  replaceBodyHTMLString(bodyHTML)
  setHeadComponents([
    <style
      type="text/css"
      id="server-side-jss"
      key="server-side-jss"
      dangerouslySetInnerHTML={{ __html: sheets.toString() }}
    />,
  ])
}

Ahora la variable tiene un alcance de archivo y parece persistir en las representaciones:

import React from "react"
import { JssProvider, SheetsRegistry, ThemeProvider } from "react-jss"

const sheets = new SheetsRegistry()

// eslint-disable-next-line react/prop-types,react/display-name
exports.wrapRootElement = ({ element }, { theme = {} }) => (
  <JssProvider registry={sheets}>
    <ThemeProvider theme={theme}>{element}</ThemeProvider>
  </JssProvider>
)

exports.onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <style
      type="text/css"
      id="server-side-jss"
      key="server-side-jss"
      dangerouslySetInnerHTML={{ __html: sheets.toString() }}
    />,
  ])