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-emotion example to emotion 10 (#5770)

Browse source
This commit is contained in:
Steven Bell 2018-11-29 14:12:25 -05:00 committed by Tim Neutkens
parent f1fe237ba8
commit af1d10c941
4 changed files with 20 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/with-emotion/.babelrc
View file

@ -3,6 +3,6 @@
"next/babel"
],
"plugins": [
["emotion", { "inline": true }]
["emotion"]
]
}

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

@ -7,13 +7,12 @@
"start": "next start"
},
"dependencies": {
"babel-plugin-emotion": "^8.0.4",
"emotion": "^8.0.5",
"emotion-server": "^8.0.5",
"@emotion/core": "^10.0.0",
"@emotion/styled": "^10.0.0",
"babel-plugin-emotion": "^10.0.0",
"next": "latest",
"react": "16.2.0",
"react-dom": "16.2.0",
"react-emotion": "^8.0.5"
"react": "^16.3.0",
"react-dom": "^16.3.0"
},
"license": "ISC"
}

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

@ -1,32 +0,0 @@
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 (
<html>
<Head>
<style dangerouslySetInnerHTML={{ __html: this.props.css }} />
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}

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

@ -1,23 +1,7 @@
import React from 'react'
import Head from 'next/head'
import styled, { hydrate, keyframes, css, injectGlobal } from 'react-emotion'
// Adds server generated styles to emotion cache.
// '__NEXT_DATA__.ids' is set in '_document.js'
if (typeof window !== 'undefined') {
hydrate(window.__NEXT_DATA__.ids)
}
injectGlobal`
html, body {
padding: 3rem 1rem;
margin: 0;
background: papayawhip;
min-height: 100%;
font-family: Helvetica, Arial, sans-serif;
font-size: 24px;
}
`
import styled from '@emotion/styled'
import { keyframes, css, Global } from '@emotion/core'
const basicStyles = css`
background-color: white;
@ -69,7 +53,18 @@ const Animated = styled.div`
export default () => {
return (
<>' '<Head>
<>' '<Global
styles={css`
html, body {
padding: 3rem 1rem;
margin: 0;
background: papayawhip;
min-height: 100%;
font-family: Helvetica, Arial, sans-serif;
font-size: 24px;
}
`}
/>' '<Head>
<title>With Emotion</title>
</Head>' '<div>
<Basic>Cool Styles</Basic>