Downgrade Glamor to v2 as v3 unstable

gatsbyjs · Jul 20, 2017 · 42e5286 · 42e5286
1 parent 95d7ae1
commit 42e5286
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 11 deletions.
diff --git a/packages/gatsby-plugin-glamor/package.json b/packages/gatsby-plugin-glamor/package.json
@@ -5,10 +5,7 @@
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
     "babel-plugin-glamor": "^3.0.0-1",
-    "glamor": "next",
-    "glamor-inline": "^1.0.5",
-    "glamor-react": "^3.0.0-1",
-    "glamor-server": "next"
+    "glamor": "^2.20.29"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1"

diff --git a/packages/gatsby-plugin-glamor/src/gatsby-browser.js b/packages/gatsby-plugin-glamor/src/gatsby-browser.js
@@ -0,0 +1,7 @@
+import { rehydrate } from "glamor"
+
+exports.onClientEntry = () => {
+  if (window._glamor) {
+    rehydrate(window._glamor)
+  }
+}
diff --git a/packages/gatsby-plugin-glamor/src/gatsby-node.js b/packages/gatsby-plugin-glamor/src/gatsby-node.js
@@ -4,16 +4,18 @@ const webpack = require(`webpack`)
 exports.modifyWebpackConfig = ({ config }) =>
   config.plugin(`Glamor`, webpack.ProvidePlugin, [
     {
-      Glamor: `glamor-react`,
+      Glamor: `glamor/react`,
     },
   ])
 
 // Add Glamor support
+// // Add Glamor support
 exports.modifyBabelrc = ({ babelrc }) => {
   return {
+    ...babelrc,
     plugins: babelrc.plugins.concat([
       [`transform-react-jsx`, { pragma: `Glamor.createElement` }],
-      `babel-plugin-glamor`,
+      `glamor/babel-hoist`,
     ]),
   }
 }
diff --git a/packages/gatsby-plugin-glamor/src/gatsby-ssr.js b/packages/gatsby-plugin-glamor/src/gatsby-ssr.js
@@ -1,9 +1,27 @@
+import React from "react"
 import { renderToString } from "react-dom/server"
-import inline from "glamor-inline"
+import renderStatic from "glamor/server"
 
-exports.replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => {
-  const bodyHTML = renderToString(bodyComponent)
-  const inlinedHTML = inline(bodyHTML)
+exports.replaceRenderer = ({
+  bodyComponent,
+  replaceBodyHTMLString,
+  setHeadComponents,
+}) => {
+  let { html, css, ids } = renderStatic(() => renderToString(bodyComponent))
 
-  replaceBodyHTMLString(inlinedHTML)
+  replaceBodyHTMLString(html)
+
+  setHeadComponents([
+    <style id="glamor-styles" dangerouslySetInnerHTML={{ __html: css }} />,
+    <script
+      id="glamor-ids"
+      dangerouslySetInnerHTML={{
+        __html: `
+        // <![CDATA[
+        window._glamor = ${JSON.stringify(ids)}
+        // ]]>
+        `,
+      }}
+    />,
+  ])
 }