@rolldown/plugin-emotion 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026-present, rolldown/plugins repository contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,129 @@
+# @rolldown/plugin-emotion [![npm](https://img.shields.io/npm/v/@rolldown/plugin-emotion.svg)](https://npmx.dev/package/@rolldown/plugin-emotion)
+
+Rolldown plugin for minification and optimization of [Emotion](https://emotion.sh/) styles.
+
+This plugin utilizes Rolldown's [native magic string API](https://rolldown.rs/in-depth/native-magic-string) instead of Babel and is more performant than using [`@emotion/babel-plugin`](https://emotion.sh/docs/@emotion/babel-plugin) with [`@rolldown/plugin-babel`](https://npmx.dev/package/@rolldown/plugin-babel).
+
+## Install
+
+```bash
+pnpm add -D @rolldown/plugin-emotion
+```
+
+## Usage
+
+```js
+import emotion from '@rolldown/plugin-emotion'
+
+export default {
+  plugins: [
+    emotion({
+      // options
+    }),
+  ],
+}
+```
+
+### Supported Libraries
+
+The plugin handles imports from these Emotion packages out of the box:
+
+- `@emotion/css`
+- `@emotion/styled`
+- `@emotion/react`
+- `@emotion/primitives`
+- `@emotion/native`
+
+## Options
+
+### `sourceMap`
+
+- **Type:** `boolean`
+- **Default:** `true` in development, `false` otherwise
+
+Generate source maps for Emotion CSS. Source maps help trace styles back to their original source in browser DevTools.
+
+### `autoLabel`
+
+- **Type:** `'never' | 'dev-only' | 'always'`
+- **Default:** `'dev-only'`
+
+Controls when debug labels are added to styled components and `css` calls.
+
+- `'never'` — Never add labels
+- `'dev-only'` — Only add labels in development mode
+- `'always'` — Always add labels
+
+### `labelFormat`
+
+- **Type:** `string`
+- **Default:** `"[local]"`
+
+Defines the format of generated debug labels. Only relevant when `autoLabel` is not `'never'`.
+
+Supports placeholders:
+
+- `[local]` — The variable name that the result of `css` or `styled` call is assigned to
+- `[filename]` — The file name (without extension)
+- `[dirname]` — The directory name of the file
+
+```js
+emotion({
+  autoLabel: 'always',
+  labelFormat: '[dirname]--[filename]--[local]',
+})
+```
+
+### `importMap`
+
+- **Type:** `Record<string, ImportMapConfig>`
+
+Custom import mappings for non-standard Emotion packages. Maps package names to their export configurations, allowing the plugin to transform custom libraries that re-export Emotion utilities.
+
+```js
+emotion({
+  importMap: {
+    'my-emotion-lib': {
+      myStyled: {
+        canonicalImport: ['@emotion/styled', 'default'],
+      },
+      myCss: {
+        canonicalImport: ['@emotion/react', 'css'],
+      },
+    },
+  },
+})
+```
+
+Each entry maps an export name to its canonical Emotion equivalent via `canonicalImport: [packageName, exportName]`.
+
+## Benchmark
+
+Results of the benchmark that can be run by `pnpm bench` in `./benchmark` directory:
+
+```
+  name                          hz      min     max    mean     p75     p99    p995    p999     rme  samples
+· @rolldown/plugin-emotion  9.7954  98.4954  108.83  102.09  103.34  108.83  108.83  108.83  ±2.23%       10
+· @rolldown/plugin-babel    3.7139   254.48  295.01  269.26  277.63  295.01  295.01  295.01  ±3.49%       10
+· @rollup/plugin-swc        7.5542   128.56  139.14  132.38  134.82  139.14  139.14  139.14  ±1.78%       10
+
+@rolldown/plugin-emotion - bench/emotion.bench.ts > Emotion Benchmark
+  1.30x faster than @rollup/plugin-swc
+  2.64x faster than @rolldown/plugin-babel
+```
+
+The benchmark was ran on the following environment:
+
+```
+OS: macOS Tahoe 26.3
+CPU: Apple M4
+Memory: LPDDR5X-7500 32GB
+```
+
+## License
+
+MIT
+
+## Credits
+
+The implementation is based on [swc-project/plugins/packages/emotion](https://github.com/swc-project/plugins/tree/main/packages/emotion) ([Apache License 2.0](https://github.com/swc-project/plugins/blob/main/LICENSE)). Test cases are also adapted from it.

package/dist/index.d.mts

@@ -0,0 +1,78 @@
+import { Plugin } from "rolldown";
+
+//#region src/types.d.ts
+/**
+ * Configuration for custom emotion-like packages
+ * Maps export names to their canonical emotion equivalents
+ */
+interface ImportMapEntry {
+  /**
+   * The canonical emotion import this maps to
+   * @example ["@emotion/styled", "default"]
+   */
+  canonicalImport: [packageName: string, exportName: string];
+  /**
+   * The styled base import for this package
+   * @example ["package/base", "something"]
+   */
+  styledBaseImport?: [packageName: string, exportName: string];
+}
+type ImportMapConfig = Record<string, ImportMapEntry>;
+interface EmotionPluginOptions {
+  /**
+   * Generate source maps for emotion CSS.
+   * @default true for development, otherwise false
+   */
+  sourceMap?: boolean;
+  /**
+   * When to add debug labels to styled components.
+   * - 'never': Never add labels
+   * - 'dev-only': Only add labels in development mode (default)
+   * - 'always': Always add labels
+   * @default 'dev-only'
+   */
+  autoLabel?: 'never' | 'dev-only' | 'always';
+  /**
+   * Label format template.
+   *
+   * Defines the format of the generated debug labels.
+   * This option is only relevant if `autoLabel` is not set to 'never'.
+   *
+   * Supports placeholders:
+   * - [local]: The variable name that the result of `css` or `styled` call is assigned to
+   * - [filename]: The file name (without extension) that the `css` or `styled` call is in
+   * - [dirname]: The directory name of the file that the `css` or `styled` call is in
+   *
+   * @default "[local]"
+   * @example "[dirname]--[filename]--[local]"
+   */
+  labelFormat?: string;
+  /**
+   * Custom import mappings for non-standard emotion packages.
+   * Maps package names to their export configurations.
+   *
+   * @example
+   * If you have a custom library "my-emotion-lib" that re-exports
+   * the default export of `@emotion/styled` as `myStyled` and
+   * the `css` export of `@emotion/react` as `myCss`,
+   * then you can configure it like this:
+   * ```
+   * {
+   *   "my-emotion-lib": {
+   *     "myStyled": {
+   *       canonicalImport: ["@emotion/styled", "default"]
+   *     },
+   *     "myCss": {
+   *       canonicalImport: ["@emotion/react", "css"]
+   *     }
+   *   }
+   * }
+   * ```
+   */
+  importMap?: Record<string, ImportMapConfig>;
+}
+//#endregion
+//#region src/index.d.ts
+declare function emotionPlugin(options?: EmotionPluginOptions): Plugin;
+//#endregion
+export { type EmotionPluginOptions, emotionPlugin as default };

package/dist/index.mjs

@@ -0,0 +1,853 @@
+import { withMagicString } from "rolldown-string";
+import { Visitor } from "rolldown/utils";
+import { GenMapping, addSegment, setSourceContent, toEncodedMap } from "@jridgewell/gen-mapping";
+import path from "node:path";
+import hashString from "@emotion/hash";
+//#region ../../internal-packages/oxc-unshadowed-visitor/src/scope-tracker.ts
+var ScopeTracker = class {
+	/** per tracked name, 0 = not shadowed */
+	shadowDepth;
+	nameCount;
+	scopeStack;
+	constructor(nameCount) {
+		this.nameCount = nameCount;
+		this.shadowDepth = Array.from({ length: nameCount }).fill(0);
+		this.scopeStack = [];
+	}
+	pushScope(kind, recordsLength) {
+		this.scopeStack.push({
+			kind,
+			shadows: Array.from({ length: this.nameCount }).fill(false),
+			recordsStartIdx: recordsLength
+		});
+	}
+	popScope() {
+		const frame = this.scopeStack.pop();
+		if (!frame) return;
+		for (let i = 0; i < this.nameCount; i++) if (frame.shadows[i]) this.shadowDepth[i]--;
+	}
+	/**
+	* Declare a block-scoped binding (let, const, class, catch param).
+	* Declares at the top of the scope stack.
+	* If the stack is empty (module level), returns without shadowing.
+	*/
+	declareBlock(nameIdx, records) {
+		if (this.scopeStack.length === 0) return;
+		const frame = this.scopeStack[this.scopeStack.length - 1];
+		this._declare(frame, nameIdx, records);
+	}
+	/**
+	* Declare a var-scoped binding.
+	* Walks up the scope stack to find the nearest 'function' scope.
+	* If none found (module level), returns without shadowing.
+	*/
+	declareVar(nameIdx, records) {
+		for (let i = this.scopeStack.length - 1; i >= 0; i--) if (this.scopeStack[i].kind === "function") {
+			this._declare(this.scopeStack[i], nameIdx, records);
+			return;
+		}
+	}
+	isShadowed(nameIdx) {
+		return this.shadowDepth[nameIdx] > 0;
+	}
+	_declare(frame, nameIdx, records) {
+		if (frame.shadows[nameIdx]) return;
+		frame.shadows[nameIdx] = true;
+		this.shadowDepth[nameIdx]++;
+		this._retroactiveInvalidate(frame.recordsStartIdx, nameIdx, records);
+	}
+	_retroactiveInvalidate(fromIdx, nameIdx, records) {
+		for (let i = fromIdx; i < records.length; i++) if (records[i].nameIdx === nameIdx) records[i].invalidated = true;
+	}
+};
+//#endregion
+//#region ../../internal-packages/oxc-unshadowed-visitor/src/binding-names.ts
+/**
+* Recursively extracts binding names from a pattern node.
+*/
+function extractBindingNames(pattern, names) {
+	switch (pattern.type) {
+		case "Identifier":
+			names.push(pattern.name);
+			break;
+		case "ArrayPattern":
+			for (const element of pattern.elements) if (element != null) extractBindingNames(element, names);
+			break;
+		case "ObjectPattern":
+			for (const prop of pattern.properties) if (prop.type === "RestElement") extractBindingNames(prop, names);
+			else extractBindingNames(prop.value, names);
+			break;
+		case "AssignmentPattern":
+			extractBindingNames(pattern.left, names);
+			break;
+		case "RestElement":
+			extractBindingNames(pattern.argument, names);
+			break;
+	}
+}
+//#endregion
+//#region ../../internal-packages/oxc-unshadowed-visitor/src/merge-visitors.ts
+/**
+* Merge user visitors with internal scope-tracking visitors.
+* Enter: internal runs FIRST, then user.
+* Exit: user runs FIRST, then internal.
+*/
+function mergeVisitors(userVisitor, ctx, internalEnter, internalExit) {
+	const merged = {};
+	for (const key of Object.keys(userVisitor)) {
+		const userFn = userVisitor[key];
+		const isExit = key.endsWith(":exit");
+		const baseKey = isExit ? key.slice(0, -5) : key;
+		if (isExit) {
+			const internalExitFn = internalExit[key];
+			if (internalExitFn) merged[key] = (node) => {
+				userFn?.(node, ctx);
+				internalExitFn(node);
+			};
+			else merged[key] = (node) => {
+				userFn?.(node, ctx);
+			};
+		} else {
+			const internalEnterFn = internalEnter[baseKey];
+			if (internalEnterFn) merged[key] = (node) => {
+				internalEnterFn(node);
+				userFn(node, ctx);
+			};
+			else merged[key] = (node) => {
+				userFn(node, ctx);
+			};
+		}
+	}
+	for (const [key, fn] of Object.entries(internalEnter)) if (!(key in merged)) merged[key] = fn;
+	for (const [key, fn] of Object.entries(internalExit)) if (!(key in merged)) merged[key] = fn;
+	return merged;
+}
+//#endregion
+//#region ../../internal-packages/oxc-unshadowed-visitor/src/scoped-visitor.ts
+var ScopedVisitor = class {
+	trackedNames;
+	userVisitor;
+	constructor(options) {
+		this.trackedNames = options.trackedNames;
+		this.userVisitor = options.visitor;
+	}
+	walk(program) {
+		const records = [];
+		const trackedNames = this.trackedNames;
+		const tracker = new ScopeTracker(trackedNames.length);
+		const ctx = { record(opts) {
+			const nameIdx = trackedNames.indexOf(opts.name);
+			if (nameIdx === -1) return;
+			records.push({
+				name: opts.name,
+				node: opts.node,
+				data: opts.data,
+				nameIdx,
+				invalidated: tracker.isShadowed(nameIdx)
+			});
+		} };
+		const tempNames = [];
+		/**
+		* Declare all binding names from a pattern for a given declaration style.
+		*/
+		const declarePattern = (pattern, mode) => {
+			tempNames.length = 0;
+			extractBindingNames(pattern, tempNames);
+			for (const name of tempNames) {
+				const idx = trackedNames.indexOf(name);
+				if (idx === -1) continue;
+				if (mode === "block") tracker.declareBlock(idx, records);
+				else tracker.declareVar(idx, records);
+			}
+		};
+		/**
+		* Declare all function params as block-scoped bindings.
+		*/
+		const declareParams = (params) => {
+			for (const param of params) declarePattern(param, "block");
+		};
+		const scopeEnter = {
+			FunctionDeclaration(node) {
+				if (node.id) declarePattern(node.id, "block");
+				tracker.pushScope("function", records.length);
+				if (node.params) declareParams(node.params);
+			},
+			FunctionExpression(node) {
+				tracker.pushScope("function", records.length);
+				if (node.id) declarePattern(node.id, "block");
+				if (node.params) declareParams(node.params);
+			},
+			ArrowFunctionExpression(node) {
+				tracker.pushScope("function", records.length);
+				if (node.params) declareParams(node.params);
+			},
+			BlockStatement(_node) {
+				tracker.pushScope("block", records.length);
+			},
+			ForStatement(_node) {
+				tracker.pushScope("block", records.length);
+			},
+			ForInStatement(_node) {
+				tracker.pushScope("block", records.length);
+			},
+			ForOfStatement(_node) {
+				tracker.pushScope("block", records.length);
+			},
+			SwitchStatement(_node) {
+				tracker.pushScope("block", records.length);
+			},
+			StaticBlock(_node) {
+				tracker.pushScope("block", records.length);
+			},
+			CatchClause(node) {
+				tracker.pushScope("block", records.length);
+				if (node.param) declarePattern(node.param, "block");
+			}
+		};
+		const scopeExit = {};
+		for (const key of Object.keys(scopeEnter)) scopeExit[`${key}:exit`] = () => tracker.popScope();
+		const declarationOnlyEnter = {
+			VariableDeclaration(node) {
+				const mode = node.kind === "var" ? "var" : "block";
+				for (const declarator of node.declarations) declarePattern(declarator.id, mode);
+			},
+			ClassDeclaration(node) {
+				if (node.id) declarePattern(node.id, "block");
+			}
+		};
+		new Visitor(mergeVisitors(this.userVisitor, ctx, {
+			...scopeEnter,
+			...declarationOnlyEnter
+		}, scopeExit)).visit(program);
+		return records.filter((r) => !r.invalidated).map(({ name, node, data }) => ({
+			name,
+			node,
+			data
+		}));
+	}
+};
+//#endregion
+//#region src/css-minify.ts
+const MULTI_LINE_COMMENT = /\/\*[\s\S]*?\*\//g;
+const SINGLE_LINE_COMMENT = /(^|[^:'^"]|\s)\/\/.*$/gm;
+const SPACE_AROUND_COLON = /\s*([:;,{}])\s*/g;
+function minifyCSSString(input, isFirst, isLast) {
+	let result = input.replace(MULTI_LINE_COMMENT, "");
+	result = result.replace(SINGLE_LINE_COMMENT, "$1");
+	if (isFirst) result = result.replace(/^[\s]+/, "");
+	else result = result.replace(/^\n+/, "");
+	if (isLast) result = result.replace(/[\s]+$/, "");
+	else result = result.replace(/\n+$/, "");
+	result = result.replace(SPACE_AROUND_COLON, "$1");
+	return result;
+}
+//#endregion
+//#region src/source-map.ts
+/**
+* Create an inline source map comment string.
+*
+* @param sourceContent - The full original source code
+* @param filename - The source filename (with extension stripped)
+* @param pos - The 0-indexed line and column number of the expression in the original source
+*/
+function createSourceMap(sourceContent, filename, pos) {
+	const map = new GenMapping({ file: filename });
+	setSourceContent(map, filename, sourceContent);
+	addSegment(map, 0, 0, filename, pos.line, pos.column);
+	return `/*# sourceMappingURL=data:application/json;charset=utf-8;base64,${btoa(JSON.stringify(toEncodedMap(map)))} */`;
+}
+const LF = "\n".charCodeAt(0);
+/**
+* Get the 0-indexed line number and column for a character offset in the source.
+*/
+function getPos(source, offset) {
+	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
+	};
+}
+//#endregion
+//#region src/common.ts
+const ExprKind = {
+	Css: 0,
+	Styled: 1,
+	GlobalJSX: 2
+};
+function regexEscape(str) {
+	return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+/**
+* Unescape template literal raw text to get the actual string value.
+* Template literal raw text preserves escape sequences as written in source.
+* We need to convert them to their actual characters.
+*/
+function unescapeTemplateRaw(raw) {
+	return raw.replace(/\\`/g, "`").replace(/\\\$/g, "$").replace(/\\b/g, "\b").replace(/\\f/g, "\f").replace(/\\n/g, "\n").replace(/\\r/g, "\r").replace(/\\t/g, "	").replace(/\\v/g, "\v").replace(/\\\\/g, "\\");
+}
+/**
+* Escape a string for use inside a JS double-quoted string literal.
+*/
+function escapeJSString(str) {
+	return str.replace(/\\/g, "\\\\").replace(/"/g, "\\\"").replace(/\n/g, "\\n").replace(/\r/g, "\\r").replace(/\t/g, "\\t").replace(/\f/g, "\\f").replace(/\u000b/g, "\\v").replace(/[\b]/g, "\\b");
+}
+const SPACE_REGEX = /\s/;
+function checkTrailingCommaExistence(str, endIndex) {
+	for (let i = endIndex - 1; i >= 0; i--) {
+		const char = str[i];
+		if (char === ",") return true;
+		if (!SPACE_REGEX.test(char)) break;
+	}
+	return false;
+}
+function maybeComma(needed) {
+	return needed ? ", " : "";
+}
+//#endregion
+//#region src/import-map.ts
+const EMOTION_OFFICIAL_LIBRARIES = {
+	"@emotion/css": {
+		css: ExprKind.Css,
+		default: ExprKind.Css
+	},
+	"@emotion/styled": { default: ExprKind.Styled },
+	"@emotion/react": {
+		css: ExprKind.Css,
+		keyframes: ExprKind.Css,
+		Global: ExprKind.GlobalJSX
+	},
+	"@emotion/primitives": {
+		css: ExprKind.Css,
+		default: ExprKind.Styled
+	},
+	"@emotion/native": {
+		css: ExprKind.Css,
+		default: ExprKind.Styled
+	}
+};
+function expandImportMap(importMap) {
+	const configs = JSON.parse(JSON.stringify(EMOTION_OFFICIAL_LIBRARIES));
+	if (!importMap) return configs;
+	for (const [importSource, exports] of Object.entries(importMap)) for (const [localExportName, entry] of Object.entries(exports)) {
+		const [packageName, exportName] = entry.canonicalImport;
+		if (packageName === "@emotion/react" && exportName === "jsx") continue;
+		const canonicalConfig = EMOTION_OFFICIAL_LIBRARIES[packageName];
+		if (canonicalConfig === void 0) throw new Error(`Import map entry for "${importSource}" references unknown package "${packageName}". Must be one of: ${Object.keys(EMOTION_OFFICIAL_LIBRARIES).join(", ")}`);
+		const kind = canonicalConfig[exportName];
+		if (kind === void 0) throw new Error(`Import map entry for "${importSource}" references unknown export "${exportName}" in package "${packageName}". Must be one of: ${Object.keys(canonicalConfig).join(", ")}`);
+		configs[importSource] ??= {};
+		configs[importSource][localExportName] = kind;
+	}
+	return configs;
+}
+function createImportMap(registeredImports) {
+	const importPackages = /* @__PURE__ */ new Map();
+	return {
+		addFromImportDecl(importDecl) {
+			if (importDecl.importKind === "type") return;
+			const config = registeredImports[importDecl.source.value];
+			if (!config) return;
+			for (const spec of importDecl.specifiers) if (spec.type === "ImportSpecifier") {
+				const kind = config[spec.imported.type === "Identifier" ? spec.imported.name : spec.imported.value];
+				if (kind !== void 0) importPackages.set(spec.local.name, {
+					type: "named",
+					kind
+				});
+			} else if (spec.type === "ImportDefaultSpecifier") {
+				const kind = config.default;
+				if (kind !== void 0) importPackages.set(spec.local.name, {
+					type: "named",
+					kind
+				});
+			} else if (spec.type === "ImportNamespaceSpecifier") importPackages.set(spec.local.name, {
+				type: "namespace",
+				config
+			});
+		},
+		get(importedName) {
+			return importPackages.get(importedName);
+		},
+		getTrackedNames() {
+			return [...importPackages.keys()];
+		},
+		isEmpty() {
+			return importPackages.size === 0;
+		}
+	};
+}
+//#endregion
+//#region src/label.ts
+const INVALID_LABEL_SPACES = /\s+/g;
+const INVALID_CSS_CLASS_NAME_CHARS = /[!"#$%&'()*+,./:;<=>?@[\\\]^`|}~{]/g;
+function sanitizeLabelPart(part) {
+	return part.replace(INVALID_LABEL_SPACES, "-").replace(INVALID_CSS_CLASS_NAME_CHARS, "-");
+}
+function createLabelWithInfo(labelFormat, context, fileStem, dirName, withPrefix) {
+	if (context == null) return "";
+	let label = `${withPrefix ? "label:" : ""}${labelFormat}`;
+	label = label.replace("[local]", sanitizeLabelPart(context));
+	if (fileStem) label = label.replace("[filename]", sanitizeLabelPart(fileStem));
+	if (dirName) label = label.replace("[dirname]", sanitizeLabelPart(dirName));
+	return label;
+}
+//#endregion
+//#region src/index.ts
+function emotionPlugin(options = {}) {
+	const sourceMapEnabled = options.sourceMap;
+	const autoLabel = options.autoLabel ?? "dev-only";
+	const labelFormat = options.labelFormat ?? "[local]";
+	const registeredImports = expandImportMap(options.importMap);
+	let isDev = false;
+	return {
+		name: "rolldown-plugin-emotion",
+		enforce: "pre",
+		configResolved(config) {
+			isDev = !config.isProduction;
+		},
+		outputOptions() {
+			if ("viteVersion" in this.meta) return;
+			isDev = process.env.NODE_ENV === "development";
+		},
+		transform: {
+			filter: {
+				id: /\.[jt]sx?$/,
+				code: new RegExp(Object.keys(registeredImports).map(regexEscape).join("|"))
+			},
+			handler: withMagicString(function(s, id, meta) {
+				const lang = id.endsWith(".tsx") ? "tsx" : id.endsWith(".ts") ? "ts" : id.endsWith(".jsx") ? "jsx" : "js";
+				const program = meta?.ast ?? this.parse(s.original, { lang });
+				const sourceContent = s.original;
+				const srcFileHash = hashString(sourceContent);
+				const fileStem = path.basename(id, path.extname(id));
+				const dirName = path.basename(path.dirname(id));
+				let targetCount = 0;
+				const importMap = createImportMap(registeredImports);
+				function shouldAddLabel() {
+					switch (autoLabel) {
+						case "always": return true;
+						case "never": return false;
+						case "dev-only": return isDev;
+						default: return false;
+					}
+				}
+				function createLabel(context, withPrefix) {
+					return createLabelWithInfo(labelFormat, context, fileStem, dirName ?? "", withPrefix);
+				}
+				function makeSourceMap(offset) {
+					if (!(sourceMapEnabled ?? isDev)) return null;
+					return createSourceMap(sourceContent, id, getPos(sourceContent, offset));
+				}
+				function buildTaggedTemplateArgs(quasi, inJsx, labelContext, sourceMapOffset, withLabelPrefix, includeLabel = true) {
+					const quasis = quasi.quasis;
+					const expressions = quasi.expressions;
+					const argsLen = quasis.length + expressions.length;
+					const parts = [];
+					for (let index = 0; index < argsLen; index++) {
+						const i = Math.floor(index / 2);
+						if (index % 2 === 0) {
+							const raw = quasis[i].value.raw;
+							const minified = minifyCSSString(unescapeTemplateRaw(raw), index === 0, index === argsLen - 1);
+							if (minified.replaceAll(" ", "") === "") {
+								if (index !== 0 && index !== argsLen - 1) parts.push("\" \"");
+							} else parts.push(`"${escapeJSString(minified)}"`);
+						} else {
+							const expr = expressions[i];
+							parts.push(s.slice(expr.start, expr.end));
+						}
+					}
+					if (!inJsx) {
+						if (includeLabel && shouldAddLabel()) {
+							const label = createLabel(labelContext, withLabelPrefix);
+							parts.push(`"${escapeJSString(label)}"`);
+						}
+						const sm = makeSourceMap(sourceMapOffset);
+						if (sm) parts.push(`"${escapeJSString(sm)}"`);
+					}
+					return parts.join(", ");
+				}
+				for (const node of program.body) if (node.type === "ImportDeclaration") importMap.addFromImportDecl(node);
+				const trackedNames = importMap.getTrackedNames();
+				if (trackedNames.length === 0) return;
+				const labelContextStack = [null];
+				let inJsx = false;
+				const records = new ScopedVisitor({
+					trackedNames,
+					visitor: {
+						VariableDeclarator(node) {
+							let ctx = null;
+							if (node.id.type === "Identifier") ctx = node.id.name;
+							if (node.init?.type === "FunctionExpression" && node.init.id) ctx = node.init.id.name;
+							labelContextStack.push(ctx);
+						},
+						"VariableDeclarator:exit"() {
+							labelContextStack.pop();
+						},
+						FunctionDeclaration(node) {
+							labelContextStack.push(node.id.name);
+						},
+						"FunctionDeclaration:exit"() {
+							labelContextStack.pop();
+						},
+						Property(node) {
+							let ctx = null;
+							if (!node.computed) {
+								if (node.key.type === "Identifier") ctx = node.key.name;
+								else if (node.key.type === "Literal" && typeof node.key.value === "string") ctx = node.key.value;
+							}
+							labelContextStack.push(ctx);
+						},
+						"Property:exit"() {
+							labelContextStack.pop();
+						},
+						ClassDeclaration(node) {
+							const name = node.id?.name ?? labelContextStack[labelContextStack.length - 1];
+							labelContextStack.push(name);
+						},
+						"ClassDeclaration:exit"() {
+							labelContextStack.pop();
+						},
+						PropertyDefinition(node) {
+							let ctx = labelContextStack[labelContextStack.length - 1];
+							if (node.key.type === "Identifier" && !node.computed) ctx = node.key.name;
+							labelContextStack.push(ctx);
+						},
+						"PropertyDefinition:exit"() {
+							labelContextStack.pop();
+						},
+						JSXElement(node, ctx) {
+							const opening = node.openingElement;
+							let isGlobal = false;
+							let smOffset = node.start;
+							let recordName = null;
+							if (opening.name.type === "JSXIdentifier") {
+								const meta = importMap.get(opening.name.name);
+								if (meta?.type === "named" && meta.kind === ExprKind.GlobalJSX) {
+									isGlobal = true;
+									smOffset = opening.name.start;
+									recordName = opening.name.name;
+								}
+							}
+							if (!isGlobal && opening.name.type === "JSXMemberExpression") {
+								const obj = opening.name.object;
+								const prop = opening.name.property;
+								if (obj.type === "JSXIdentifier" && prop.type === "JSXIdentifier") {
+									const meta = importMap.get(obj.name);
+									if (meta?.type === "namespace" && meta.config[prop.name] === ExprKind.GlobalJSX) {
+										isGlobal = true;
+										smOffset = obj.start;
+										recordName = obj.name;
+									}
+								}
+							}
+							if (isGlobal && recordName) {
+								const stylesAttr = opening.attributes.find((a) => a.type === "JSXAttribute" && a.name.type === "JSXIdentifier" && a.name.name === "styles");
+								if (stylesAttr?.value) {
+									inJsx = true;
+									const attrValue = stylesAttr.value;
+									let exprStart;
+									let exprEnd;
+									if (attrValue.type === "JSXExpressionContainer") {
+										exprStart = attrValue.expression.start;
+										exprEnd = attrValue.expression.end;
+									} else {
+										exprStart = attrValue.start;
+										exprEnd = attrValue.end;
+									}
+									const capturedSmOffset = smOffset;
+									ctx.record({
+										name: recordName,
+										node,
+										data: {
+											nodeStart: node.start,
+											nodeEnd: node.end,
+											isFullReplace: false,
+											apply: () => {
+												const sm = makeSourceMap(capturedSmOffset);
+												if (sm) {
+													s.appendLeft(exprStart, "[");
+													s.appendRight(exprEnd, `, "${escapeJSString(sm)}"]`);
+												}
+											}
+										}
+									});
+								}
+							}
+						},
+						"JSXElement:exit"() {
+							inJsx = false;
+						},
+						TaggedTemplateExpression(node, ctx) {
+							const tag = node.tag;
+							const quasi = node.quasi;
+							const labelContext = labelContextStack[labelContextStack.length - 1];
+							if (tag.type === "Identifier") {
+								const meta = importMap.get(tag.name);
+								if (meta?.type === "named" && meta.kind === ExprKind.Css) {
+									let wasInJsx = inJsx;
+									ctx.record({
+										name: tag.name,
+										node,
+										data: {
+											nodeStart: node.start,
+											nodeEnd: node.end,
+											isFullReplace: true,
+											apply: () => {
+												const args = buildTaggedTemplateArgs(quasi, wasInJsx, labelContext, node.start, false);
+												const tagText = s.slice(tag.start, tag.end);
+												s.update(node.start, node.end, `${tagText}(${args})`);
+												if (!wasInJsx) s.appendLeft(node.start, "/* @__PURE__ */ ");
+											}
+										}
+									});
+									return;
+								}
+							}
+							if (tag.type === "MemberExpression" && !tag.computed && tag.object.type === "Identifier") {
+								const meta = importMap.get(tag.object.name);
+								if (meta?.type === "named" && meta.kind === ExprKind.Styled) {
+									ctx.record({
+										name: tag.object.name,
+										node,
+										data: {
+											nodeStart: node.start,
+											nodeEnd: node.end,
+											isFullReplace: true,
+											apply: (getTarget) => {
+												let labelObj = `target: "${getTarget()}"`;
+												if (shouldAddLabel()) {
+													const label = createLabel(labelContext, false);
+													labelObj += `, label: "${escapeJSString(label)}"`;
+												}
+												const styledArgs = buildTaggedTemplateArgs(quasi, false, labelContext, node.start, false, false);
+												const styledName = s.slice(tag.object.start, tag.object.end);
+												const propName = tag.property.name;
+												s.update(node.start, node.end, `${styledName}("${escapeJSString(propName)}", {\n${labelObj}\n})(${styledArgs})`);
+												s.appendLeft(node.start, "/* @__PURE__ */ ");
+											}
+										}
+									});
+									return;
+								}
+								if (meta?.type === "namespace") {
+									const propName = tag.property.type === "Identifier" ? tag.property.name : null;
+									if (!propName || meta.config[propName] !== ExprKind.Css) return;
+									let wasInJsx = inJsx;
+									ctx.record({
+										name: tag.object.name,
+										node,
+										data: {
+											nodeStart: node.start,
+											nodeEnd: node.end,
+											isFullReplace: true,
+											apply: () => {
+												const tagText = s.slice(tag.start, tag.end);
+												const args = buildTaggedTemplateArgs(quasi, wasInJsx, labelContext, node.start, true);
+												s.update(node.start, node.end, `${tagText}(${args})`);
+												s.appendLeft(node.start, "/* @__PURE__ */ ");
+											}
+										}
+									});
+									return;
+								}
+							}
+							if (tag.type === "CallExpression" && tag.callee.type === "Identifier") {
+								const meta = importMap.get(tag.callee.name);
+								if (meta?.type === "named" && meta.kind === ExprKind.Styled) {
+									ctx.record({
+										name: tag.callee.name,
+										node,
+										data: {
+											nodeStart: node.start,
+											nodeEnd: node.end,
+											isFullReplace: true,
+											apply: (getTarget) => {
+												const styledName = s.slice(tag.callee.start, tag.callee.end);
+												let labelObj = `target: "${getTarget()}"`;
+												if (shouldAddLabel()) {
+													const label = createLabel(labelContext, false);
+													labelObj += `, label: "${escapeJSString(label)}"`;
+												}
+												const existingArgs = tag.arguments;
+												const firstArgText = existingArgs.length > 0 ? s.slice(existingArgs[0].start, existingArgs[0].end) : "";
+												let innerCallText;
+												if (existingArgs.length <= 1) innerCallText = `${styledName}(${firstArgText}, {\n${labelObj}\n})`;
+												else {
+													const secondArg = existingArgs[1];
+													if (secondArg.type === "ObjectExpression") {
+														const objText = s.slice(secondArg.start + 1, secondArg.end - 1);
+														const isEmpty = objText.trim() === "";
+														const hasTrailingComma = !isEmpty && objText.trimEnd().endsWith(",");
+														innerCallText = `${styledName}(${firstArgText}, { ${isEmpty ? "" : `${objText}${maybeComma(!hasTrailingComma)} `}${labelObj} })`;
+													} else {
+														const secondArgText = s.slice(secondArg.start, secondArg.end);
+														innerCallText = `${styledName}(${firstArgText}, {\n${labelObj},\n\t...${secondArgText}\n})`;
+													}
+												}
+												const styledArgs = buildTaggedTemplateArgs(quasi, false, labelContext, node.start, false, false);
+												s.update(node.start, node.end, `${innerCallText}(${styledArgs})`);
+												s.appendLeft(node.start, "/* @__PURE__ */ ");
+											}
+										}
+									});
+									return;
+								}
+							}
+						},
+						CallExpression(node, ctx) {
+							const callee = node.callee;
+							const args = node.arguments;
+							const labelContext = labelContextStack[labelContextStack.length - 1];
+							if (callee.type === "Identifier") {
+								const meta = importMap.get(callee.name);
+								if (meta?.type === "named" && meta.kind === ExprKind.Css && args.length > 0 && !inJsx) {
+									ctx.record({
+										name: callee.name,
+										node,
+										data: {
+											nodeStart: node.start,
+											nodeEnd: node.end,
+											isFullReplace: false,
+											apply: () => {
+												s.appendLeft(node.start, "/* @__PURE__ */ ");
+												let hasTrailingComma = checkTrailingCommaExistence(s.original, node.end - 1);
+												if (shouldAddLabel()) {
+													const label = createLabel(labelContext, true);
+													s.appendRight(node.end - 1, `${maybeComma(!hasTrailingComma)}"${escapeJSString(label)}"`);
+													hasTrailingComma = false;
+												}
+												const sm = makeSourceMap(node.start);
+												if (sm) s.appendRight(node.end - 1, `${maybeComma(!hasTrailingComma)}"${escapeJSString(sm)}"`);
+											}
+										}
+									});
+									return;
+								}
+							}
+							if (callee.type === "CallExpression") {
+								const innerCallee = callee.callee;
+								if (innerCallee.type === "Identifier") {
+									const meta = importMap.get(innerCallee.name);
+									if (meta?.type === "named" && meta.kind === ExprKind.Styled && callee.arguments.length > 0) {
+										ctx.record({
+											name: innerCallee.name,
+											node,
+											data: {
+												nodeStart: node.start,
+												nodeEnd: node.end,
+												isFullReplace: false,
+												apply: (getTarget) => {
+													s.appendLeft(node.start, "/* @__PURE__ */ ");
+													let labelObj = `target: "${getTarget()}"`;
+													if (shouldAddLabel()) {
+														const label = createLabel(labelContext, false);
+														labelObj += `, label: "${escapeJSString(label)}"`;
+													}
+													if (callee.arguments.length === 1) s.appendLeft(callee.end - 1, `, {\n\t${labelObj}\n}`);
+													else if (callee.arguments.length >= 2) {
+														const secondArg = callee.arguments[1];
+														if (secondArg.type === "ObjectExpression") if (secondArg.properties.length === 0) s.appendLeft(secondArg.end - 1, ` ${labelObj} `);
+														else {
+															const hasTrailingComma = checkTrailingCommaExistence(s.original, secondArg.end - 1);
+															s.appendLeft(secondArg.end - 1, `${maybeComma(!hasTrailingComma)} ${labelObj}`);
+														}
+														else {
+															const secondArgText = s.slice(secondArg.start, secondArg.end);
+															s.update(secondArg.start, secondArg.end, `{ ${labelObj}, ...${secondArgText} }`);
+														}
+													}
+													const sm = makeSourceMap(node.start);
+													if (sm) {
+														const hasTrailingComma = checkTrailingCommaExistence(s.original, node.end - 1);
+														s.appendLeft(node.end - 1, `${maybeComma(!hasTrailingComma)}"${escapeJSString(sm)}"`);
+													}
+												}
+											}
+										});
+										return;
+									}
+								}
+							}
+							if (callee.type === "MemberExpression" && !callee.computed && callee.object.type === "Identifier") {
+								const meta = importMap.get(callee.object.name);
+								if (meta?.type === "named" && meta.kind === ExprKind.Styled) {
+									let wasInJsx = inJsx;
+									ctx.record({
+										name: callee.object.name,
+										node,
+										data: {
+											nodeStart: node.start,
+											nodeEnd: node.end,
+											isFullReplace: false,
+											apply: (getTarget) => {
+												let labelObj = "";
+												if (!wasInJsx) {
+													labelObj += `target: "${getTarget()}"`;
+													s.appendLeft(node.start, "/* @__PURE__ */ ");
+													if (shouldAddLabel()) {
+														const label = createLabel(labelContext, false);
+														labelObj += `, label: "${escapeJSString(label)}"`;
+													}
+												}
+												const styledName = s.slice(callee.object.start, callee.object.end);
+												const propName = callee.property.name;
+												s.update(callee.start, callee.end, `${styledName}("${escapeJSString(propName)}"${labelObj ? `, { ${labelObj} }` : ""})`);
+												if (!wasInJsx) {
+													const sm = makeSourceMap(node.start);
+													if (sm) {
+														const hasTrailingComma = checkTrailingCommaExistence(s.original, node.end - 1);
+														s.appendLeft(node.end - 1, `${maybeComma(!hasTrailingComma)}"${escapeJSString(sm)}"`);
+													}
+												}
+											}
+										}
+									});
+									return;
+								}
+								if (meta?.type === "namespace") {
+									const propName = callee.property.type === "Identifier" ? callee.property.name : null;
+									if (!propName || meta.config[propName] !== ExprKind.Css) return;
+									ctx.record({
+										name: callee.object.name,
+										node,
+										data: {
+											nodeStart: node.start,
+											nodeEnd: node.end,
+											isFullReplace: false,
+											apply: () => {
+												s.appendLeft(node.start, "/* @__PURE__ */ ");
+												let hasTrailingComma = checkTrailingCommaExistence(s.original, node.end - 1);
+												if (shouldAddLabel()) {
+													const label = createLabel(labelContext, true);
+													s.appendRight(node.end - 1, `${maybeComma(!hasTrailingComma)}"${escapeJSString(label)}"`);
+													hasTrailingComma = false;
+												}
+												const sm = makeSourceMap(node.start);
+												if (sm) s.appendRight(node.end - 1, `${maybeComma(!hasTrailingComma)}"${escapeJSString(sm)}"`);
+											}
+										}
+									});
+									return;
+								}
+							}
+						}
+					}
+				}).walk(program);
+				if (records.length === 0) return;
+				const consumedRanges = [];
+				for (const record of records) {
+					const { nodeStart, nodeEnd, isFullReplace, apply } = record.data;
+					if (consumedRanges.some(([cs, ce]) => nodeStart >= cs && nodeEnd <= ce)) continue;
+					apply(() => `e${srcFileHash}${targetCount++}`);
+					if (isFullReplace) consumedRanges.push([nodeStart, nodeEnd]);
+				}
+			})
+		}
+	};
+}
+//#endregion
+export { emotionPlugin as default };

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@rolldown/plugin-emotion",
+  "version": "0.1.0",
+  "description": "Rolldown plugin for Emotion CSS-in-JS",
+  "keywords": [
+    "css-in-js",
+    "emotion",
+    "plugin",
+    "rolldown",
+    "rolldown-plugin"
+  ],
+  "homepage": "https://github.com/rolldown/plugins/tree/main/packages/emotion#readme",
+  "bugs": {
+    "url": "https://github.com/rolldown/plugins/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rolldown/plugins.git",
+    "directory": "packages/emotion"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": "./dist/index.mjs",
+  "dependencies": {
+    "@emotion/hash": "^0.9.2",
+    "@jridgewell/gen-mapping": "^0.3.13",
+    "rolldown-string": "^0.3.0"
+  },
+  "devDependencies": {
+    "rolldown": "^1.0.0-rc.9",
+    "tinyglobby": "^0.2.15",
+    "vite": "^8.0.0",
+    "@rolldown/oxc-unshadowed-visitor": "0.0.0"
+  },
+  "peerDependencies": {
+    "rolldown": "^1.0.0-rc.9",
+    "vite": "^8.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=22.12.0 || ^24.0.0"
+  },
+  "compatiblePackages": {
+    "schemaVersion": 1,
+    "rollup": {
+      "type": "incompatible",
+      "reason": "Uses Rolldown-specific APIs"
+    }
+  },
+  "scripts": {
+    "dev": "tsdown --watch",
+    "build": "tsdown",
+    "test": "vitest --project emotion"
+  }
+}