diff --git a/examples/with-emotion-fiber/features/home.component.js b/examples/with-emotion-fiber/features/home.component.js new file mode 100644 index 00000000..d5ac134a --- /dev/null +++ b/examples/with-emotion-fiber/features/home.component.js @@ -0,0 +1,12 @@ +import {Basic, Combined, Animated, bounce} from '../shared/styles' +const Home = () => ( +
+ Cool Styles + + With :hover. + + Let's bounce. +
+) + +export default Home diff --git a/examples/with-emotion-fiber/hoc/withEmotion.component.js b/examples/with-emotion-fiber/hoc/withEmotion.component.js new file mode 100644 index 00000000..275af152 --- /dev/null +++ b/examples/with-emotion-fiber/hoc/withEmotion.component.js @@ -0,0 +1,22 @@ +import React, { Component } from 'react' +import { hydrate } from 'react-emotion' +import { injectGlobalStyles } from '../shared/styles' + +const withEmotion = ComposedComponent => { + class HOC extends Component { + componentWillMount () { + if (typeof window !== 'undefined') { + hydrate(window.__NEXT_DATA__.ids) + } + injectGlobalStyles() + } + + render () { + return + } + }; + + return HOC +} + +export default withEmotion diff --git a/examples/with-emotion-fiber/package.json b/examples/with-emotion-fiber/package.json new file mode 100644 index 00000000..c8533326 --- /dev/null +++ b/examples/with-emotion-fiber/package.json @@ -0,0 +1,20 @@ +{ + "name": "with-emotion-fiber", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "dev": "next" + }, + "keywords": [], + "author": "Thomas Greco", + "license": "ISC", + "dependencies": { + "emotion": "^8.0.11", + "emotion-server": "^8.0.11", + "next": "^4.1.4", + "react": "^16.1.1", + "react-dom": "^16.1.1", + "react-emotion": "^8.0.11" + } +} diff --git a/examples/with-emotion-fiber/pages/_document.js b/examples/with-emotion-fiber/pages/_document.js new file mode 100644 index 00000000..c2b120f2 --- /dev/null +++ b/examples/with-emotion-fiber/pages/_document.js @@ -0,0 +1,33 @@ +import Document, { Head, Main, NextScript } from 'next/document' +import { extractCritical } from 'emotion-server' + +export default class MyDocument extends Document { + static getInitialProps ({ renderPage }) { + const page = renderPage() + const styles = extractCritical(page.html) + return { ...page, ...styles } + } + + constructor (props) { + super(props) + const { __NEXT_DATA__, ids } = props + if (ids) { + __NEXT_DATA__.ids = ids + } + } + + render () { + return ( + + + With Emotion +