Skip to content

Fix emotion template literal minification - #16184

Merged
Jakeii merged 3 commits into
mainfrom
jlk/fix-emotion-template-literal-minification
Jun 17, 2026
Merged

Jakeii merged 3 commits into
mainfrom
jlk/fix-emotion-template-literal-minification

Conversation

@Jakeii

@Jakeii Jakeii commented Jun 17, 2026 •

Copy link
Copy Markdown
Member

What does this change?

Add the @swc/plugin-emotion plugin

Why?

emotion css using the template literal syntax does not get minified without a babel or swc plugin.

Screenshots

Before After
Screenshot 2026-06-17 at 10 50 47 Screenshot 2026-06-17 at 10 51 04
Screenshot 2026-06-17 at 10 50 41 Screenshot 2026-06-17 at 10 50 58
Screenshot 2026-06-17 at 10 51 27 Screenshot 2026-06-17 at 10 51 16
Screenshot 2026-06-17 at 10 51 42 Screenshot 2026-06-17 at 10 51 50

@Jakeii Jakeii added the fix Departmental tracking: fix label Jun 17, 2026
@Jakeii Jakeii added the run_chromatic Runs chromatic when label is applied label Jun 17, 2026
cdk.out

# SWC cache
.swc

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A plugin binary gets cached here

"importSource": "@emotion/react"
}
},
"experimental": {

@Jakeii Jakeii Jun 17, 2026 •

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure why it's experimental, I think any wasm plugin is experimental.

@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Jun 17, 2026
@Jakeii
Jakeii marked this pull request as ready for review June 17, 2026 10:19
@Jakeii
Jakeii requested a review from a team as a code owner June 17, 2026 10:19
@github-actions

Copy link
Copy Markdown

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

@arelra arelra left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Amazing spot and fix!

Looks like a ~30% reduction in island size 🥳 🎉

@Jakeii
Jakeii merged commit 3efd5b8 into main Jun 17, 2026
34 checks passed
@Jakeii
Jakeii deleted the jlk/fix-emotion-template-literal-minification branch June 17, 2026 13:02
@Jakeii Jakeii added this to the Health milestone Jun 17, 2026
@Jakeii Jakeii self-assigned this Jun 17, 2026
@gu-prout

gu-prout Bot commented Jun 17, 2026

Copy link
Copy Markdown

Seen on PROD (merged by @Jakeii 9 minutes and 42 seconds ago) Please check your changes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

fix Departmental tracking: fix Seen-on-PROD

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants