-
Notifications
You must be signed in to change notification settings - Fork 26.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
f2518bc
commit dd35632
Showing
15 changed files
with
388 additions
and
119 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
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/): | ||
|
||
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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): | ||
|
||
[![Deploy with Vercel](https://vercel.com/button)](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,12 @@ | ||
/** @type {import('next').NextConfig} */ | ||
|
||
const nextConfig = { | ||
reactStrictMode: true, | ||
compiler: { | ||
emotion: { | ||
enabled: 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,10 @@ | ||
import { globalStyles } from '../shared/styles' | ||
|
||
const App = ({ Component, pageProps }) => ( | ||
<> | ||
{globalStyles} | ||
<Component {...pageProps} /> | ||
</> | ||
) | ||
|
||
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,14 @@ | ||
import { Animated, Basic, bounce, Combined, Pink } from '../shared/styles' | ||
|
||
const Home = () => ( | ||
<div> | ||
<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; | ||
` |
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 |
---|---|---|
|
@@ -48,6 +48,7 @@ | |
"@babel/plugin-proposal-object-rest-spread": "7.14.7", | ||
"@babel/preset-flow": "7.14.5", | ||
"@babel/preset-react": "7.14.5", | ||
"@emotion/babel-plugin": "11.7.2", | ||
"@fullhuman/postcss-purgecss": "1.3.0", | ||
"@mdx-js/loader": "0.18.0", | ||
"@svgr/webpack": "5.5.0", | ||
|
@@ -148,9 +149,9 @@ | |
"react-dom": "17.0.2", | ||
"react-dom-18": "npm:[email protected]", | ||
"react-ssr-prepass": "1.0.8", | ||
"react-virtualized": "9.22.3", | ||
"relay-compiler": "13.0.2", | ||
"relay-runtime": "13.0.2", | ||
"react-virtualized": "9.22.3", | ||
"release": "6.3.0", | ||
"request-promise-core": "1.1.2", | ||
"resolve-from": "5.0.0", | ||
|
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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
Oops, something went wrong.