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

Robin Frischmann · timneutkens · commit c72435fe5c52 · 2017-06-13T22:50:42.000+02:00
* update fela example

* fix wrong whitespace
diff --git a/examples/with-fela/fela.js b/examples/with-fela/fela.js
@@ -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
-}
diff --git a/examples/with-fela/layout.js b/examples/with-fela/layout.js
@@ -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>
 )
diff --git a/examples/with-fela/package.json b/examples/with-fela/package.json
@@ -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"
   }
 }
diff --git a/examples/with-fela/pages/_document.js b/examples/with-fela/pages/_document.js
@@ -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 />

Original file line number	Diff line number	Diff line change
`@@ -7,10 +7,11 @@`
`7`	`7`	`"start": "next start"`
`8`	`8`	`},`
`9`	`9`	`"dependencies": {`
`10`		`- "fela": "^4.1.2",`
	`10`	`+ "fela": "^5.0.1",`
	`11`	`+ "fela-dom": "5.0.2",`
`11`	`12`	`"next": "latest",`
`12`	`13`	`"react": "^15.4.2",`
`13`	`14`	`"react-dom": "^15.4.2",`
`14`		`- "react-fela": "^4.1.2"`
	`15`	`+ "react-fela": "^5.0.2"`
`15`	`16`	`}`
`16`	`17`	`}`