From 7a39dac8c7addadbcb480ebdbccf84812dc901d4 Mon Sep 17 00:00:00 2001 From: Dan Zajdband Date: Wed, 5 Oct 2016 22:42:55 -0400 Subject: [PATCH] Added css using aphrodite --- lib/css.js | 1 + lib/document.js | 7 +++++-- package.json | 2 ++ server/render.js | 16 +++++++++++----- 4 files changed, 19 insertions(+), 7 deletions(-) create mode 100644 lib/css.js diff --git a/lib/css.js b/lib/css.js new file mode 100644 index 000000000000000..96716816a642ac0 --- /dev/null +++ b/lib/css.js @@ -0,0 +1 @@ +module.exports = require('aphrodite') diff --git a/lib/document.js b/lib/document.js index 3e0789c0a371892..189b4d50920c987 100644 --- 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 {h} + return + {h} + + } Head.contextTypes = { _documentProps: PropTypes.any } diff --git a/package.json b/package.json index 08707b16340205d..71718775ddf2044 100644 --- 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 index 7e2c9894a8bad9c..a544d6d5314b9ea 100644 --- 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 })