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
const renderer = createRenderer()
export function getRenderer () {
export default function getRenderer () {
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 { getRenderer, getMountNode } from './fela'
import getRenderer from './fela'
export default ({ children }) => (
<Provider renderer={getRenderer()} mountNode={getMountNode()}>
<Provider renderer={getRenderer()}>
{children}
</Provider>
)

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

@ -7,10 +7,11 @@
"start": "next start"
},
"dependencies": {
"fela": "^4.1.2",
"fela": "^5.0.1",
"fela-dom": "5.0.2",
"next": "latest",
"react": "^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 { getRenderer } from '../fela'
import { renderToSheetList } from 'fela-dom'
import getRenderer from '../fela'
export default class MyDocument extends Document {
static getInitialProps ({ renderPage }) {
const page = renderPage()
const renderer = getRenderer()
const css = renderer.renderToString()
const sheetList = renderToSheetList(renderer)
renderer.clear()
return {
...page,
css
sheetList
}
}
render () {
const styleNodes = this.props.sheetList.map(({ type, media, css }) => (
<style data-fela-type={type} media={media}>{css}</style>
))
return (
<html>
<Head>
<title>My page</title>
<style
dangerouslySetInnerHTML={{ __html: this.props.css }}
id='fela-stylesheet'
/>
{styleNodes}
</Head>
<body>
<Main />