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

emotion v8 + adjustments for breaking changes (#3054)

Browse source 
* emotion v8 + adjustments for breaking changes

* Corrected versioning

* Take hydrate from 'react-emotion'

I was actually wondering that, but haven't seen hydrate in the medium post (even though you pointed out that react-emotion exports all of emotion and I've seen it in source) and didn't want to risk it for the off chance that it *should* be imported directly from emotion for some reason :D
This commit is contained in:
Hugo Meissner 2017-10-09 23:18:37 +02:00 committed by Tim Neutkens
parent 7fe20ed285
commit 573692c137
3 changed files with 13 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -7,13 +7,13 @@
"start": "next start" "start": "next start"
}, },
"dependencies": { "dependencies": {
"babel-plugin-emotion": "^7.1.0", "babel-plugin-emotion": "^8.0.4",
"emotion": "^7.2.0", "emotion": "^8.0.5",
"emotion-server": "^7.2.0", "emotion-server": "^8.0.5",
"next": "^3.0.6", "next": "^3.0.6",
"react": "^15.6.1", "react": "^15.6.1",
"react-dom": "^15.6.1", "react-dom": "^15.6.1",
"react-emotion": "^7.2.0" "react-emotion": "^8.0.5"
}, },
"license": "ISC" "license": "ISC"
} }

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

@ -1,12 +1,8 @@
import Document, { Head, Main, NextScript } from 'next/document' import Document, { Head, Main, NextScript } from 'next/document'
import { extractCritical } from 'emotion-server' import { extractCritical } from 'emotion-server'
import { flush } from 'emotion'
const dev = process.env.NODE_ENV !== 'production'
export default class MyDocument extends Document { export default class MyDocument extends Document {
static getInitialProps ({ renderPage }) { static getInitialProps ({ renderPage }) {
if (dev) { flush() }
const page = renderPage() const page = renderPage()
const styles = extractCritical(page.html) const styles = extractCritical(page.html)
return { ...page, ...styles } return { ...page, ...styles }

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

@ -1,6 +1,5 @@
import React from 'react' import React from 'react'
import { hydrate, keyframes, css, injectGlobal } from 'emotion' import styled, { hydrate, keyframes, css, injectGlobal } from 'react-emotion'
import styled from 'react-emotion'
// 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'
@ -48,15 +47,20 @@ export default () => {
} }
` `
const Basic = styled.div`composes: ${basicStyles};` const Basic = styled.div`
${basicStyles};
`
const Combined = styled.div` const Combined = styled.div`
composes: ${basicStyles} ${hoverStyles}; ${basicStyles};
${hoverStyles};
& code { & code {
background-color: linen; background-color: linen;
} }
` `
const Animated = styled.div` const Animated = styled.div`
composes: ${basicStyles} ${hoverStyles}; ${basicStyles};
${hoverStyles};
& code { & code {
background-color: linen; background-color: linen;
} }