Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'canary' into enhance/page-runtime-fallback-cases
- Loading branch information
Showing
42 changed files
with
1,756 additions
and
321 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | ||
|
|
||
| # dependencies | ||
| /node_modules | ||
| /.pnp | ||
| .pnp.js | ||
|
|
||
| # testing | ||
| /coverage | ||
|
|
||
| # next.js | ||
| /.next/ | ||
| /out/ | ||
|
|
||
| # production | ||
| /build | ||
|
|
||
| # misc | ||
| .DS_Store | ||
| *.pem | ||
|
|
||
| # debug | ||
| npm-debug.log* | ||
| yarn-debug.log* | ||
| yarn-error.log* | ||
|
|
||
| # local env files | ||
| .env.local | ||
| .env.development.local | ||
| .env.test.local | ||
| .env.production.local | ||
|
|
||
| # vercel | ||
| .vercel |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| # 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/git/external?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) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: | ||
|
|
||
| ```bash | ||
| npx create-next-app --example with-emotion with-emotion-app | ||
| # or | ||
| yarn create next-app --example with-emotion with-emotion-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)). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| /** @type {import('next').NextConfig} */ | ||
|
|
||
| const nextConfig = { | ||
| reactStrictMode: true, | ||
| experimental: { | ||
| emotion: true, | ||
| }, | ||
| } | ||
|
|
||
| module.exports = nextConfig |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| { | ||
| "private": true, | ||
| "scripts": { | ||
| "dev": "next", | ||
| "build": "next build", | ||
| "start": "next start" | ||
| }, | ||
| "dependencies": { | ||
| "@emotion/react": "11.8.1", | ||
| "@emotion/styled": "11.8.1", | ||
| "next": "latest", | ||
| "react": "17.0.2", | ||
| "react-dom": "17.0.2" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import createCache from '@emotion/cache' | ||
| import { CacheProvider } from '@emotion/react' | ||
|
|
||
| import { globalStyles } from '../shared/styles' | ||
|
|
||
| const cache = createCache({ key: 'next' }) | ||
|
|
||
| const App = ({ Component, pageProps }) => ( | ||
| <CacheProvider value={cache}> | ||
| {globalStyles} | ||
| <Component {...pageProps} /> | ||
| </CacheProvider> | ||
| ) | ||
|
|
||
| export default App |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { css } from '@emotion/react' | ||
| import { Animated, Basic, bounce, Combined, Pink } from '../shared/styles' | ||
|
|
||
| const Home = () => ( | ||
| <div | ||
| css={css` | ||
| display: flex; | ||
| flex-direction: column; | ||
| `} | ||
| > | ||
| <Basic>Cool Styles</Basic> | ||
| <Pink>Pink text</Pink> | ||
| <Combined> | ||
| With <code>:hover</code>. | ||
| </Combined> | ||
| <Animated animation={bounce}>Let's bounce.</Animated> | ||
| </div> | ||
| ) | ||
|
|
||
| export default Home |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| 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({ | ||
| backgroundColor: 'white', | ||
| color: 'cornflowerblue', | ||
| border: '1px solid lightgreen', | ||
| borderRight: 'none', | ||
| borderBottom: 'none', | ||
| boxShadow: '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 Pink = styled.div(basicStyles, { | ||
| color: 'hotpink', | ||
| }) | ||
|
|
||
| export const Animated = styled.div` | ||
| ${basicStyles}; | ||
| ${hoverStyles}; | ||
| & code { | ||
| background-color: linen; | ||
| } | ||
| animation: ${({ animation }) => animation} 0.2s infinite ease-in-out alternate; | ||
| ` |
Oops, something went wrong.