Merge pull request #1 from zeit/add/css

nkzawa · web-flow · commit 22cfcf535754 · 2016-10-06T12:30:07.000+09:00
Added css using aphrodite
diff --git a/lib/css.js b/lib/css.js
@@ -0,0 +1 @@
+module.exports = require('aphrodite')
diff --git a/lib/document.js b/lib/document.js
@@ -25,10 +25,13 @@ export default class Document extends Component {
 }
 
 export function Head (props, context) {
-  const { head } = context._documentProps
+  const { head, css } = context._documentProps
   const h = (head || [])
   .map((h, i) => React.cloneElement(h, { key: '_next' + i }))
-  return <head>{h}</head>
+  return <head>
+    {h}
+    <style data-aphrodite>{css.content}</style>
+  </head>
 }
 
 Head.contextTypes = { _documentProps: PropTypes.any }
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "test": "ava"
   },
   "dependencies": {
+    "aphrodite": "0.5.0",
     "babel-core": "6.17.0",
     "babel-generator": "6.17.0",
     "babel-loader": "6.2.5",
@@ -41,6 +42,7 @@
   },
   "devDependencies": {
     "ava": "0.16.0",
+    "del": "2.2.2",
     "gulp": "3.9.1",
     "gulp-babel": "6.1.2",
     "gulp-cached": "1.1.0",
diff --git a/server/render.js b/server/render.js
@@ -4,6 +4,7 @@ import { renderToString, renderToStaticMarkup } from 'react-dom/server'
 import fs from 'mz/fs'
 import Document from '../lib/document'
 import App from '../lib/app'
+import { StyleSheetServer } from '../lib/css'
 
 export async function render (path, req, res, { root = process.cwd() } = {}) {
   const mod = require(resolve(root, '.next', 'pages', path)) || {}
@@ -17,15 +18,20 @@ export async function render (path, req, res, { root = process.cwd() } = {}) {
   const bundlePath = resolve(root, '.next', '.next', 'pages', (path || 'index') + '.js')
   const component = await fs.readFile(bundlePath, 'utf8')
 
-  const app = createElement(App, {
-    Component,
-    props,
-    router: {}
+  const { html, css } = StyleSheetServer.renderStatic(() => {
+    const app = createElement(App, {
+      Component,
+      props,
+      router: {}
+    })
+
+    return renderToString(app)
   })
 
   const doc = createElement(Document, {
     head: [],
-    html: renderToString(app),
+    html: html,
+    css: css,
     data: { component },
     hotReload: false
   })

Original file line number	Diff line number	Diff line change
`@@ -25,10 +25,13 @@ export default class Document extends Component {`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`export function Head (props, context) {`
`28`		`- const { head } = context._documentProps`
	`28`	`+ const { head, css } = context._documentProps`
`29`	`29`	`const h = (head \|\| [])`
`30`	`30`	`.map((h, i) => React.cloneElement(h, { key: '_next' + i }))`
`31`		`- return <head>{h}</head>`
	`31`	`+ return <head>`
	`32`	`+ {h}`
	`33`	`+ <style data-aphrodite>{css.content}</style>`
	`34`	`+ </head>`
`32`	`35`	`}`
`33`	`36`
`34`	`37`	`Head.contextTypes = { _documentProps: PropTypes.any }`