From 634ddd7ee0851e84c2dfbbf0ad2df857e5f94928 Mon Sep 17 00:00:00 2001
From: Nadiia <nadiia.dmytrenko@gmail.com>
Date: Fri, 15 Dec 2017 17:53:26 -0800
Subject: [PATCH] [gatsby-plugin-styletron] Hydrate Styletron on a client with
 server-rendered styles. (#3236)

* Hydrate Styletron on a client with server-rendered styles to prevent re-rendering of server-rendered styles. Set styletron styles as dangerouslySetInnerHTML to avoid escaping characters.

* format
---
 docs/docs/gatsby-starters.md                     |  6 +++---
 .../src/gatsby-browser.js                        | 16 +++++++++-------
 .../gatsby-plugin-styletron/src/gatsby-ssr.js    | 11 ++++++++---
 packages/gatsby/src/commands/data-explorer.js    |  1 -
 4 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/docs/docs/gatsby-starters.md b/docs/docs/gatsby-starters.md
index e62a68e0c480d..e7009ef028075 100644
--- a/docs/docs/gatsby-starters.md
+++ b/docs/docs/gatsby-starters.md
@@ -288,11 +288,11 @@ Community:
   * Colorful homepage, and also includes a Landing Page and Generic Page components.
   * Many elements are available, including buttons, forms, tables, and pagination.
   * Styling with SCSS
-  
+
 * [gatsby-firebase-authentication](https://github.com/rwieruch/gatsby-firebase-authentication) [(demo)](https://react-firebase-authentication.wieruch.com/)
-  
+
   Features:
-  
+
   * Sign In, Sign Up, Sign Out
   * Password Forget
   * Password Change
diff --git a/packages/gatsby-plugin-styletron/src/gatsby-browser.js b/packages/gatsby-plugin-styletron/src/gatsby-browser.js
index 26aa113d9977f..d8af19e78c44b 100644
--- a/packages/gatsby-plugin-styletron/src/gatsby-browser.js
+++ b/packages/gatsby-plugin-styletron/src/gatsby-browser.js
@@ -2,10 +2,12 @@ const React = require(`react`)
 const Styletron = require(`styletron-client`)
 const { StyletronProvider } = require(`styletron-react`)
 
-const styletron = new Styletron()
-
-exports.wrapRootComponent = ({ Root }) => () => (
-  <StyletronProvider styletron={styletron}>
-    <Root />
-  </StyletronProvider>
-)
+exports.wrapRootComponent = ({ Root }) => () => {
+  const styleElements = document.getElementsByClassName(`_styletron_hydrate_`)
+  const styletron = new Styletron(styleElements)
+  return (
+    <StyletronProvider styletron={styletron}>
+      <Root />
+    </StyletronProvider>
+  )
+}
diff --git a/packages/gatsby-plugin-styletron/src/gatsby-ssr.js b/packages/gatsby-plugin-styletron/src/gatsby-ssr.js
index bc4db43737092..7ff670009f448 100644
--- a/packages/gatsby-plugin-styletron/src/gatsby-ssr.js
+++ b/packages/gatsby-plugin-styletron/src/gatsby-ssr.js
@@ -18,9 +18,14 @@ exports.replaceRenderer = ({
 
   const stylesheets = styletron.getStylesheets()
   const headComponents = stylesheets.map((sheet, index) => (
-    <style media={sheet.media || `all`} key={index}>
-      {sheet.css}
-    </style>
+    <style
+      media={sheet.media}
+      className="_styletron_hydrate_"
+      key={index}
+      dangerouslySetInnerHTML={{
+        __html: sheet.css,
+      }}
+    />
   ))
 
   setHeadComponents(headComponents)
diff --git a/packages/gatsby/src/commands/data-explorer.js b/packages/gatsby/src/commands/data-explorer.js
index a155b8e93c7b9..803b1e93ab5f4 100644
--- a/packages/gatsby/src/commands/data-explorer.js
+++ b/packages/gatsby/src/commands/data-explorer.js
@@ -24,4 +24,3 @@ module.exports = async (program: any) => {
   console.log(`Gatsby data explorer running at`, `http://${host}:${port}`)
   app.listen(port, host)
 }
-