Render styled-jsx in _document example (vercel#1287)

timneutkens · arunoda · commit e1babdfe9d59 · 2017-02-28T05:15:49.000+05:30
diff --git a/examples/with-cxs/pages/_document.js b/examples/with-cxs/pages/_document.js
@@ -4,7 +4,7 @@ import cxs from 'cxs'
 export default class MyDocument extends Document {
   static async getInitialProps ({ renderPage }) {
     const page = renderPage()
-    let style = cxs.getCss()
+    const style = cxs.getCss()
     return { ...page, style }
   }
 
diff --git a/examples/with-styled-components/pages/_document.js b/examples/with-styled-components/pages/_document.js
@@ -4,16 +4,15 @@ import styleSheet from 'styled-components/lib/models/StyleSheet'
 export default class MyDocument extends Document {
   static async getInitialProps ({ renderPage }) {
     const page = renderPage()
-    const style = styleSheet.rules().map(rule => rule.cssText).join('\n')
-    return { ...page, style }
+    const styles = styleSheet.rules().map(rule => rule.cssText).join('\n')
+    return { ...page, styles }
   }
 
   render () {
     return (
       <html>
         <Head>
           <title>My page</title>
-          <style dangerouslySetInnerHTML={{ __html: this.props.style }} />
         </Head>
         <body>
           <Main />
diff --git a/readme.md b/readme.md
@@ -473,11 +473,13 @@ Pages in `Next.js` skip the definition of the surrounding document's markup. For
 ```jsx
 // ./pages/_document.js
 import Document, { Head, Main, NextScript } from 'next/document'
+import flush from 'styled-jsx/server'
 
 export default class MyDocument extends Document {
-  static async getInitialProps (ctx) {
-    const props = await Document.getInitialProps(ctx)
-    return { ...props, customValue: 'hi there!' }
+  static getInitialProps ({ renderPage }) {
+    const {html, head} = renderPage()
+    const styles = flush()
+    return { html, head, styles }
   }
 
   render () {

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ import cxs from 'cxs'`
`4`	`4`	`export default class MyDocument extends Document {`
`5`	`5`	`static async getInitialProps ({ renderPage }) {`
`6`	`6`	`const page = renderPage()`
`7`		`- let style = cxs.getCss()`
	`7`	`+ const style = cxs.getCss()`
`8`	`8`	`return { ...page, style }`
`9`	`9`	`}`
`10`	`10`