Skip to content

feat(emotion): add emotion plugin#15

Merged
sapphi-red merged 5 commits intomainfrom
feat/emotion-plugin
Mar 15, 2026
Merged

feat(emotion): add emotion plugin#15
sapphi-red merged 5 commits intomainfrom
feat/emotion-plugin

Conversation

@sapphi-red
Copy link
Member

This PR adds @rolldown/plugin-emotion which utilizes Rolldown's native magic string feature.

In the synthetic benchmark included in this PR, this plugin is

  • 1.30x faster than using @swc/plugin-emotion + @rollup/plugin-swc
  • 2.64x faster than using @emotion/babel-plugin + @rolldown/plugin-babel

In a real world case, I tested with https://github.com/vanilla/vanilla/tree/release/2025.010 which I found in the GitHub search. Using this plugin was ~10% faster compared to Vite 8 +@swc/plugin-emotion + @rollup/plugin-swc.

The implementation is based on swc-project/plugins/packages/emotion (Apache License 2.0) and test cases are also adapted from it.

This PR also includes an internal package named oxc-unshadowed-visitor which make it easier to find varaibles that are imported.

@sapphi-red sapphi-red force-pushed the feat/emotion-plugin branch 5 times, most recently from da68136 to a5e84bd Compare March 15, 2026 05:31
@sapphi-red sapphi-red requested a review from Copilot March 15, 2026 08:25
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR introduces a new @rolldown/plugin-emotion package that transforms Emotion css/styled usage using Rolldown’s native magic string support, and adds supporting infra (fixtures/benchmarks, an internal scope-aware visitor, and e2e examples) to validate behavior and measure performance.

Changes:

  • Added @rolldown/plugin-emotion implementation (imports tracking, label generation, sourcemap injection, CSS minification) plus extensive fixtures-based tests.
  • Added internal @rolldown/oxc-unshadowed-visitor package to detect unshadowed references in a single pass.
  • Expanded repo tooling/config to include internal packages, benchmarks, and Playwright-based examples in workspace + CI.

Reviewed changes

Copilot reviewed 183 out of 186 changed files in this pull request and generated 9 comments.

Show a summary per file
File Description
vitest.config.ts Expands Vitest projects to include internal packages, benchmarks, and examples.
tsconfig.json Converts root TS config to a solution config referencing shared + examples configs.
tsconfig.common.json Introduces shared TS compiler options for packages (excludes examples).
pnpm-workspace.yaml Adds benchmarks, internal packages, and examples to the workspace.
packages/emotion/vitest.config.ts Adds a dedicated Vitest project for the emotion package.
packages/emotion/tsdown.config.ts Adds tsdown build config for the new plugin package.
packages/emotion/src/index.ts Core plugin implementation: transforms css/styled/Global patterns, labels, targets, and sourcemaps.
packages/emotion/src/types.ts Defines public plugin option types, including importMap and label formatting.
packages/emotion/src/import-map.ts Maps imports/specifiers to Emotion expression kinds to decide what to transform.
packages/emotion/src/label.ts Implements label sanitization and label template expansion.
packages/emotion/src/source-map.ts Inline sourcemap generation + offset-to-line/column mapping.
packages/emotion/src/css-minify.ts CSS template minification (comments/whitespace compaction).
packages/emotion/src/css-minify.test.ts Unit tests for the CSS minifier.
packages/emotion/tests/transform.test.ts Fixture runner that builds via Rolldown and snapshots outputs.
packages/emotion/tests/fixtures/** Adds many fixture inputs/expected outputs for transform coverage.
packages/emotion/tests/fixtures-labels/** Adds many label-focused fixtures/expected outputs.
packages/emotion/package.json Declares the new published plugin package metadata and deps/peers.
packages/emotion/README.md Documents usage, options, and benchmark results for the plugin.
packages/emotion/LICENSE Adds a license file placeholder for the package.
packages/emotion/benchmark/** Adds a benchmark package (generator, app, build configs, vitest bench).
packages/babel/tsdown.config.ts Aligns Babel package DTS generation to shared TS config.
internal-packages/oxc-unshadowed-visitor/** Adds the internal scope-aware visitor package + tests + bench.
internal-packages/swc-output-gen/** Adds an internal tool to generate output.swc.js for fixtures using SWC plugins.
internal-packages/benchmark-utils/** Adds a seeded RNG utility for deterministic benchmark generation.
examples/** Adds Playwright-backed E2E test harness + an Emotion example app.
.oxlintrc.json Disables no-shadow and ignores fixtures/benchmarks for linting.
.oxfmtrc.json Ignores fixtures directories in formatting.
.gitignore Ignores .swc, temporary examples dirs, and generated SWC outputs.
.github/workflows/ci.yml Installs Playwright Chromium in CI to support the new examples tests.
.gitattributes Forces LF checkout to stabilize hash-based class name generation.
package.json Adds test:e2e and generate:swc-outputs scripts.
Files not reviewed (1)
  • pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

Comment on lines +28 to +39
export function getPos(source: string, offset: number): { line: number; column: number } {
let line = 0
let column = 0
for (let i = 0; i < offset && i < source.length; i++) {
if (source.charCodeAt(i) === LF) {
line++
column = 0
} else {
column++
}
}
return { line, column }
Comment on lines +1 to +3
import type { ESTree } from 'rolldown/utils'
import { ExprKind } from './common'
import type { ImportMapConfig } from './types'
@sapphi-red sapphi-red force-pushed the feat/emotion-plugin branch 2 times, most recently from 144e157 to 49cf775 Compare March 15, 2026 09:11
@sapphi-red sapphi-red force-pushed the feat/emotion-plugin branch from 49cf775 to ebe7bcd Compare March 15, 2026 09:31
@sapphi-red sapphi-red merged commit 5461836 into main Mar 15, 2026
9 checks passed
@sapphi-red sapphi-red deleted the feat/emotion-plugin branch March 15, 2026 09:43
@sapphi-red sapphi-red mentioned this pull request Mar 15, 2026
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants