Skip to content

Commit 2e16d02

Browse files
BrooooooklynBrooooooklyn
authored
SWC emotion transform plugin (vercel#34687)
1 parent 6611bfd commit 2e16d02

File tree

42 files changed

+1756
-321
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+1756
-321
lines changed

‎.github/workflows/build_test_deploy.yml

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ jobs:
9797
if: ${{needs.build.outputs.docsChange != 'docs only change'}}
9898
with:
9999
profile: minimal
100-
toolchain: nightly-2021-11-15
100+
toolchain: nightly-2022-02-23
101101
components: rustfmt, clippy
102102

103103
- name: Cache cargo registry
@@ -732,7 +732,7 @@ jobs:
732732
if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
733733
with:
734734
profile: minimal
735-
toolchain: nightly-2021-11-15
735+
toolchain: nightly-2022-02-23
736736

737737
- name: Cache cargo registry
738738
uses: actions/cache@v2
@@ -811,7 +811,7 @@ jobs:
811811
if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
812812
uses: actions-rs/toolchain@v1
813813
with:
814-
toolchain: nightly-2021-11-15
814+
toolchain: nightly-2022-02-23
815815
profile: minimal
816816
- run: cd packages/next-swc && cargo test
817817
if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
@@ -889,8 +889,8 @@ jobs:
889889
# Node.js in Baidu need to compatible with `GLIBC_2.12`
890890
build: >-
891891
set -e &&
892-
rustup toolchain install nightly-2021-11-15 &&
893-
rustup default nightly-2021-11-15 &&
892+
rustup toolchain install nightly-2022-02-23 &&
893+
rustup default nightly-2022-02-23 &&
894894
rustup target add x86_64-unknown-linux-gnu &&
895895
npm i -g @napi-rs/cli@2.4.4 turbo@1.0.28 &&
896896
turbo run build-native --cache-dir=".turbo" -- --release --target x86_64-unknown-linux-gnu --zig --zig-abi-suffix 2.12 &&
@@ -900,8 +900,8 @@ jobs:
900900
docker: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-alpine
901901
build: >-
902902
set -e &&
903-
rustup toolchain install nightly-2021-11-15 &&
904-
rustup default nightly-2021-11-15 &&
903+
rustup toolchain install nightly-2022-02-23 &&
904+
rustup default nightly-2022-02-23 &&
905905
rustup target add x86_64-unknown-linux-musl &&
906906
npm i -g @napi-rs/cli@2.4.4 turbo@1.0.28 &&
907907
turbo run build-native --cache-dir=".turbo" -- --release --target x86_64-unknown-linux-musl &&
@@ -922,8 +922,8 @@ jobs:
922922
docker: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-alpine-zig
923923
build: >-
924924
set -e &&
925-
rustup toolchain install nightly-2021-11-15 &&
926-
rustup default nightly-2021-11-15 &&
925+
rustup toolchain install nightly-2022-02-23 &&
926+
rustup default nightly-2022-02-23 &&
927927
rustup target add aarch64-unknown-linux-gnu &&
928928
npm i -g @napi-rs/cli@2.4.4 turbo@1.0.28 &&
929929
turbo run build-native --cache-dir=".turbo" -- --release --target aarch64-unknown-linux-gnu --zig --zig-abi-suffix 2.12 &&
@@ -963,8 +963,8 @@ jobs:
963963
build: >-
964964
set -e &&
965965
npm i -g @napi-rs/cli@2.4.4 turbo@1.0.28 &&
966-
rustup toolchain install nightly-2021-11-15 &&
967-
rustup default nightly-2021-11-15 &&
966+
rustup toolchain install nightly-2022-02-23 &&
967+
rustup default nightly-2022-02-23 &&
968968
rustup target add aarch64-unknown-linux-musl &&
969969
turbo run build-native --cache-dir=".turbo" -- --release --target aarch64-unknown-linux-musl &&
970970
llvm-strip -x packages/next-swc/native/next-swc.*.node
@@ -1030,7 +1030,7 @@ jobs:
10301030
with:
10311031
profile: minimal
10321032
override: true
1033-
toolchain: nightly-2021-11-15
1033+
toolchain: nightly-2022-02-23
10341034
target: ${{ matrix.settings.target }}
10351035

10361036
- name: Cache cargo registry
@@ -1092,7 +1092,7 @@ jobs:
10921092
uses: actions-rs/toolchain@v1
10931093
with:
10941094
profile: minimal
1095-
toolchain: nightly-2021-11-15
1095+
toolchain: nightly-2022-02-23
10961096
override: true
10971097
target: wasm32-unknown-unknown
10981098

@@ -1148,7 +1148,7 @@ jobs:
11481148
uses: actions-rs/toolchain@v1
11491149
with:
11501150
profile: minimal
1151-
toolchain: nightly-2021-11-15
1151+
toolchain: nightly-2022-02-23
11521152
override: true
11531153
target: wasm32-unknown-unknown
11541154

‎docs/advanced-features/compiler.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -189,6 +189,36 @@ First, update to the latest version of Next.js: `npm install next@latest`. Then,
189189

190190
## Experimental Features
191191

192+
### Emotion
193+
194+
We're working to port `@emotion/babel-plugin` to the Next.js Compiler.
195+
196+
First, update to the latest version of Next.js: `npm install next@latest`. Then, update your `next.config.js` file:
197+
198+
```js
199+
// next.config.js
200+
201+
module.exports = {
202+
experimental: {
203+
emotion: boolean | {
204+
// default is true. It will be disabled when build type is production.
205+
sourceMap?: boolean,
206+
// default is 'dev-only'.
207+
autoLabel?: 'never' | 'dev-only' | 'always',
208+
// default is '[local]'.
209+
// Allowed values: `[local]` `[filename]` and `[dirname]`
210+
// This option only works when autoLabel is set to 'dev-only' or 'always'.
211+
// It allows you to define the format of the resulting label.
212+
// The format is defined via string where variable parts are enclosed in square brackets [].
213+
// For example labelFormat: "my-classname--[local]", where [local] will be replaced with the name of the variable the result is assigned to.
214+
labelFormat?: string,
215+
},
216+
},
217+
}
218+
```
219+
220+
Only `importMap` in `@emotion/babel-plugin` is not supported for now.
221+
192222
### Minification
193223

194224
You can opt-in to using the Next.js compiler for minification. This is 7x faster than Terser.

‎examples/with-emotion-swc/.gitignore

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# local env files
28+
.env.local
29+
.env.development.local
30+
.env.test.local
31+
.env.production.local
32+
33+
# vercel
34+
.vercel

‎examples/with-emotion-swc/README.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Emotion Example
2+
3+
Extract and inline critical css with
4+
[@emotion/css](https://github.com/emotion-js/emotion/tree/master/packages/css),
5+
[@emotion/server](https://github.com/emotion-js/emotion/tree/master/packages/server),
6+
[@emotion/react](https://github.com/emotion-js/emotion/tree/master/packages/react),
7+
and [@emotion/styled](https://github.com/emotion-js/emotion/tree/master/packages/styled).
8+
9+
## Preview
10+
11+
Preview the example live on [StackBlitz](http://stackblitz.com/):
12+
13+
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-emotion)
14+
15+
## Deploy your own
16+
17+
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
18+
19+
[![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)
20+
21+
## How to use
22+
23+
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:
24+
25+
```bash
26+
npx create-next-app --example with-emotion with-emotion-app
27+
# or
28+
yarn create next-app --example with-emotion with-emotion-app
29+
```
30+
31+
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)).

‎examples/with-emotion-swc/next.config.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/** @type {import('next').NextConfig} */
2+
3+
const nextConfig = {
4+
reactStrictMode: true,
5+
experimental: {
6+
emotion: true,
7+
},
8+
}
9+
10+
module.exports = nextConfig

‎examples/with-emotion-swc/package.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"private": true,
3+
"scripts": {
4+
"dev": "next",
5+
"build": "next build",
6+
"start": "next start"
7+
},
8+
"dependencies": {
9+
"@emotion/react": "11.8.1",
10+
"@emotion/styled": "11.8.1",
11+
"next": "latest",
12+
"react": "17.0.2",
13+
"react-dom": "17.0.2"
14+
}
15+
}

‎examples/with-emotion-swc/pages/_app.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import createCache from '@emotion/cache'
2+
import { CacheProvider } from '@emotion/react'
3+
4+
import { globalStyles } from '../shared/styles'
5+
6+
const cache = createCache({ key: 'next' })
7+
8+
const App = ({ Component, pageProps }) => (
9+
<CacheProvider value={cache}>
10+
{globalStyles}
11+
<Component {...pageProps} />
12+
</CacheProvider>
13+
)
14+
15+
export default App

‎examples/with-emotion-swc/pages/index.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { css } from '@emotion/react'
2+
import { Animated, Basic, bounce, Combined, Pink } from '../shared/styles'
3+
4+
const Home = () => (
5+
<div
6+
css={css`
7+
display: flex;
8+
flex-direction: column;
9+
`}
10+
>
11+
<Basic>Cool Styles</Basic>
12+
<Pink>Pink text</Pink>
13+
<Combined>
14+
With <code>:hover</code>.
15+
</Combined>
16+
<Animated animation={bounce}>Let's bounce.</Animated>
17+
</div>
18+
)
19+
20+
export default Home

‎examples/with-emotion-swc/shared/styles.js

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { css, Global, keyframes } from '@emotion/react'
2+
import styled from '@emotion/styled'
3+
4+
export const globalStyles = (
5+
<Global
6+
styles={css`
7+
html,
8+
body {
9+
padding: 3rem 1rem;
10+
margin: 0;
11+
background: papayawhip;
12+
min-height: 100%;
13+
font-family: Helvetica, Arial, sans-serif;
14+
font-size: 24px;
15+
}
16+
`}
17+
/>
18+
)
19+
20+
export const basicStyles = css({
21+
backgroundColor: 'white',
22+
color: 'cornflowerblue',
23+
border: '1px solid lightgreen',
24+
borderRight: 'none',
25+
borderBottom: 'none',
26+
boxShadow: '5px 5px 0 0 lightgreen, 10px 10px 0 0 lightyellow',
27+
transition: 'all 0.1s linear',
28+
margin: '3rem 0',
29+
padding: '1rem 0.5rem',
30+
})
31+
32+
export const hoverStyles = css`
33+
&:hover {
34+
color: white;
35+
background-color: lightgray;
36+
border-color: aqua;
37+
box-shadow: -15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;
38+
}
39+
`
40+
export const bounce = keyframes`
41+
from {
42+
transform: scale(1.01);
43+
}
44+
to {
45+
transform: scale(0.99);
46+
}
47+
`
48+
49+
export const Basic = styled.div`
50+
${basicStyles};
51+
`
52+
53+
export const Combined = styled.div`
54+
${basicStyles};
55+
${hoverStyles};
56+
& code {
57+
background-color: linen;
58+
}
59+
`
60+
61+
export const Pink = styled.div(basicStyles, {
62+
color: 'hotpink',
63+
})
64+
65+
export const Animated = styled.div`
66+
${basicStyles};
67+
${hoverStyles};
68+
& code {
69+
background-color: linen;
70+
}
71+
animation: ${({ animation }) => animation} 0.2s infinite ease-in-out alternate;
72+
`

0 commit comments

Comments
 (0)