Merge pull request #1 from zeit/add/css

Added css using aphrodite
vercel · Oct 6, 2016 · 22cfcf5 · 22cfcf5
2 parents 20e90ed + 7a39dac
commit 22cfcf5
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 7 deletions.
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
   })