fix(gatsby-plugin-jss): use separate SheetsRegistry for each page (ga…

…tsbyjs#9401)

<!--
  Q. Which branch should I use for my pull request?
  A. Use `master` branch (probably).

  Q. Which branch if my change is a bug fix for Gatsby v1?
  A. In this case, you should use the `v1` branch

  Q. Which branch if I'm still not sure?
  A. Use `master` branch. Ask in the PR if you're not sure and a Gatsby maintainer will be happy to help :)

  Note: We will only accept bug fixes for Gatsby v1. New features should be added to Gatsby v2.

  Learn more about contributing: https://www.gatsbyjs.org/docs/how-to-contribute/
-->

Not sure about the branch for this one. Just a small patch based off of cpboyd's solution for this issue: gatsbyjs#7716

closes gatsbyjs#7716

packages/gatsby-plugin-jss/src/gatsby-ssr.js

@@ -1,22 +1,34 @@
 import React from "react"
 import { JssProvider, SheetsRegistry, ThemeProvider } from "react-jss"
 
-const sheets = new SheetsRegistry()
+/**
+ * Keep track of SheetRegistry for each page
+ */
+const sheetsRegistryManager = new Map()
 
 // eslint-disable-next-line react/prop-types,react/display-name
-exports.wrapRootElement = ({ element }, { theme = {} }) => (
-  <JssProvider registry={sheets}>
-    <ThemeProvider theme={theme}>{element}</ThemeProvider>
-  </JssProvider>
-)
+exports.wrapRootElement = ({ element, pathname }, { theme = {} }) => {
+  const sheets = new SheetsRegistry()
+  sheetsRegistryManager.set(pathname, sheets)
 
-exports.onRenderBody = ({ setHeadComponents }) => {
-  setHeadComponents([
-    <style
-      type="text/css"
-      id="server-side-jss"
-      key="server-side-jss"
-      dangerouslySetInnerHTML={{ __html: sheets.toString() }}
-    />,
-  ])
+  return (
+    <JssProvider registry={sheets}>
+      <ThemeProvider theme={theme}>{element}</ThemeProvider>
+    </JssProvider>
+  )
+}
+
+exports.onRenderBody = ({ setHeadComponents, pathname }) => {
+  const sheets = sheetsRegistryManager.get(pathname)
+  if (sheets) {
+    setHeadComponents([
+      <style
+        type="text/css"
+        id="server-side-jss"
+        key="server-side-jss"
+        dangerouslySetInnerHTML={{ __html: sheets.toString() }}
+      />,
+    ])
+    sheetsRegistryManager.delete(pathname)
+  }
 }

packages/gatsby/cache-dir/api-ssr-docs.js

@@ -142,6 +142,7 @@ exports.onPreRenderHTML = true
  * @param {object} $0
  * @param {object} $0.element The "Page" React Element built by Gatsby.
  * @param {object} $0.props Props object used by page.
+ * @param {string} $0.pathname Path of page.
  * @example
  * import React from "react"
  * import Layout from "./src/components/Layout"

packages/gatsby/cache-dir/static-entry.js

@@ -52,7 +52,7 @@ const createElement = React.createElement
 export default (pagePath, callback) => {
   let bodyHtml = ``
   let headComponents = [
-    <meta name="generator" content={`Gatsby ${gatsbyVersion}`} />
+    <meta name="generator" content={`Gatsby ${gatsbyVersion}`} />,
   ]
   let htmlAttributes = {}
   let bodyAttributes = {}
@@ -163,10 +163,10 @@ export default (pagePath, callback) => {
 
   const bodyComponent = apiRunner(
     `wrapRootElement`,
-    { element: routerElement },
+    { element: routerElement, pathname: pagePath },
     routerElement,
     ({ result }) => {
-      return { element: result }
+      return { element: result, pathname: pagePath }
     }
   ).pop()