SWC emotion transform plugin #34687

Brooooooklyn · 2022-02-22T15:39:54Z

CleanShot.2022-03-09.at.15.04.34.mp4

packages/next-swc/crates/core/src/emotion/global_parent_cache.rs

packages/next-swc/crates/core/src/emotion/mod.rs

packages/next-swc/crates/core/tests/fixture.rs

padmaia

Could you add telemetry tracking of this feature? I'll work on adding better documentation, but these two PRs should help:

#30297
https://github.com/vercel/next-telemetry/pull/55

docs/advanced-features/compiler.md

packages/next-swc/crates/core/src/emotion/hash.rs

ijjk · 2022-03-14T08:33:03Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js swc-emotion-plugin	Change
buildDuration	18.2s	18.7s	⚠️ +496ms
buildDurationCached	7.3s	7.4s	⚠️ +69ms
nodeModulesSize	456 MB	456 MB	⚠️ +3.82 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js swc-emotion-plugin	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.612	3.743	⚠️ +0.13
/ avg req/sec	692.05	667.85	⚠️ -24.2
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.566	1.637	⚠️ +0.07
/error-in-render avg req/sec	1596.65	1527.53	⚠️ -69.12

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js swc-emotion-plugin	Change
925.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	27.9 kB	27.9 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.6 kB	71.6 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js swc-emotion-plugin	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js swc-emotion-plugin	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	192 B	192 B	✓
amp-HASH.js gzip	309 B	309 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	2.57 kB	2.57 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.09 kB	5.09 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.26 kB	2.26 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	387 B	387 B	✓
withRouter-HASH.js gzip	319 B	319 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.8 kB	14.8 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js swc-emotion-plugin	Change
_buildManifest.js gzip	460 B	460 B	✓
Overall change	460 B	460 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js swc-emotion-plugin	Change
index.html gzip	531 B	531 B	✓
link.html gzip	545 B	545 B	✓
withRouter.html gzip	526 B	526 B	✓
Overall change	1.6 kB	1.6 kB	✓

Default Build with SWC (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js swc-emotion-plugin	Change
buildDuration	21.9s	22.9s	⚠️ +963ms
buildDurationCached	7.7s	7.3s	-389ms
nodeModulesSize	456 MB	456 MB	⚠️ +3.82 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js swc-emotion-plugin	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.707	3.664	-0.04
/ avg req/sec	674.45	682.37	+7.92
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.531	1.668	⚠️ +0.14
/error-in-render avg req/sec	1633.1	1499.04	⚠️ -134.06

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js swc-emotion-plugin	Change
925.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	28.2 kB	28.2 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	72.1 kB	72.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js swc-emotion-plugin	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js swc-emotion-plugin	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	179 B	179 B	✓
amp-HASH.js gzip	313 B	313 B	✓
css-HASH.js gzip	324 B	324 B	✓
dynamic-HASH.js gzip	2.56 kB	2.56 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	921 B	921 B	✓
image-HASH.js gzip	5.23 kB	5.23 kB	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	2.33 kB	2.33 kB	✓
routerDirect..HASH.js gzip	322 B	322 B	✓
script-HASH.js gzip	388 B	388 B	✓
withRouter-HASH.js gzip	317 B	317 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	15 kB	15 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js swc-emotion-plugin	Change
_buildManifest.js gzip	458 B	458 B	✓
Overall change	458 B	458 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js swc-emotion-plugin	Change
index.html gzip	533 B	533 B	✓
link.html gzip	547 B	547 B	✓
withRouter.html gzip	527 B	527 B	✓
Overall change	1.61 kB	1.61 kB	✓

Commit: 5d5f254

kdy1

As there was no rust code change after my latest approval, I think it's fine

timneutkens

Only feedback I have is that this is missing an integration test to check for the hydration issue the transform solves similar to styled-components. You can have a look at test/development/basic/styled-components for inspiration.

Brooooooklyn · 2022-03-14T10:53:00Z

@timneutkens

Only feedback I have is that this is missing an integration test to check for the hydration issue the transform solves similar to styled-components.

I believe the SSR feature of emotion does not rely on the transform plugin. The transform plugin just affects the component as selector sourceMap and minify features which are already covered by the snapshot tests on the Rust side.

timneutkens

Gotcha then this should be fine 👍

karlhorky · 2022-03-15T09:16:49Z

Wow, this is great, thanks @Brooooooklyn (and @kdy1 @timneutkens) !! 🙌

Super looking forward to using this! I guess this will be in v12.1.1-canary.12 (and eventually also v12.1.1)?

Also, will there be a migration guide? Edit: working migration guide below 👇

Migration guide from `@emotion/babel-plugin` to SWC Emotion Transform:

Delete babel.config.js / .babelrc (as long as you only have Emotion config in there)
Uninstall @emotion/babel-plugin
Add the config in your next.config.js from the docs

We have tested this and are using this in production now.

Brooooooklyn · 2022-03-17T06:44:33Z

@karlhorky https://nextjs.org/docs/advanced-features/compiler#emotion

karlhorky · 2022-03-17T07:04:57Z

Great thanks @Brooooooklyn , I've updated the migration guide above, I guess the guide above is complete now...? I'll give it a shot.

Brooooooklyn · 2022-03-17T07:16:02Z

I guess this is complete now...? I'll give it a shot.

Yes, you can try it with next@canary

karlhorky · 2022-03-17T07:17:29Z

Ah, I mean my 3-step migration guide above is complete, which I'm not 100% sure about.

But I'll try it out, thanks!

tills13 · 2022-03-21T16:08:39Z

Hi, thank you so much for putting this together. I have identified something which I think should be supported but doesn't seem to be (as it's supported by the babel plugin).

When you wrap an existing component with styled, e.g. styled(SomeComponent) you cannot use it as a component selector. This functionality is (albeit briefly) described here: https://emotion.sh/docs/styled#styling-any-component

Unhandled Runtime Error
Error: Component selectors can only be used in conjunction with @emotion/babel-plugin.

Here's a minimal example page:

import styled from "@emotion/styled";

const TextWrapper = styled.span`
  color: red;
`;

const AltTextWrapper = styled(TextWrapper)`
  color: orange;
`;

const Container = styled.div`
  background: blue;

  /* fine */
  ${TextWrapper} {
    color: green;
  }

  /* problem */
  ${AltTextWrapper} {
    color: green;
  }
`;

export default function Index() {
  return (
    <Container>
      <TextWrapper>Test</TextWrapper>
      <AltTextWrapper>Test</AltTextWrapper>
    </Container>
  );
}

Note that the error is still present when wrapping a non-styled component e.g.

function SomeComponent({ className }) {
  return <div className={className}>SomeComponent</div>;
}

const WrappedSomeComponent = styled(SomeComponent)`
  color: yellow;
`;

...

const Container = styled.div`
  /* still a problem */
  ${WrappedSomeComponent} {
    color: green;
  }
`;

Since this is closed, if you'd like, I can file a separate issue to track this.

karlhorky · 2022-03-21T16:10:20Z

@tills13 I think this is reported in the issue: #30804 (comment)

tills13 · 2022-03-21T16:27:02Z

@karlhorky yep. That's the same issue. Thanks.

tills13 · 2022-03-28T15:58:35Z

My build times have gotten worse since enabling this. Am I missing something? I'm running next@canary, I have

experimental: {
    emotion: true,
},

in my next.config.js, and yet

Before:

$ time npm run build

...

real    0m14.126s
user    0m30.508s
sys     0m3.625s

After:

$ time npm run build

...

real    0m22.176s
user    0m40.941s
sys     0m6.562s

System information: Windows 10 + WSL

remarcable · 2022-03-28T16:36:54Z

@tills13 This happened to me as well and surprised me a bit. Build times got worse when compiling Emotion using SWC.

Adding swcMinify: true to next.config.js resulted in a performance-boost and outperformed Babel+Terser.

tills13 · 2022-03-28T16:50:57Z

With swcMinify: true, I get performance on-par with Babel + Terser. Certainly not an expected result given the raw performance of Rust vs. JavaScript.

kdy1 · 2022-03-29T05:54:38Z

Did you remove .babelrc?

tills13 · 2022-03-29T15:02:20Z

haha, yes. I was sure to remove the .babelrc. I edited it out, but the "before" had the NextJS warning about falling back to babel compilation because of the presence of a .babelrc and the "after" lacked that message.

padmaia · 2022-03-30T18:22:55Z

@tills13 are those numbers you shared all with an empty cache? Would you mind sharing the .next/trace files for both scenarios? If there's any way you could provide the emotion styles you're defining, that would also be super helpful.

ijjk added the type: next label Feb 22, 2022

Brooooooklyn commented Feb 22, 2022

View reviewed changes

packages/next-swc/crates/core/src/emotion/global_parent_cache.rs Outdated Show resolved Hide resolved

This comment has been minimized.

Sign in to view

timneutkens reviewed Feb 23, 2022

View reviewed changes

packages/next-swc/crates/core/src/emotion/mod.rs Outdated Show resolved Hide resolved

Brooooooklyn force-pushed the swc-emotion-plugin branch from 3bfdf51 to 075606b Compare February 24, 2022 14:59

This comment has been minimized.

Sign in to view

Brooooooklyn force-pushed the swc-emotion-plugin branch from 075606b to dd35632 Compare March 2, 2022 15:22

ijjk added the examples Issue/PR related to examples label Mar 2, 2022

Brooooooklyn force-pushed the swc-emotion-plugin branch from dd35632 to 0c919fb Compare March 2, 2022 15:25

This comment has been minimized.

Sign in to view

Brooooooklyn force-pushed the swc-emotion-plugin branch from 0c919fb to 68aa625 Compare March 3, 2022 16:04

This comment has been minimized.

Sign in to view

Brooooooklyn force-pushed the swc-emotion-plugin branch from 68aa625 to 83acb30 Compare March 8, 2022 17:14

ijjk added the area: documentation label Mar 8, 2022

Brooooooklyn force-pushed the swc-emotion-plugin branch 2 times, most recently from 9144711 to dd44f4a Compare March 8, 2022 17:18

Brooooooklyn commented Mar 8, 2022

View reviewed changes

packages/next-swc/crates/core/tests/fixture.rs Show resolved Hide resolved

Brooooooklyn marked this pull request as ready for review March 8, 2022 17:22

Brooooooklyn requested review from ijjk, shuding, padmaia, huozhi, leerob, steven-tey and styfle as code owners March 8, 2022 17:22

This comment has been minimized.

Sign in to view

padmaia requested changes Mar 8, 2022

View reviewed changes

padmaia reviewed Mar 8, 2022

View reviewed changes

docs/advanced-features/compiler.md Show resolved Hide resolved

padmaia reviewed Mar 8, 2022

View reviewed changes

packages/next-swc/crates/core/src/emotion/hash.rs Show resolved Hide resolved

Brooooooklyn added 3 commits March 14, 2022 16:08

Simply codes by reviewers suggestions, move emotion into experimental

f2af9a1

Telemetry tracking event for emotion feature

c74dce6

Upgrade swc_* for comments issues

5d5f254

Brooooooklyn force-pushed the swc-emotion-plugin branch from 7957c6e to 5d5f254 Compare March 14, 2022 08:08

kdy1 approved these changes Mar 14, 2022

View reviewed changes

timneutkens requested changes Mar 14, 2022

View reviewed changes

timneutkens approved these changes Mar 14, 2022

View reviewed changes

alexander-akait approved these changes Mar 14, 2022

View reviewed changes

timneutkens merged commit 2e16d02 into canary Mar 15, 2022

timneutkens deleted the swc-emotion-plugin branch March 15, 2022 07:51

Andarist mentioned this pull request Mar 17, 2022

Alternative to Babel for NextJS 11.1 SWC toolchain emotion-js/emotion#2467

Closed

ob6160 mentioned this pull request Mar 27, 2022

General tidyup, enable SWC public-convenience-ltd/toiletmap#1303

Merged

kwonoj mentioned this pull request Mar 31, 2022

feat(next-swc): introduce experimental tracing support for swc #35803

Merged

10 tasks

github-actions bot locked as resolved and limited conversation to collaborators Apr 30, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SWC emotion transform plugin #34687

SWC emotion transform plugin #34687

Brooooooklyn commented Feb 22, 2022 •

edited

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

padmaia left a comment •

edited

ijjk commented Mar 14, 2022

kdy1 left a comment

timneutkens left a comment

Brooooooklyn commented Mar 14, 2022

timneutkens left a comment

karlhorky commented Mar 15, 2022 •

edited

Brooooooklyn commented Mar 17, 2022

karlhorky commented Mar 17, 2022 •

edited

Brooooooklyn commented Mar 17, 2022

karlhorky commented Mar 17, 2022

tills13 commented Mar 21, 2022 •

edited

karlhorky commented Mar 21, 2022

tills13 commented Mar 21, 2022

tills13 commented Mar 28, 2022 •

edited

remarcable commented Mar 28, 2022

tills13 commented Mar 28, 2022

kdy1 commented Mar 29, 2022

tills13 commented Mar 29, 2022 •

edited

padmaia commented Mar 30, 2022

SWC emotion transform plugin #34687

SWC emotion transform plugin #34687

Conversation

Brooooooklyn commented Feb 22, 2022 • edited

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

padmaia left a comment • edited

Choose a reason for hiding this comment

ijjk commented Mar 14, 2022

Stats from current PR

kdy1 left a comment

Choose a reason for hiding this comment

timneutkens left a comment

Choose a reason for hiding this comment

Brooooooklyn commented Mar 14, 2022

timneutkens left a comment

Choose a reason for hiding this comment

karlhorky commented Mar 15, 2022 • edited

Migration guide from @emotion/babel-plugin to SWC Emotion Transform:

Brooooooklyn commented Mar 17, 2022

karlhorky commented Mar 17, 2022 • edited

Brooooooklyn commented Mar 17, 2022

karlhorky commented Mar 17, 2022

tills13 commented Mar 21, 2022 • edited

karlhorky commented Mar 21, 2022

tills13 commented Mar 21, 2022

tills13 commented Mar 28, 2022 • edited

remarcable commented Mar 28, 2022

tills13 commented Mar 28, 2022

kdy1 commented Mar 29, 2022

tills13 commented Mar 29, 2022 • edited

padmaia commented Mar 30, 2022

Brooooooklyn commented Feb 22, 2022 •

edited

padmaia left a comment •

edited

karlhorky commented Mar 15, 2022 •

edited

Migration guide from `@emotion/babel-plugin` to SWC Emotion Transform:

karlhorky commented Mar 17, 2022 •

edited

tills13 commented Mar 21, 2022 •

edited

tills13 commented Mar 28, 2022 •

edited

tills13 commented Mar 29, 2022 •

edited