Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[with-emotion-10,11] Update emotion examples to v10 & v11 #9646

Merged
merged 8 commits into from Jan 20, 2020
Merged

[with-emotion-10,11] Update emotion examples to v10 & v11 #9646

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
313d5bf
Update emotion to v10, use @emotion/core, @emotion/styled
azizhk Dec 6, 2019
7e12529
Add with-emotion-11 and make review changes
azizhk Jan 6, 2020
b10fa31
Merge remote-tracking branch 'origin/canary' into update-with-emotion
azizhk Jan 6, 2020
91989bb
Fix package names and run prettier
azizhk Jan 7, 2020
7456eab
Merge remote-tracking branch 'origin/canary' into update-with-emotion
azizhk Jan 7, 2020
b1c4759
fix readmes
Timer Jan 20, 2020
640693a
Merge branch 'canary' into update-with-emotion
Timer Jan 20, 2020
190427d
Merge branch 'canary' into update-with-emotion
Timer Jan 20, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 5 additions & 1 deletion examples/with-emotion-fiber/README.md
View file
Open in desktop
Expand Up @@ -45,4 +45,8 @@ now

## The idea behind the example

Extract and inline critical css with [emotion](https://github.com/emotion-js/emotion) using [emotion-server](https://github.com/emotion-js/emotion/tree/master/packages/emotion-server) and [react-emotion](https://github.com/emotion-js/emotion/tree/master/packages/react-emotion).
Extract and inline critical css with:

- [@emotion/core](https://github.com/emotion-js/emotion/tree/master/packages/core)
- [@emotion/styled](https://github.com/emotion-js/emotion/tree/master/packages/styled)
- [create-emotion-server](https://github.com/emotion-js/emotion/tree/master/packages/create-emotion-server)
12 changes: 0 additions & 12 deletions examples/with-emotion-fiber/features/home.component.js
View file
Open in desktop

This file was deleted.

22 changes: 0 additions & 22 deletions examples/with-emotion-fiber/hoc/withEmotion.component.js
View file
Open in desktop

This file was deleted.

8 changes: 4 additions & 4 deletions examples/with-emotion-fiber/package.json
View file
Open in desktop
Expand Up @@ -12,11 +12,11 @@
"author": "Thomas Greco",
"license": "ISC",
"dependencies": {
"emotion": "^8.0.11",
"emotion-server": "^8.0.11",
"@emotion/core": "10.0.22",
"@emotion/styled": "10.0.23",
"create-emotion-server": "10.0.14",
"next": "latest",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-emotion": "^8.0.11"
"react-dom": "^16.7.0"
}
}
17 changes: 17 additions & 0 deletions examples/with-emotion-fiber/pages/_app.js
View file
Open in desktop
@@ -0,0 +1,17 @@
import * as React from 'react'
import NextApp from 'next/app'
import { CacheProvider } from '@emotion/core'
import { globalStyles } from '../shared/styles'
import { emotionCache } from '../shared/emotionCache'

export default class App extends NextApp {
render() {
const { Component, pageProps } = this.props
return (
<CacheProvider value={emotionCache}>
{globalStyles}
<Component {...pageProps} />
</CacheProvider>
)
}
}
18 changes: 8 additions & 10 deletions examples/with-emotion-fiber/pages/_document.js
View file
Open in desktop
@@ -1,5 +1,8 @@
import Document, { Head, Main, NextScript } from 'next/document'
import { extractCritical } from 'emotion-server'
import createEmotionServer from 'create-emotion-server'
import { emotionCache } from '../shared/emotionCache'

const { extractCritical } = createEmotionServer(emotionCache)

export default class MyDocument extends Document {
static getInitialProps({ renderPage }) {
Expand All @@ -8,19 +11,14 @@ export default class MyDocument extends Document {
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 }} />
<style
data-emotion-css={this.props.ids.join(' ')}
dangerouslySetInnerHTML={{ __html: this.props.css }}
/>
</Head>
<body>
<Main />
Expand Down
14 changes: 11 additions & 3 deletions examples/with-emotion-fiber/pages/index.js
View file
Open in desktop
@@ -1,4 +1,12 @@
import withEmotion from '../hoc/withEmotion.component'
import home from '../features/home.component'
import { Basic, Combined, Animated, bounce } from '../shared/styles'
const Home = () => (
<div>
<Basic>Cool Styles</Basic>
<Combined>
With <code>:hover</code>.
</Combined>
<Animated animation={bounce}>Let's bounce.</Animated>
</div>
)

export default withEmotion(home)
export default Home
2 changes: 2 additions & 0 deletions examples/with-emotion-fiber/shared/emotionCache.js
View file
Open in desktop
@@ -0,0 +1,2 @@
import createCache from '@emotion/cache'
export const emotionCache = createCache()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this works, but if you dont need to configure cache you might want to just reuse the one in emotion package

import { cache } from 'emotion'
``

Then you could also just use `emotion-server` instead of `create-emotion-server` (for simplicity).

40 changes: 23 additions & 17 deletions examples/with-emotion-fiber/shared/styles.js
View file
Open in desktop
@@ -1,15 +1,21 @@
import styled, { keyframes, css, injectGlobal } from 'react-emotion'
import { keyframes, css, Global } from '@emotion/core'
import styled from '@emotion/styled'

export const injectGlobalStyles = () => injectGlobal`
html, body {
padding: 3rem 1rem;
margin: 0;
background: papayawhip;
min-height: 100%;
font-family: Helvetica, Arial, sans-serif;
font-size: 24px;
}
`
export const globalStyles = (
<Global
styles={css`
html,
body {
padding: 3rem 1rem;
margin: 0;
background: papayawhip;
min-height: 100%;
font-family: Helvetica, Arial, sans-serif;
font-size: 24px;
}
`}
/>
)

export const basicStyles = css`
background-color: white;
Expand All @@ -32,12 +38,12 @@ export const hoverStyles = css`
}
`
export const bounce = keyframes`
from {
transform: scale(1.01);
}
to {
transform: scale(0.99);
}
from {
transform: scale(1.01);
}
to {
transform: scale(0.99);
}
`

export const Basic = styled('div')`
Expand Down