Gatsby: [v2] bug potentiel avec gatsby-plugin-jss : besoin d'effacer SheetsRegistry

La description

Avec certaines combinaisons de styles, le SheetsRegistry doit être effacé entre les pages rendues.

Étapes à reproduire

Ce référentiel a une reproduction simplifiée et suit mon correctif :
https://github.com/cpboyd/gatsby-layout-mui-bug

Remarque : Je ne sais pas où la réinitialisation du SheetsRegistry devrait avoir lieu. Je l'ai juste placé après l'appel ToString() parce que cela semblait l'endroit le plus facile pour le mettre.

Résultat attendu

Les pages doivent être rendues de manière cohérente entre le rendu Javascript et le rendu statique.

Résultat actuel

Les styles étaient mélangés.

Environnement

Système:
Système d'exploitation : macOS High Sierra 10.13.6
Processeur : processeur x64 Intel(R) Core(TM) i7-8750H à 2,20 GHz
Shell : 3.2.57 - /bin/bash
Binaires :
Nœud : 10.9.0 - /usr/local/bin/node
Fil : 1.9.4 - /usr/local/bin/yarn
npm : 6.4.0 - /usr/local/bin/npm
Navigateurs :
Chrome : 68.0.3440.106
Safari : 11.1.2
npmPaquets :
gatsby : ^2.0.0-rc.0 => 2.0.0-rc.0
image 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 : suivant => 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-helmet: ^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-typescript : ^2.0.0-rc.0 => 2.0.0-rc.1
gatsby-plugin-typography : ^2.2.0-rc.0 => 2.2.0-rc.0
gatsby-remark-external-links: ^0.0.4 => 0.0.4
gatsby-remark-images : ^2.0.1-rc.0 => 2.0.1-rc.0
gatsby-remark-responsive-iframe : ^2.0.0-rc.0 => 2.0.0-rc.0
gatsby-source-filesystem : ^2.0.1-rc.0 => 2.0.1-rc.0
gatsby-transformer-json : ^2.1.1-rc.0 => 2.1.1-rc.0
gatsby-transformer-remarque : ^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

Contenu du fichier (si modifié)

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

L'API gatsby-ssr.js commençait avec un nouveau SheetsRegistry chaque rendu de la page :

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() }}
    />,
  ])
}

Maintenant, la variable est limitée au fichier et semble persister dans les rendus :

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() }}
    />,
  ])