archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1 from zeit/add/css

Browse source 
Added css using aphrodite
This commit is contained in:
Naoyuki Kanezawa 2016-10-06 12:30:07 +09:00 committed by GitHub
commit 22cfcf5357
4 changed files with 19 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
lib/css.js Normal file
View file

@ -0,0 +1 @@
module.exports = require('aphrodite')

7
lib/document.js
View file

@ -25,10 +25,13 @@ export default class Document extends Component {
} }
export function Head (props, context) { export function Head (props, context) {
const { head } = context._documentProps const { head, css } = context._documentProps
const h = (head || []) const h = (head || [])
.map((h, i) => React.cloneElement(h, { key: '_next' + i })) .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 } Head.contextTypes = { _documentProps: PropTypes.any }

2
package.json
View file

@ -14,6 +14,7 @@
"test": "ava" "test": "ava"
}, },
"dependencies": { "dependencies": {
"aphrodite": "0.5.0",
"babel-core": "6.17.0", "babel-core": "6.17.0",
"babel-generator": "6.17.0", "babel-generator": "6.17.0",
"babel-loader": "6.2.5", "babel-loader": "6.2.5",
@ -41,6 +42,7 @@
}, },
"devDependencies": { "devDependencies": {
"ava": "0.16.0", "ava": "0.16.0",
"del": "2.2.2",
"gulp": "3.9.1", "gulp": "3.9.1",
"gulp-babel": "6.1.2", "gulp-babel": "6.1.2",
"gulp-cached": "1.1.0", "gulp-cached": "1.1.0",

8
server/render.js
View file

@ -4,6 +4,7 @@ import { renderToString, renderToStaticMarkup } from 'react-dom/server'
import fs from 'mz/fs' import fs from 'mz/fs'
import Document from '../lib/document' import Document from '../lib/document'
import App from '../lib/app' import App from '../lib/app'
import { StyleSheetServer } from '../lib/css'
export async function render (path, req, res, { root = process.cwd() } = {}) { export async function render (path, req, res, { root = process.cwd() } = {}) {
const mod = require(resolve(root, '.next', 'pages', path)) || {} 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 bundlePath = resolve(root, '.next', '.next', 'pages', (path || 'index') + '.js')
const component = await fs.readFile(bundlePath, 'utf8') const component = await fs.readFile(bundlePath, 'utf8')
const { html, css } = StyleSheetServer.renderStatic(() => {
const app = createElement(App, { const app = createElement(App, {
Component, Component,
props, props,
router: {} router: {}
}) })
return renderToString(app)
})
const doc = createElement(Document, { const doc = createElement(Document, {
head: [], head: [],
html: renderToString(app), html: html,
css: css,
data: { component }, data: { component },
hotReload: false hotReload: false
}) })