Gatsby: [v2] potensi bug dengan gatsby-plugin-jss: perlu menghapus SheetsRegistry

Deskripsi

Dengan kombinasi gaya tertentu, SheetsRegistry harus dibersihkan di antara halaman yang dirender.

Langkah-langkah untuk mereproduksi

Repo ini memiliki reproduksi yang disederhanakan dan melacak perbaikan saya untuk itu:
https://github.com/cpboyd/gatsby-layout-mui-bug

Catatan: Saya tidak yakin di mana mengatur ulang SheetsRegistry harus dilakukan. Saya baru saja meletakkannya setelah panggilan ToString() karena itu tampaknya tempat yang paling mudah untuk meletakkannya.

Hasil yang diharapkan

Halaman harus dirender secara konsisten antara rendering Javascript dan rendering statis.

Hasil sebenarnya

Gayanya campur aduk.

Lingkungan Hidup

Sistem:
OS: macOS Sierra Tinggi 10.13.6
CPU: x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Shell: 3.2.57 - /bin/bash
Biner:
Node: 10.9.0 - /usr/local/bin/node
Benang: 1.9.4 - /usr/local/bin/benang
npm: 6.4.0 - /usr/local/bin/npm
Browser:
Chrome: 68.0.3440.106
Safari: 11.1.2
npmPaket:
gatsby: ^2.0.0-rc.0 => 2.0.0-rc.0
gatsby-image: ^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: next => 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-tipografi: ^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-remark: ^2.1.1-rc.0 => 2.1.1-rc.0
gatsby-transformer-sharp: ^2.1.1-rc.0 => 2.1.1-rc.0
npmGlobalPaket:
gatsby-cli: 1.1.58

Isi file (jika diubah)

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

gatsby-ssr.js API asli dimulai dengan SheetsRegistry setiap kali merender halaman:

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

Sekarang variabel tersebut dicakup file dan tampaknya bertahan di seluruh rendering:

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