Gatsby: [v2] потенциальная ошибка с gatsby-plugin-jss: необходимо очистить SheetsRegistry

Описание

При определенных комбинациях стилей SheetsRegistry следует очищать между отображаемыми страницами.

Действия по воспроизведению

Это репо имеет упрощенное воспроизведение и отслеживает мои исправления для него:
https://github.com/cpboyd/gatsby-layout-mui-bug

Примечание: я не уверен, где должен происходить сброс SheetsRegistry . Я просто разместил его после вызова ToString() потому что это казалось самым простым местом для его размещения.

Ожидаемый результат

Страницы должны отображаться последовательно между визуализацией Javascript и статической визуализацией.

Фактический результат

Стили были перемешаны.

Среда

Система:
ОС: macOS High Sierra 10.13.6
Процессор: x64 Intel (R) Core (TM) i7-8750H CPU @ 2,20 ГГц
Оболочка: 3.2.57 - / bin / bash
Двоичные файлы:
Узел: 10.9.0 - / usr / local / bin / node
Пряжа: 1.9.4 - / usr / local / bin / yarn
npm: 6.4.0 - / usr / local / bin / npm
Браузеры:
Хром: 68.0.3440.106
Safari: 11.1.2
npmPackages:
Гэтсби: ^ 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: следующий => 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-реагировать-шлем: ^ 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
Гэтсби-замечание-внешние-ссылки: ^ 0.0.4 => 0.0.4
gatsby-замечание-изображения: ^ 2.0.1-rc.0 => 2.0.1-rc.0
gatsby-замечание-отзывчивый-iframe: ^ 2.0.0-rc.0 => 2.0.0-rc.0
исходная файловая система gatsby: ^ 2.0.1-rc.0 => 2.0.1-rc.0
Гэтсби-трансформатор-json: ^ 2.1.1-rc.0 => 2.1.1-rc.0
Гэтсби-трансформатор-примечание: ^ 2.1.1-rc.0 => 2.1.1-rc.0
Гэтсби-трансформатор-резкий: ^ 2.1.1-rc.0 => 2.1.1-rc.0
npmGlobalPackages:
gatsby-cli: 1.1.58

Содержимое файла (если изменено)

gatsby-config.js : нет данных
package.json : нет данных
gatsby-node.js : нет данных
gatsby-browser.js : нет данных

Исходный gatsby-ssr.js API начинался с нового SheetsRegistry каждый раз при отображении страницы:

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

Теперь переменная привязана к файлу и, похоже, сохраняется при рендеринге:

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