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

)

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.

---

Just a quick note for my first PR here: thanks to every contributors for this fantastic project! 👍

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

@@ -1,13 +1,19 @@
 import React from "react"
 import { ServerStyleSheet, StyleSheetManager } from "styled-components"
 
-const sheet = new ServerStyleSheet()
+const sheetByPathname = new Map()
 
 // 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 = new ServerStyleSheet()
+  sheetByPathname.set(pathname, sheet)
+  return <StyleSheetManager sheet={sheet.instance}>{element}</StyleSheetManager>
+}
 
-exports.onRenderBody = ({ setHeadComponents }) => {
-  setHeadComponents([sheet.getStyleElement()])
+exports.onRenderBody = ({ setHeadComponents, pathname }) => {
+  const sheet = sheetByPathname.get(pathname)
+  if (sheet) {
+    setHeadComponents([sheet.getStyleElement()])
+    sheetByPathname.delete(pathname)
+  }
 }