terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

Added css using aphrodite

Browse source
This commit is contained in:
Dan Zajdband 2016-10-05 22:42:55 -04:00
parent 49295451e1
commit 7a39dac8c7
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) {
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 }

2
package.json
View file

@ -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",

16
server/render.js
View file

@ -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
})