fix(gatsby-plugin-styled-components): fix global styles pollution (#9922

)

Fix #9922

`ServerStyleSheet` should be specific to each pages in order to not pollutes the other. Theses changes removes the "global" stylesheet and use the `pathname` for identify each pages.

packages/gatsby-plugin-styled-components/src/gatsby-ssr.js

@@ -1,13 +1,18 @@
 import React from "react"
 import { ServerStyleSheet, StyleSheetManager } from "styled-components"
 
-const sheet = new ServerStyleSheet()
+const sheetByPathname = {}
 
 // eslint-disable-next-line react/prop-types,react/display-name
-exports.wrapRootElement = ({ element }) => (
-  <StyleSheetManager sheet={sheet.instance}>{element}</StyleSheetManager>
-)
+exports.wrapRootElement = ({ element, pathname }) => {
+  const sheet = (sheetByPathname[pathname] = new ServerStyleSheet())
+  return <StyleSheetManager sheet={sheet.instance}>{element}</StyleSheetManager>
+}
+
+exports.onRenderBody = ({ setHeadComponents, pathname }) => {
+  if (!sheetByPathname[pathname]) {
+    sheetByPathname[pathname] = new ServerStyleSheet()
+  }
 
-exports.onRenderBody = ({ setHeadComponents }) => {
-  setHeadComponents([sheet.getStyleElement()])
+  setHeadComponents([sheetByPathname[pathname].getStyleElement()])
 }