Update with-emotion example (#62771)
## What? Consolidates all emotion examples into a single one that uses the SWC plugin by default, making sure you get the best experience. Added the missing `@emotion/cache` dependency which also makes this example work in Turbopack. <!-- Thanks for opening a PR! Your contribution is much appreciated. To make sure your PR is handled as smoothly as possible we request that you follow the checklist sections below. Choose the right checklist for the change(s) that you're making: ## For Contributors ### Improving Documentation - Run `pnpm prettier-fix` to fix formatting issues before opening the PR. - Read the Docs Contribution Guide to ensure your contribution follows the docs guidelines: https://nextjs.org/docs/community/contribution-guide ### Adding or Updating Examples - The "examples guidelines" are followed from our contributing doc https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md - Make sure the linting passes by running `pnpm build && pnpm lint`. See https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md ### Fixing a bug - Related issues linked using `fixes #number` - Tests added. See: https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs - Errors have a helpful link attached, see https://github.com/vercel/next.js/blob/canary/contributing.md ### Adding a feature - Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. (A discussion must be opened, see https://github.com/vercel/next.js/discussions/new?category=ideas) - Related issues/discussions are linked using `fixes #number` - e2e tests added (https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) - Documentation added - Telemetry added. In case of a feature if it's used or not. - Errors have a helpful link attached, see https://github.com/vercel/next.js/blob/canary/contributing.md ## For Maintainers - Minimal description (aim for explaining to someone not on the team to understand the PR) - When linking to a Slack thread, you might want to share details of the conclusion - Link both the Linear (Fixes NEXT-xxx) and the GitHub issues - Add review comments if necessary to explain to the reviewer the logic behind a change ### What? ### Why? ### How? Closes NEXT- Fixes # -->
This commit is contained in:
Tim Neutkens
GitHub
parent
79f103fb79
commit
d01d6d9c35
21 changed files with 22 additions and 402 deletions
|
|
@ -1,37 +1,3 @@
|
|||
# Emotion Example
|
||||
|
||||
Extract and inline critical css with
|
||||
[@emotion/css](https://github.com/emotion-js/emotion/tree/master/packages/css),
|
||||
[@emotion/server](https://github.com/emotion-js/emotion/tree/master/packages/server),
|
||||
[@emotion/react](https://github.com/emotion-js/emotion/tree/master/packages/react),
|
||||
and [@emotion/styled](https://github.com/emotion-js/emotion/tree/master/packages/styled).
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-emotion)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
||||
[](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-emotion&project-name=with-emotion&repository-name=with-emotion)
|
||||
|
||||
## How to use
|
||||
|
||||
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
|
||||
|
||||
```bash
|
||||
npx create-next-app --example with-emotion-swc with-emotion-swc-app
|
||||
```
|
||||
|
||||
```bash
|
||||
yarn create next-app --example with-emotion-swc with-emotion-swc-app
|
||||
```
|
||||
|
||||
```bash
|
||||
pnpm create next-app --example with-emotion-swc with-emotion-swc-app
|
||||
```
|
||||
|
||||
Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
|
||||
See the [`with-emotion` example](https://github.com/vercel/next.js/tree/canary/examples/with-emotion).
|
||||
|
|
|
|||
5
examples/with-emotion-swc/next-env.d.ts
vendored
5
examples/with-emotion-swc/next-env.d.ts
vendored
|
|
@ -1,5 +0,0 @@
|
|||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
{
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next",
|
||||
"build": "next build",
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "11.10.4",
|
||||
"@emotion/styled": "11.10.4",
|
||||
"next": "latest",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "18.0.6",
|
||||
"@types/react": "18.2.8",
|
||||
"@types/react-dom": "18.0.6",
|
||||
"typescript": "^4.7.4"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"presets": [["next/babel"]],
|
||||
"plugins": ["@emotion/babel-plugin"]
|
||||
}
|
||||
|
|
@ -1,30 +1,3 @@
|
|||
# Emotion Vanilla Example
|
||||
# Emotion Example
|
||||
|
||||
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/server),
|
||||
[@emotion/css](https://github.com/emotion-js/emotion/tree/master/packages/css)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-emotion-vanilla)
|
||||
|
||||
[](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/with-emotion-vanilla)
|
||||
|
||||
## How to use
|
||||
|
||||
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
|
||||
|
||||
```bash
|
||||
npx create-next-app --example with-emotion-vanilla with-emotion-vanilla-app
|
||||
```
|
||||
|
||||
```bash
|
||||
yarn create next-app --example with-emotion-vanilla with-emotion-vanilla-app
|
||||
```
|
||||
|
||||
```bash
|
||||
pnpm create next-app --example with-emotion-vanilla with-emotion-vanilla-app
|
||||
```
|
||||
|
||||
Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
|
||||
See the [`with-emotion` example](https://github.com/vercel/next.js/tree/canary/examples/with-emotion).
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
{
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next",
|
||||
"build": "next build",
|
||||
"start": "next start"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@emotion/babel-plugin": "11.10.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/css": "11.11.2",
|
||||
"@emotion/server": "11.10.0",
|
||||
"next": "latest",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import Document, { Html, Head, Main, NextScript } from "next/document";
|
||||
import * as React from "react";
|
||||
import { renderStatic } from "../shared/renderer";
|
||||
export default class AppDocument extends Document {
|
||||
static async getInitialProps(ctx) {
|
||||
const initialProps = await Document.getInitialProps(ctx);
|
||||
const { css, ids } = await renderStatic(initialProps.html);
|
||||
return {
|
||||
...initialProps,
|
||||
styles: (
|
||||
<React.Fragment>
|
||||
{initialProps.styles}
|
||||
<style
|
||||
data-emotion={`css ${ids.join(" ")}`}
|
||||
dangerouslySetInnerHTML={{ __html: css }}
|
||||
/>
|
||||
</React.Fragment>
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Html>
|
||||
<Head />
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
import Head from "next/head";
|
||||
import {
|
||||
basicStyles,
|
||||
otherStyles,
|
||||
someMoreBasicStyles,
|
||||
someCssAsObject,
|
||||
combinedAsArray,
|
||||
cxExample,
|
||||
keyframesExample,
|
||||
} from "../shared/styles";
|
||||
|
||||
const Home = () => (
|
||||
<>
|
||||
<Head>
|
||||
<title>Emotion using the vanilla version supporting SSR</title>
|
||||
</Head>
|
||||
<div>
|
||||
<h1>Emotion Vanilla example</h1>
|
||||
<div className={basicStyles}>Basic styles using emotion</div>
|
||||
<div className={otherStyles}>Some more styles using emotion</div>
|
||||
<div className={someMoreBasicStyles}>Well why not here is some more</div>
|
||||
<div className={someCssAsObject}>Object styles using emotion css</div>
|
||||
<div className={combinedAsArray}>Array of styles using emotion css</div>
|
||||
<div className={cxExample}>cx example from emotion</div>
|
||||
<div className={keyframesExample} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
export default Home;
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import createEmotionServer from "@emotion/server/create-instance";
|
||||
import { cache } from "@emotion/css";
|
||||
|
||||
export const renderStatic = async (html) => {
|
||||
if (html === undefined) {
|
||||
throw new Error("did you forget to return html from renderToString?");
|
||||
}
|
||||
const { extractCritical } = createEmotionServer(cache);
|
||||
const { ids, css } = extractCritical(html);
|
||||
|
||||
return { html, ids, css };
|
||||
};
|
||||
|
|
@ -1,102 +0,0 @@
|
|||
import { css, cx, keyframes, injectGlobal } from "@emotion/css";
|
||||
|
||||
injectGlobal`
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
background: #DFCFBE;
|
||||
font-family: Helvetica, sans-serif;
|
||||
}
|
||||
`;
|
||||
|
||||
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;
|
||||
`;
|
||||
|
||||
const otherStyles = css`
|
||||
background-color: red;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
`;
|
||||
|
||||
const someMoreBasicStyles = css`
|
||||
background-color: green;
|
||||
color: white;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
`;
|
||||
|
||||
const someCssAsObject = css({
|
||||
background: "orange",
|
||||
color: "white",
|
||||
padding: "10px",
|
||||
marginBottom: "10px",
|
||||
});
|
||||
|
||||
const combinedAsArray = css([someMoreBasicStyles, someCssAsObject]);
|
||||
|
||||
const cls1 = css`
|
||||
font-size: 20px;
|
||||
padding: 5px;
|
||||
background: green;
|
||||
color: orange;
|
||||
`;
|
||||
const cls2 = css`
|
||||
font-size: 20px;
|
||||
padding: 15px;
|
||||
background: blue;
|
||||
color: white;
|
||||
`;
|
||||
|
||||
const cxExample = cx(cls1, cls2);
|
||||
|
||||
const bounce = keyframes`
|
||||
from, 20%, 53%, 80%, to {
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
|
||||
40%, 43% {
|
||||
transform: translate3d(0, -30px, 0);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: translate3d(0, -15px, 0);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate3d(0,-4px,0);
|
||||
}
|
||||
`;
|
||||
|
||||
const keyframesExample = css([
|
||||
bounce,
|
||||
css({
|
||||
marginTop: "50px",
|
||||
width: "20px",
|
||||
height: "20px",
|
||||
background: "black",
|
||||
borderRadius: "50%",
|
||||
padding: "20px",
|
||||
animation: `${bounce} 1s ease infinite`,
|
||||
transformOrigin: "center",
|
||||
}),
|
||||
]);
|
||||
|
||||
export {
|
||||
combinedAsArray,
|
||||
cxExample,
|
||||
keyframesExample,
|
||||
someCssAsObject,
|
||||
someMoreBasicStyles,
|
||||
otherStyles,
|
||||
basicStyles,
|
||||
};
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
{
|
||||
"presets": [
|
||||
[
|
||||
"next/babel",
|
||||
{
|
||||
"preset-react": {
|
||||
"runtime": "automatic",
|
||||
"importSource": "@emotion/react"
|
||||
}
|
||||
}
|
||||
]
|
||||
],
|
||||
"plugins": ["@emotion/babel-plugin"]
|
||||
}
|
||||
|
|
@ -6,9 +6,15 @@ Extract and inline critical css with
|
|||
[@emotion/react](https://github.com/emotion-js/emotion/tree/master/packages/react),
|
||||
and [@emotion/styled](https://github.com/emotion-js/emotion/tree/master/packages/styled).
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-emotion)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-emotion)
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
||||
[](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-emotion&project-name=with-emotion&repository-name=with-emotion)
|
||||
|
||||
|
|
@ -17,15 +23,15 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
|
|||
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
|
||||
|
||||
```bash
|
||||
npx create-next-app --example with-emotion with-emotion-app
|
||||
npx create-next-app --example with-emotion-swc with-emotion-swc-app
|
||||
```
|
||||
|
||||
```bash
|
||||
yarn create next-app --example with-emotion with-emotion-app
|
||||
yarn create next-app --example with-emotion-swc with-emotion-swc-app
|
||||
```
|
||||
|
||||
```bash
|
||||
pnpm create next-app --example with-emotion with-emotion-app
|
||||
pnpm create next-app --example with-emotion-swc with-emotion-swc-app
|
||||
```
|
||||
|
||||
Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
|
||||
|
|
|
|||
|
|
@ -5,14 +5,18 @@
|
|||
"build": "next build",
|
||||
"start": "next start"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@emotion/babel-plugin": "11.10.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/cache": "11.10.4",
|
||||
"@emotion/react": "11.10.4",
|
||||
"@emotion/styled": "11.10.4",
|
||||
"next": "latest",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "18.0.6",
|
||||
"@types/react": "18.2.8",
|
||||
"@types/react-dom": "18.0.6",
|
||||
"typescript": "^4.7.4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
import { globalStyles } from "../shared/styles";
|
||||
|
||||
const App = ({ Component, pageProps }) => (
|
||||
<>
|
||||
{globalStyles}
|
||||
<Component {...pageProps} />
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import { Animated, Basic, bounce, Combined } 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;
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
import { css, Global, keyframes } 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: ${({ animation }) => animation} 0.2s infinite ease-in-out alternate;
|
||||
`;
|
||||
Loading…
Reference in a new issue