Support for cxs rehydration and removal of duplicate styles. (vercel#1860)

aranajhonny · timneutkens · commit 23574b548975 · 2017-05-06T11:37:47.000-07:00
* add cxs.rehydrate.

* add id='cxs-style'.
diff --git a/examples/with-cxs/pages/_document.js b/examples/with-cxs/pages/_document.js
@@ -1,5 +1,5 @@
 import Document, { Head, Main, NextScript } from 'next/document'
-import cxs from 'cxs'
+import cxs from 'cxs/lite'
 
 export default class MyDocument extends Document {
   static async getInitialProps ({ renderPage }) {
@@ -13,7 +13,7 @@ export default class MyDocument extends Document {
       <html>
         <Head>
           <title>My page</title>
-          <style dangerouslySetInnerHTML={{ __html: this.props.style }} />
+          <style id='cxs-style' dangerouslySetInnerHTML={{ __html: this.props.style }} />
         </Head>
         <body>
           <Main />
diff --git a/examples/with-cxs/pages/index.js b/examples/with-cxs/pages/index.js
@@ -1,5 +1,13 @@
 import React from 'react'
-import cxs from 'cxs'
+import cxs from 'cxs/lite'
+
+// Using cxs/lite on both the server and client,
+// the styles will need to be rehydrated.
+if (typeof window !== 'undefined') {
+  const styleTag = document.getElementById('cxs-style')
+  const serverCss = styleTag.innerHTML
+  cxs.rehydrate(serverCss)
+}
 
 export default () => (
   <div className={cx.root}>
