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

update with-fela to Fela > 5.0 (#2253)

Browse source 
* update fela example

* fix wrong whitespace
This commit is contained in:
Robin Frischmann 2017-06-13 22:50:42 +02:00 committed by Tim Neutkens
parent 480f3ab124
commit c72435fe5c
4 changed files with 15 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
examples/with-fela/fela.js
View file

@ -3,14 +3,6 @@ import { createRenderer } from 'fela'
// add your renderer configuration here // add your renderer configuration here
const renderer = createRenderer() const renderer = createRenderer()
export function getRenderer () { export default function getRenderer () {
return renderer return renderer
} }
export function getMountNode () {
if (typeof window !== 'undefined') {
return document.getElementById('fela-stylesheet')
}
return undefined
}

4
examples/with-fela/layout.js
View file

@ -1,8 +1,8 @@
import { Provider } from 'react-fela' import { Provider } from 'react-fela'
import { getRenderer, getMountNode } from './fela' import getRenderer from './fela'
export default ({ children }) => ( export default ({ children }) => (
<Provider renderer={getRenderer()} mountNode={getMountNode()}> <Provider renderer={getRenderer()}>
{children} {children}
</Provider> </Provider>
) )

5
examples/with-fela/package.json
View file

@ -7,10 +7,11 @@
"start": "next start" "start": "next start"
}, },
"dependencies": { "dependencies": {
"fela": "^4.1.2", "fela": "^5.0.1",
"fela-dom": "5.0.2",
"next": "latest", "next": "latest",
"react": "^15.4.2", "react": "^15.4.2",
"react-dom": "^15.4.2", "react-dom": "^15.4.2",
"react-fela": "^4.1.2" "react-fela": "^5.0.2"
} }
} }

16
examples/with-fela/pages/_document.js
View file

@ -1,29 +1,31 @@
import Document, { Head, Main, NextScript } from 'next/document' import Document, { Head, Main, NextScript } from 'next/document'
import { getRenderer } from '../fela' import { renderToSheetList } from 'fela-dom'
import getRenderer from '../fela'
export default class MyDocument extends Document { export default class MyDocument extends Document {
static getInitialProps ({ renderPage }) { static getInitialProps ({ renderPage }) {
const page = renderPage() const page = renderPage()
const renderer = getRenderer() const renderer = getRenderer()
const css = renderer.renderToString()
const sheetList = renderToSheetList(renderer)
renderer.clear() renderer.clear()
return { return {
...page, ...page,
css sheetList
} }
} }
render () { render () {
const styleNodes = this.props.sheetList.map(({ type, media, css }) => (
<style data-fela-type={type} media={media}>{css}</style>
))
return ( return (
<html> <html>
<Head> <Head>
<title>My page</title> <title>My page</title>
<style {styleNodes}
dangerouslySetInnerHTML={{ __html: this.props.css }}
id='fela-stylesheet'
/>
</Head> </Head>
<body> <body>
<Main /> <Main />