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 emotion examples with new API for SSR and React endpoint (#2456)

Browse source 
* Update emotion examples with new API for SSR and React endpoint

* Actually fixing tab replacement
This commit is contained in:
Matt Hamlin 2017-07-06 01:44:46 -04:00 committed by Tim Neutkens
parent 5a840cc39e
commit 0f3fecfe8b
3 changed files with 6 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/with-emotion/package.json
View file

@ -7,7 +7,7 @@
"start": "next start" "start": "next start"
}, },
"dependencies": { "dependencies": {
"emotion": "^4.1.2", "emotion": "^5.0.0",
"next": "^2.4.6", "next": "^2.4.6",
"react": "^15.6.1", "react": "^15.6.1",
"react-dom": "^15.6.1" "react-dom": "^15.6.1"

4
examples/with-emotion/pages/_document.js
View file

@ -1,10 +1,10 @@
import Document, { Head, Main, NextScript } from 'next/document' import Document, { Head, Main, NextScript } from 'next/document'
import { renderStaticOptimized } from 'emotion/server' import { extractCritical } from 'emotion/server'
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 styles = renderStaticOptimized(() => page.html) const styles = extractCritical(page.html)
return { ...page, ...styles } return { ...page, ...styles }
} }

10
examples/with-emotion/pages/index.js
View file

@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import { hydrate, keyframes, fragment, injectGlobal } from 'emotion' import { hydrate, keyframes, fragment, injectGlobal } from 'emotion'
import styled from 'emotion/styled' import styled from 'emotion/react'
// Adds server generated styles to emotion cache. // Adds server generated styles to emotion cache.
// '__NEXT_DATA__.ids' is set in '_document.js' // '__NEXT_DATA__.ids' is set in '_document.js'
@ -69,15 +69,11 @@ export default () => {
return ( return (
<div> <div>
<Basic> <Basic>Cool Styles</Basic>
Cool Styles
</Basic>
<Combined> <Combined>
With <code>:hover</code>. With <code>:hover</code>.
</Combined> </Combined>
<Animated animation={bounce}> <Animated animation={bounce}>Let's bounce.</Animated>
Let's bounce.
</Animated>
</div> </div>
) )
} }