Add SSR to examples/with-styled-components + bump styled_components v2 (vercel#1908)

Grokling · timneutkens · commit 1b893518bbdf · 2017-05-07T14:25:33.000+02:00
diff --git a/examples/with-styled-components/.babelrc b/examples/with-styled-components/.babelrc
@@ -0,0 +1,9 @@
+{
+  "presets": [
+    "next/babel",
+    "stage-0"
+  ],
+  "plugins": [
+    ["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ]
+  ]
+}
diff --git a/examples/with-styled-components/package.json b/examples/with-styled-components/package.json
@@ -7,10 +7,12 @@
     "start": "next start"
   },
   "dependencies": {
+    "babel-plugin-styled-components": "^1.1.4",
+    "babel-preset-stage-0": "^6.24.1",
     "next": "latest",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
-    "styled-components": "^1.4.4"
+    "styled-components": "^2.0.0-17"
   },
   "author": "",
   "license": "ISC"
diff --git a/examples/with-styled-components/pages/_document.js b/examples/with-styled-components/pages/_document.js
@@ -1,23 +1,21 @@
 import Document, { Head, Main, NextScript } from 'next/document'
-import styleSheet from 'styled-components/lib/models/StyleSheet'
+import { ServerStyleSheet } from 'styled-components'
 
 export default class MyDocument extends Document {
-  static async getInitialProps ({ renderPage }) {
-    const page = renderPage()
-    const styles = (
-      <style dangerouslySetInnerHTML={{ __html: styleSheet.rules().map(rule => rule.cssText).join('\n') }} />
-    )
-    return { ...page, styles }
-  }
-
   render () {
+    const sheet = new ServerStyleSheet()
+    const main = sheet.collectStyles(<Main />)
+    const styleTags = sheet.getStyleElement()
     return (
       <html>
         <Head>
           <title>My page</title>
+          {styleTags}
         </Head>
         <body>
-          <Main />
+          <div className='root'>
+            {main}
+          </div>
           <NextScript />
         </body>
       </html>
