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

1b893518 · Grokling · Tim Neutkens · 12f423fa · 1b893518 · 1b893518
3 changed file
--- a/examples/with-styled-components/.babelrc
+++ b/examples/with-styled-components/.babelrc
+{
+  "presets": [
+    "next/babel",
+    "stage-0"
+  ],
+  "plugins": [
+    ["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ]
+  ]
+}
\ No newline at end of file
--- 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"

--- a/examples/with-styled-components/pages/_document.js
+++ b/examples/with-styled-components/pages/_document.js
 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>