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 all commits
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
50 changes: 50 additions & 0 deletions examples/with-emotion-10/README.md
View file
Open in desktop
@@ -0,0 +1,50 @@
# Pass Server Data Directly to a Next.js Page during SSR

Extract and inline critical css with
[emotion](https://github.com/emotion-js/emotion/tree/master/packages/emotion),
[emotion-server](https://github.com/emotion-js/emotion/tree/master/packages/emotion-server),
[@emotion/core](https://github.com/emotion-js/emotion/tree/master/packages/core),
and [@emotion/styled](https://github.com/emotion-js/emotion/tree/master/packages/styled).

## Deploy your own

Deploy the example using [ZEIT Now](https://zeit.co/now):

[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-emotion-10)

## How to use

### Using `create-next-app`

Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:

```bash
npm init next-app --example with-emotion-10 with-emotion-10-app
# or
yarn create next-app --example with-emotion-10 with-emotion-10-app
```

### Download manually

Download the example:

```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-emotion-10
cd with-emotion-10
```

Install it and run:

```bash
npm install
npm run dev
# or
yarn
yarn dev
```

Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)):

```bash
now
```
11 changes: 6 additions & 5 deletions examples/with-emotion-fiber/package.json → examples/with-emotion-10/package.json
View file
Open in desktop
@@ -1,5 +1,5 @@
{
"name": "with-emotion-fiber",
"name": "with-emotion-10",
"version": "1.0.0",
"description": "",
"main": "index.js",
Expand All @@ -12,11 +12,12 @@
"author": "Thomas Greco",
"license": "ISC",
"dependencies": {
"emotion": "^8.0.11",
"emotion-server": "^8.0.11",
"@emotion/core": "10.0.27",
Copy link
Contributor

Choose a reason for hiding this comment

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

this package.json probably shouldn't have the same "name" as the one targeting v11

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done.

"@emotion/styled": "10.0.27",
"emotion": "10.0.27",
"emotion-server": "10.0.27",
"next": "latest",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-emotion": "^8.0.11"
"react-dom": "^16.7.0"
}
}
20 changes: 20 additions & 0 deletions examples/with-emotion-10/pages/_app.js
View file
Open in desktop
@@ -0,0 +1,20 @@
import * as React from 'react'
import NextApp from 'next/app'
import { CacheProvider } from '@emotion/core'

// Use only { cache } from 'emotion'. Don't use { css }.
import { cache } from 'emotion'

import { globalStyles } from '../shared/styles'

export default class App extends NextApp {
render() {
const { Component, pageProps } = this.props
return (
<CacheProvider value={cache}>
{globalStyles}
<Component {...pageProps} />
</CacheProvider>
)
}
}
13 changes: 4 additions & 9 deletions ...les/with-emotion-fiber/pages/_document.js → examples/with-emotion-10/pages/_document.js
View file
Open in desktop
Expand Up @@ -8,19 +8,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
0 ...-emotion-fiber/features/home.component.js → examples/with-emotion-10/pages/index.js
View file
Open in desktop
File renamed without changes.
40 changes: 23 additions & 17 deletions examples/with-emotion-fiber/shared/styles.js → examples/with-emotion-10/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
12 changes: 6 additions & 6 deletions examples/with-emotion-fiber/README.md → examples/with-emotion-11/README.md
View file
Open in desktop
@@ -1,12 +1,12 @@
# Pass Server Data Directly to a Next.js Page during SSR

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/react](https://www.npmjs.com/package/@emotion/react) and [@emotion/styled](https://www.npmjs.com/package/@emotion/styled)

## Deploy your own

Deploy the example using [ZEIT Now](https://zeit.co/now):

[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-emotion-fiber)
[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-emotion-11)

## How to use

Expand All @@ -15,18 +15,18 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:

```bash
npm init next-app --example with-emotion-fiber with-emotion-fiber-app
npm init next-app --example with-emotion-11 with-emotion-11-app
# or
yarn create next-app --example with-emotion-fiber with-emotion-fiber-app
yarn create next-app --example with-emotion-11 with-emotion-11-app
```

### Download manually

Download the example:

```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-emotion-fiber
cd with-emotion-fiber
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-emotion-11
cd with-emotion-11
```

Install it and run:
Expand Down
24 changes: 24 additions & 0 deletions examples/with-emotion-11/package.json
View file
Open in desktop
@@ -0,0 +1,24 @@
{
"name": "with-emotion-11",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"keywords": [],
"author": "Thomas Greco",
"license": "ISC",
"dependencies": {
"@emotion/cache": "11.0.0-next.10",
"@emotion/css": "11.0.0-next.10",
"@emotion/react": "11.0.0-next.10",
"@emotion/server": "11.0.0-next.10",
"@emotion/styled": "11.0.0-next.10",
"next": "latest",
"react": "^16.7.0",
"react-dom": "^16.7.0"
}
}
17 changes: 17 additions & 0 deletions examples/with-emotion-11/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/react'
import { cache } from '@emotion/css'
import { globalStyles } from '../shared/styles'

export default class App extends NextApp {
render() {
const { Component, pageProps } = this.props
return (
<CacheProvider value={cache}>
{globalStyles}
<Component {...pageProps} />
</CacheProvider>
)
}
}
27 changes: 27 additions & 0 deletions examples/with-emotion-11/pages/_document.js
View file
Open in desktop
@@ -0,0 +1,27 @@
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 }
}

render() {
return (
<html>
<Head>
<style
data-emotion-css={this.props.ids.join(' ')}
dangerouslySetInnerHTML={{ __html: this.props.css }}
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}
12 changes: 12 additions & 0 deletions examples/with-emotion-11/pages/index.js
View file
Open in desktop
@@ -0,0 +1,12 @@
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 Home
67 changes: 67 additions & 0 deletions examples/with-emotion-11/shared/styles.js
View file
Open in desktop
@@ -0,0 +1,67 @@
import { keyframes, css, Global } from '@emotion/react'
import styled from '@emotion/styled'

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;
color: cornflowerblue;
border: 1px solid lightgreen;
border-right: none;
border-bottom: none;
box-shadow: 5px 5px 0 0 lightgreen, 10px 10px 0 0 lightyellow;
transition: all 0.1s linear;
margin: 3rem 0;
padding: 1rem 0.5rem;
`

export const hoverStyles = css`
&:hover {
color: white;
background-color: lightgray;
border-color: aqua;
box-shadow: -15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;
}
`
export const bounce = keyframes`
from {
transform: scale(1.01);
}
to {
transform: scale(0.99);
}
`

export const Basic = styled('div')`
${basicStyles};
`

export const Combined = styled('div')`
${basicStyles};
${hoverStyles};
& code {
background-color: linen;
}
`
export const Animated = styled('div')`
${basicStyles};
${hoverStyles};
& code {
background-color: linen;
}
animation: ${props => props.animation} 0.2s infinite ease-in-out alternate;
`
22 changes: 0 additions & 22 deletions examples/with-emotion-fiber/hoc/withEmotion.component.js
View file
Open in desktop

This file was deleted.

4 changes: 0 additions & 4 deletions examples/with-emotion-fiber/pages/index.js
View file
Open in desktop

This file was deleted.