rolldown · sapphi-red · Mar 15, 2026 · Mar 1, 2026 · Mar 1, 2026 · Mar 1, 2026
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,2 @@
+# keep LF as-is even on Windows for consistent hash values across platforms
+* text=auto eol=lf
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -48,6 +48,9 @@ jobs:
  - name: Install deps
  run: pnpm install
 
+ - name: Install playwright
+ run: pnpm --filter examples exec playwright install chromium --with-deps
+
  - name: Build
  run: pnpm run build
 
@@ -77,6 +80,9 @@ jobs:
  - name: Install deps
  run: pnpm install --no-frozen-lockfile
 
+ - name: Install playwright
+ run: pnpm --filter examples exec playwright install chromium --with-deps
+
  - name: Install @babel/core v7 types
  run: pnpm add -Dw @types/babel__core@^7.20.5
 

diff --git a/.gitignore b/.gitignore
@@ -142,3 +142,8 @@ dist
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 .vite/
+
+.swc
+
+/examples-temp-*
+output.swc.*
diff --git a/.oxfmtrc.json b/.oxfmtrc.json
@@ -2,5 +2,10 @@
  "$schema": "./node_modules/oxfmt/configuration_schema.json",
  "semi": false,
  "singleQuote": true,
- "ignorePatterns": ["**/dist/**", "packages/*/CHANGELOG.md"]
+ "ignorePatterns": [
+ "**/dist/**",
+ "packages/*/CHANGELOG.md",
+ "**/fixtures/**",
+ "**/fixtures-labels/**"
+ ]
 }
diff --git a/.oxlintrc.json b/.oxlintrc.json
@@ -4,5 +4,8 @@
  "correctness": "error",
  "suspicious": "error"
  },
- "ignorePatterns": ["**/dist/**"]
+ "rules": {
+ "no-shadow": "off"
+ },
+ "ignorePatterns": ["**/dist/**", "**/fixtures/**", "**/fixtures-labels/**", "**/benchmark/**"]
 }
diff --git a/README.md b/README.md
@@ -20,10 +20,13 @@ Official Rolldown plugins
 ## Packages
 
 - [`@rolldown/plugin-babel`](https://github.com/rolldown/plugins/tree/main/packages/babel) ([![NPM version][badge-npm-version-babel]][url-npm-babel]): transform code with Babel
+- [`@rolldown/plugin-emotion`](https://github.com/rolldown/plugins/tree/main/packages/emotion) ([![NPM version][badge-npm-version-emotion]][url-npm-emotion]): minification and optimization of Emotion styles
 
 ## License
 
 [MIT](https://github.com/rolldown/plugins/blob/main/LICENSE)
 
 [badge-npm-version-babel]: https://img.shields.io/npm/v/@rolldown/plugin-babel/latest?color=brightgreen
+[badge-npm-version-emotion]: https://img.shields.io/npm/v/@rolldown/plugin-emotion/latest?color=brightgreen
 [url-npm-babel]: https://npmx.dev/package/@rolldown/plugin-babel/v/latest
+[url-npm-emotion]: https://npmx.dev/package/@rolldown/plugin-emotion/v/latest
diff --git a/examples/emotion/emotion.test.ts b/examples/emotion/emotion.test.ts
@@ -0,0 +1,28 @@
+import { expect, test } from 'vitest'
+import { editFile, getBg, getColor, isServe, page } from '~utils'
+
+test('should render app', async () => {
+ expect(await page.textContent('.emotion-title')).toBe('Emotion Works!')
+})
+
+test('styled component should apply styles', async () => {
+ const title = page.locator('.emotion-title')
+ const color = await getColor(title)
+ expect(color).toBe('rgb(255, 105, 180)') // hotpink
+})
+
+test('css prop should work', async () => {
+ const button = page.locator('.emotion-button')
+ const bgColor = await getBg(button)
+ expect(bgColor).toBe('rgb(100, 108, 255)') // #646cff
+})
+
+test.runIf(isServe)('hmr works', async () => {
+ editFile('src/App.tsx', (code) => code.replace('hotpink', 'blue'))
+ await expect
+ .poll(async () => {
+ const title = page.locator('.emotion-title')
+ return getColor(title)
+ })
+ .toBe('rgb(0, 0, 255)') // blue
+})
diff --git a/examples/emotion/index.html b/examples/emotion/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Emotion Example</title>
+ </head>
+ <body>
+ <div id="root"></div>
+ <script type="module" src="/src/main.tsx"></script>
+ </body>
+</html>
diff --git a/examples/emotion/package.json b/examples/emotion/package.json
@@ -0,0 +1,23 @@
+{
+ "name": "@rolldown/example-emotion",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "@emotion/react": "^11.14.0",
+ "@emotion/styled": "^11.14.1",
+ "react": "^19.2.4",
+ "react-dom": "^19.2.4"
+ },
+ "devDependencies": {
+ "@rolldown/plugin-emotion": "workspace:*",
+ "@types/react": "^19.2.14",
+ "@types/react-dom": "^19.2.3",
+ "@vitejs/plugin-react": "^6.0.1",
+ "vite": "8.0.0"
+ }
+}
diff --git a/examples/emotion/src/App.tsx b/examples/emotion/src/App.tsx
@@ -0,0 +1,42 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react'
+import styled from '@emotion/styled'
+
+const Title = styled.h1`
+ color: hotpink;
+ font-size: 2rem;
+`
+
+const buttonStyle = css`
+ padding: 0.5rem 1rem;
+ background-color: #646cff;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+
+ &:hover {
+ background-color: #535bf2;
+ }
+`
+
+const Card = styled.div`
+ padding: 2rem;
+ border: 1px solid #ccc;
+ border-radius: 8px;
+ margin: 1rem;
+`
+
+export default function App() {
+ return (
+ <div className="emotion-app">
+ <Title className="emotion-title">Emotion Works!</Title>
+ <Card className="emotion-card">
+ <p className="emotion-text">This is a styled card component.</p>
+ <button css={buttonStyle} className="emotion-button">
+ Styled Button
+ </button>
+ </Card>
+ </div>
+ )
+}
diff --git a/examples/emotion/src/main.tsx b/examples/emotion/src/main.tsx
@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+ <StrictMode>
+ <App />
+ </StrictMode>,
+)
diff --git a/examples/emotion/vite.config.ts b/examples/emotion/vite.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import emotion from '@rolldown/plugin-emotion'
+
+export default defineConfig({
+ plugins: [
+ emotion({
+ sourceMap: true,
+ autoLabel: 'always',
+ }),
+ react({
+ jsxImportSource: '@emotion/react',
+ }),
+ ],
+})
diff --git a/examples/package.json b/examples/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "@rolldown/examples",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "test": "vitest --project=e2e:dev --project=e2e:build",
+ "test:dev": "vitest --project=e2e:dev",
+ "test:build": "vitest --project=e2e:build"
+ },
+ "devDependencies": {
+ "playwright-chromium": "^1.58.2",
+ "vite": "^8.0.0"
+ }
+}
diff --git a/examples/test-utils.ts b/examples/test-utils.ts
@@ -0,0 +1,25 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import type { Locator } from 'playwright-chromium'
+import { inject } from 'vitest'
+import { tempDir } from './vitestSetup'
+
+export { page } from './vitestSetup'
+
+export const isBuild = !!inject('isBuild')
+export const isServe = !isBuild
+
+export function editFile(file: string, callback: (content: string) => string): void {
+ const filePath = path.resolve(tempDir, file)
+ const content = fs.readFileSync(filePath, 'utf-8')
+ const modified = callback(content)
+ fs.writeFileSync(filePath, modified)
+}
+
+export async function getColor(locator: Locator): Promise<string> {
+ return locator.evaluate((el) => getComputedStyle(el).color)
+}
+
+export async function getBg(locator: Locator): Promise<string> {
+ return locator.evaluate((el) => getComputedStyle(el).backgroundColor)
+}
diff --git a/examples/tsconfig.json b/examples/tsconfig.json
@@ -0,0 +1,19 @@
+{
+ "compilerOptions": {
+ "target": "esnext",
+ "module": "preserve",
+ "lib": ["es2023", "DOM"],
+ "strict": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "declaration": true,
+ "jsx": "react-jsx",
+ "paths": {
+ "~utils": ["./test-utils.ts"]
+ }
+ }
+}
diff --git a/examples/vitest.config.ts b/examples/vitest.config.ts
@@ -0,0 +1,45 @@
+import { defineConfig } from 'vitest/config'
+import { resolve } from 'node:path'
+
+const timeout = process.env.CI ? 6000 : 3000
+
+export default defineConfig({
+ resolve: {
+ alias: {
+ '~utils': resolve(import.meta.dirname, './test-utils.ts'),
+ },
+ },
+ test: {
+ setupFiles: ['./vitestSetup.ts'],
+ globalSetup: ['./vitestGlobalSetup.ts'],
+ testTimeout: timeout,
+ hookTimeout: timeout,
+ reporters: 'dot',
+ fileParallelism: false,
+ projects: [
+ {
+ extends: true,
+ test: {
+ name: 'e2e:dev',
+ env: {
+ // set here to override Vitest's default `"test"`
+ NODE_ENV: 'development',
+ },
+ },
+ },
+ {
+ extends: true,
+ test: {
+ name: 'e2e:build',
+ provide: {
+ isBuild: '1',
+ },
+ env: {
+ // set here to override Vitest's default `"test"`
+ NODE_ENV: 'production',
+ },
+ },
+ },
+ ],
+ },
+})
diff --git a/examples/vitestGlobalSetup.ts b/examples/vitestGlobalSetup.ts
@@ -0,0 +1,31 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import type { TestProject } from 'vitest/node'
+import type { BrowserServer } from 'playwright-chromium'
+import { chromium } from 'playwright-chromium'
+
+let tempBaseDir: string | undefined
+let browserServer: BrowserServer | undefined
+
+export async function setup({ provide, config }: TestProject): Promise<void> {
+ browserServer = await chromium.launchServer({
+ headless: !process.env.VITE_DEBUG_SERVE,
+ args: process.env.CI ? ['--no-sandbox', '--disable-setuid-sandbox'] : undefined,
+ })
+ provide('wsEndpoint', browserServer.wsEndpoint())
+
+ const isBuild = !!config.provide.isBuild
+ tempBaseDir = path.join(import.meta.dirname, `../examples-temp-${isBuild ? 'build' : 'dev'}`)
+
+ if (!fs.existsSync(tempBaseDir)) {
+ fs.mkdirSync(tempBaseDir, { recursive: true })
+ }
+ provide('tempBaseDir', tempBaseDir)
+}
+
+export async function teardown(): Promise<void> {
+ await browserServer?.close()
+ if (fs.existsSync(tempBaseDir!)) {
+ fs.rmSync(tempBaseDir!, { recursive: true, force: true })
+ }
+}
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,2 @@
+# keep LF as-is even on Windows for consistent hash values across platforms
+* text=auto eol=lf
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -48,6 +48,9 @@ jobs:
  - name: Install deps
  run: pnpm install
 
+ - name: Install playwright
+ run: pnpm --filter examples exec playwright install chromium --with-deps
+
  - name: Build
  run: pnpm run build
 
@@ -77,6 +80,9 @@ jobs:
  - name: Install deps
  run: pnpm install --no-frozen-lockfile
 
+ - name: Install playwright
+ run: pnpm --filter examples exec playwright install chromium --with-deps
+
  - name: Install @babel/core v7 types
  run: pnpm add -Dw @types/babel__core@^7.20.5
 

diff --git a/.gitignore b/.gitignore
@@ -142,3 +142,8 @@ dist
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 .vite/
+
+.swc
+
+/examples-temp-*
+output.swc.*
diff --git a/.oxfmtrc.json b/.oxfmtrc.json
@@ -2,5 +2,10 @@
  "$schema": "./node_modules/oxfmt/configuration_schema.json",
  "semi": false,
  "singleQuote": true,
- "ignorePatterns": ["**/dist/**", "packages/*/CHANGELOG.md"]
+ "ignorePatterns": [
+ "**/dist/**",
+ "packages/*/CHANGELOG.md",
+ "**/fixtures/**",
+ "**/fixtures-labels/**"
+ ]
 }
diff --git a/.oxlintrc.json b/.oxlintrc.json
@@ -4,5 +4,8 @@
  "correctness": "error",
  "suspicious": "error"
  },
- "ignorePatterns": ["**/dist/**"]
+ "rules": {
+ "no-shadow": "off"
+ },
+ "ignorePatterns": ["**/dist/**", "**/fixtures/**", "**/fixtures-labels/**", "**/benchmark/**"]
 }
diff --git a/README.md b/README.md
@@ -20,10 +20,13 @@ Official Rolldown plugins
 ## Packages
 
 - [`@rolldown/plugin-babel`](https://github.com/rolldown/plugins/tree/main/packages/babel) ([![NPM version][badge-npm-version-babel]][url-npm-babel]): transform code with Babel
+- [`@rolldown/plugin-emotion`](https://github.com/rolldown/plugins/tree/main/packages/emotion) ([![NPM version][badge-npm-version-emotion]][url-npm-emotion]): minification and optimization of Emotion styles
 
 ## License
 
 [MIT](https://github.com/rolldown/plugins/blob/main/LICENSE)
 
 [badge-npm-version-babel]: https://img.shields.io/npm/v/@rolldown/plugin-babel/latest?color=brightgreen
+[badge-npm-version-emotion]: https://img.shields.io/npm/v/@rolldown/plugin-emotion/latest?color=brightgreen
 [url-npm-babel]: https://npmx.dev/package/@rolldown/plugin-babel/v/latest
+[url-npm-emotion]: https://npmx.dev/package/@rolldown/plugin-emotion/v/latest
diff --git a/examples/emotion/emotion.test.ts b/examples/emotion/emotion.test.ts
@@ -0,0 +1,28 @@
+import { expect, test } from 'vitest'
+import { editFile, getBg, getColor, isServe, page } from '~utils'
+
+test('should render app', async () => {
+ expect(await page.textContent('.emotion-title')).toBe('Emotion Works!')
+})
+
+test('styled component should apply styles', async () => {
+ const title = page.locator('.emotion-title')
+ const color = await getColor(title)
+ expect(color).toBe('rgb(255, 105, 180)') // hotpink
+})
+
+test('css prop should work', async () => {
+ const button = page.locator('.emotion-button')
+ const bgColor = await getBg(button)
+ expect(bgColor).toBe('rgb(100, 108, 255)') // #646cff
+})
+
+test.runIf(isServe)('hmr works', async () => {
+ editFile('src/App.tsx', (code) => code.replace('hotpink', 'blue'))
+ await expect
+ .poll(async () => {
+ const title = page.locator('.emotion-title')
+ return getColor(title)
+ })
+ .toBe('rgb(0, 0, 255)') // blue
+})
diff --git a/examples/emotion/index.html b/examples/emotion/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Emotion Example</title>
+ </head>
+ <body>
+ <div id="root"></div>
+ <script type="module" src="/src/main.tsx"></script>
+ </body>
+</html>
diff --git a/examples/emotion/package.json b/examples/emotion/package.json
@@ -0,0 +1,23 @@
+{
+ "name": "@rolldown/example-emotion",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "@emotion/react": "^11.14.0",
+ "@emotion/styled": "^11.14.1",
+ "react": "^19.2.4",
+ "react-dom": "^19.2.4"
+ },
+ "devDependencies": {
+ "@rolldown/plugin-emotion": "workspace:*",
+ "@types/react": "^19.2.14",
+ "@types/react-dom": "^19.2.3",
+ "@vitejs/plugin-react": "^6.0.1",
+ "vite": "8.0.0"
+ }
+}
diff --git a/examples/emotion/src/App.tsx b/examples/emotion/src/App.tsx
@@ -0,0 +1,42 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react'
+import styled from '@emotion/styled'
+
+const Title = styled.h1`
+ color: hotpink;
+ font-size: 2rem;
+`
+
+const buttonStyle = css`
+ padding: 0.5rem 1rem;
+ background-color: #646cff;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+
+ &:hover {
+ background-color: #535bf2;
+ }
+`
+
+const Card = styled.div`
+ padding: 2rem;
+ border: 1px solid #ccc;
+ border-radius: 8px;
+ margin: 1rem;
+`
+
+export default function App() {
+ return (
+ <div className="emotion-app">
+ <Title className="emotion-title">Emotion Works!</Title>
+ <Card className="emotion-card">
+ <p className="emotion-text">This is a styled card component.</p>
+ <button css={buttonStyle} className="emotion-button">
+ Styled Button
+ </button>
+ </Card>
+ </div>
+ )
+}
diff --git a/examples/emotion/src/main.tsx b/examples/emotion/src/main.tsx
@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+ <StrictMode>
+ <App />
+ </StrictMode>,
+)
diff --git a/examples/emotion/vite.config.ts b/examples/emotion/vite.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import emotion from '@rolldown/plugin-emotion'
+
+export default defineConfig({
+ plugins: [
+ emotion({
+ sourceMap: true,
+ autoLabel: 'always',
+ }),
+ react({
+ jsxImportSource: '@emotion/react',
+ }),
+ ],
+})
diff --git a/examples/package.json b/examples/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "@rolldown/examples",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "test": "vitest --project=e2e:dev --project=e2e:build",
+ "test:dev": "vitest --project=e2e:dev",
+ "test:build": "vitest --project=e2e:build"
+ },
+ "devDependencies": {
+ "playwright-chromium": "^1.58.2",
+ "vite": "^8.0.0"
+ }
+}
diff --git a/examples/test-utils.ts b/examples/test-utils.ts
@@ -0,0 +1,25 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import type { Locator } from 'playwright-chromium'
+import { inject } from 'vitest'
+import { tempDir } from './vitestSetup'
+
+export { page } from './vitestSetup'
+
+export const isBuild = !!inject('isBuild')
+export const isServe = !isBuild
+
+export function editFile(file: string, callback: (content: string) => string): void {
+ const filePath = path.resolve(tempDir, file)
+ const content = fs.readFileSync(filePath, 'utf-8')
+ const modified = callback(content)
+ fs.writeFileSync(filePath, modified)
+}
+
+export async function getColor(locator: Locator): Promise<string> {
+ return locator.evaluate((el) => getComputedStyle(el).color)
+}
+
+export async function getBg(locator: Locator): Promise<string> {
+ return locator.evaluate((el) => getComputedStyle(el).backgroundColor)
+}
diff --git a/examples/tsconfig.json b/examples/tsconfig.json
@@ -0,0 +1,19 @@
+{
+ "compilerOptions": {
+ "target": "esnext",
+ "module": "preserve",
+ "lib": ["es2023", "DOM"],
+ "strict": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "declaration": true,
+ "jsx": "react-jsx",
+ "paths": {
+ "~utils": ["./test-utils.ts"]
+ }
+ }
+}
diff --git a/examples/vitest.config.ts b/examples/vitest.config.ts
@@ -0,0 +1,45 @@
+import { defineConfig } from 'vitest/config'
+import { resolve } from 'node:path'
+
+const timeout = process.env.CI ? 6000 : 3000
+
+export default defineConfig({
+ resolve: {
+ alias: {
+ '~utils': resolve(import.meta.dirname, './test-utils.ts'),
+ },
+ },
+ test: {
+ setupFiles: ['./vitestSetup.ts'],
+ globalSetup: ['./vitestGlobalSetup.ts'],
+ testTimeout: timeout,
+ hookTimeout: timeout,
+ reporters: 'dot',
+ fileParallelism: false,
+ projects: [
+ {
+ extends: true,
+ test: {
+ name: 'e2e:dev',
+ env: {
+ // set here to override Vitest's default `"test"`
+ NODE_ENV: 'development',
+ },
+ },
+ },
+ {
+ extends: true,
+ test: {
+ name: 'e2e:build',
+ provide: {
+ isBuild: '1',
+ },
+ env: {
+ // set here to override Vitest's default `"test"`
+ NODE_ENV: 'production',
+ },
+ },
+ },
+ ],
+ },
+})
diff --git a/examples/vitestGlobalSetup.ts b/examples/vitestGlobalSetup.ts
@@ -0,0 +1,31 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import type { TestProject } from 'vitest/node'
+import type { BrowserServer } from 'playwright-chromium'
+import { chromium } from 'playwright-chromium'
+
+let tempBaseDir: string | undefined
+let browserServer: BrowserServer | undefined
+
+export async function setup({ provide, config }: TestProject): Promise<void> {
+ browserServer = await chromium.launchServer({
+ headless: !process.env.VITE_DEBUG_SERVE,
+ args: process.env.CI ? ['--no-sandbox', '--disable-setuid-sandbox'] : undefined,
+ })
+ provide('wsEndpoint', browserServer.wsEndpoint())
+
+ const isBuild = !!config.provide.isBuild
+ tempBaseDir = path.join(import.meta.dirname, `../examples-temp-${isBuild ? 'build' : 'dev'}`)
+
+ if (!fs.existsSync(tempBaseDir)) {
+ fs.mkdirSync(tempBaseDir, { recursive: true })
+ }
+ provide('tempBaseDir', tempBaseDir)
+}
+
+export async function teardown(): Promise<void> {
+ await browserServer?.close()
+ if (fs.existsSync(tempBaseDir!)) {
+ fs.rmSync(tempBaseDir!, { recursive: true, force: true })
+ }
+}
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,2 @@
+# keep LF as-is even on Windows for consistent hash values across platforms
+* text=auto eol=lf
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -48,6 +48,9 @@ jobs:
  - name: Install deps
  run: pnpm install
 
+ - name: Install playwright
+ run: pnpm --filter examples exec playwright install chromium --with-deps
+
  - name: Build
  run: pnpm run build
 
@@ -77,6 +80,9 @@ jobs:
  - name: Install deps
  run: pnpm install --no-frozen-lockfile
 
+ - name: Install playwright
+ run: pnpm --filter examples exec playwright install chromium --with-deps
+
  - name: Install @babel/core v7 types
  run: pnpm add -Dw @types/babel__core@^7.20.5
 

diff --git a/.gitignore b/.gitignore
@@ -142,3 +142,8 @@ dist
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 .vite/
+
+.swc
+
+/examples-temp-*
+output.swc.*
diff --git a/.oxfmtrc.json b/.oxfmtrc.json
@@ -2,5 +2,10 @@
  "$schema": "./node_modules/oxfmt/configuration_schema.json",
  "semi": false,
  "singleQuote": true,
- "ignorePatterns": ["**/dist/**", "packages/*/CHANGELOG.md"]
+ "ignorePatterns": [
+ "**/dist/**",
+ "packages/*/CHANGELOG.md",
+ "**/fixtures/**",
+ "**/fixtures-labels/**"
+ ]
 }
diff --git a/.oxlintrc.json b/.oxlintrc.json
@@ -4,5 +4,8 @@
  "correctness": "error",
  "suspicious": "error"
  },
- "ignorePatterns": ["**/dist/**"]
+ "rules": {
+ "no-shadow": "off"
+ },
+ "ignorePatterns": ["**/dist/**", "**/fixtures/**", "**/fixtures-labels/**", "**/benchmark/**"]
 }
diff --git a/README.md b/README.md
@@ -20,10 +20,13 @@ Official Rolldown plugins
 ## Packages
 
 - [`@rolldown/plugin-babel`](https://github.com/rolldown/plugins/tree/main/packages/babel) ([![NPM version][badge-npm-version-babel]][url-npm-babel]): transform code with Babel
+- [`@rolldown/plugin-emotion`](https://github.com/rolldown/plugins/tree/main/packages/emotion) ([![NPM version][badge-npm-version-emotion]][url-npm-emotion]): minification and optimization of Emotion styles
 
 ## License
 
 [MIT](https://github.com/rolldown/plugins/blob/main/LICENSE)
 
 [badge-npm-version-babel]: https://img.shields.io/npm/v/@rolldown/plugin-babel/latest?color=brightgreen
+[badge-npm-version-emotion]: https://img.shields.io/npm/v/@rolldown/plugin-emotion/latest?color=brightgreen
 [url-npm-babel]: https://npmx.dev/package/@rolldown/plugin-babel/v/latest
+[url-npm-emotion]: https://npmx.dev/package/@rolldown/plugin-emotion/v/latest
diff --git a/examples/emotion/emotion.test.ts b/examples/emotion/emotion.test.ts
@@ -0,0 +1,28 @@
+import { expect, test } from 'vitest'
+import { editFile, getBg, getColor, isServe, page } from '~utils'
+
+test('should render app', async () => {
+ expect(await page.textContent('.emotion-title')).toBe('Emotion Works!')
+})
+
+test('styled component should apply styles', async () => {
+ const title = page.locator('.emotion-title')
+ const color = await getColor(title)
+ expect(color).toBe('rgb(255, 105, 180)') // hotpink
+})
+
+test('css prop should work', async () => {
+ const button = page.locator('.emotion-button')
+ const bgColor = await getBg(button)
+ expect(bgColor).toBe('rgb(100, 108, 255)') // #646cff
+})
+
+test.runIf(isServe)('hmr works', async () => {
+ editFile('src/App.tsx', (code) => code.replace('hotpink', 'blue'))
+ await expect
+ .poll(async () => {
+ const title = page.locator('.emotion-title')
+ return getColor(title)
+ })
+ .toBe('rgb(0, 0, 255)') // blue
+})
diff --git a/examples/emotion/index.html b/examples/emotion/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Emotion Example</title>
+ </head>
+ <body>
+ <div id="root"></div>
+ <script type="module" src="/src/main.tsx"></script>
+ </body>
+</html>
diff --git a/examples/emotion/package.json b/examples/emotion/package.json
@@ -0,0 +1,23 @@
+{
+ "name": "@rolldown/example-emotion",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "@emotion/react": "^11.14.0",
+ "@emotion/styled": "^11.14.1",
+ "react": "^19.2.4",
+ "react-dom": "^19.2.4"
+ },
+ "devDependencies": {
+ "@rolldown/plugin-emotion": "workspace:*",
+ "@types/react": "^19.2.14",
+ "@types/react-dom": "^19.2.3",
+ "@vitejs/plugin-react": "^6.0.1",
+ "vite": "8.0.0"
+ }
+}
diff --git a/examples/emotion/src/App.tsx b/examples/emotion/src/App.tsx
@@ -0,0 +1,42 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react'
+import styled from '@emotion/styled'
+
+const Title = styled.h1`
+ color: hotpink;
+ font-size: 2rem;
+`
+
+const buttonStyle = css`
+ padding: 0.5rem 1rem;
+ background-color: #646cff;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+
+ &:hover {
+ background-color: #535bf2;
+ }
+`
+
+const Card = styled.div`
+ padding: 2rem;
+ border: 1px solid #ccc;
+ border-radius: 8px;
+ margin: 1rem;
+`
+
+export default function App() {
+ return (
+ <div className="emotion-app">
+ <Title className="emotion-title">Emotion Works!</Title>
+ <Card className="emotion-card">
+ <p className="emotion-text">This is a styled card component.</p>
+ <button css={buttonStyle} className="emotion-button">
+ Styled Button
+ </button>
+ </Card>
+ </div>
+ )
+}
diff --git a/examples/emotion/src/main.tsx b/examples/emotion/src/main.tsx
@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+ <StrictMode>
+ <App />
+ </StrictMode>,
+)
diff --git a/examples/emotion/vite.config.ts b/examples/emotion/vite.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import emotion from '@rolldown/plugin-emotion'
+
+export default defineConfig({
+ plugins: [
+ emotion({
+ sourceMap: true,
+ autoLabel: 'always',
+ }),
+ react({
+ jsxImportSource: '@emotion/react',
+ }),
+ ],
+})
diff --git a/examples/package.json b/examples/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "@rolldown/examples",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "test": "vitest --project=e2e:dev --project=e2e:build",
+ "test:dev": "vitest --project=e2e:dev",
+ "test:build": "vitest --project=e2e:build"
+ },
+ "devDependencies": {
+ "playwright-chromium": "^1.58.2",
+ "vite": "^8.0.0"
+ }
+}
diff --git a/examples/test-utils.ts b/examples/test-utils.ts
@@ -0,0 +1,25 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import type { Locator } from 'playwright-chromium'
+import { inject } from 'vitest'
+import { tempDir } from './vitestSetup'
+
+export { page } from './vitestSetup'
+
+export const isBuild = !!inject('isBuild')
+export const isServe = !isBuild
+
+export function editFile(file: string, callback: (content: string) => string): void {
+ const filePath = path.resolve(tempDir, file)
+ const content = fs.readFileSync(filePath, 'utf-8')
+ const modified = callback(content)
+ fs.writeFileSync(filePath, modified)
+}
+
+export async function getColor(locator: Locator): Promise<string> {
+ return locator.evaluate((el) => getComputedStyle(el).color)
+}
+
+export async function getBg(locator: Locator): Promise<string> {
+ return locator.evaluate((el) => getComputedStyle(el).backgroundColor)
+}
diff --git a/examples/tsconfig.json b/examples/tsconfig.json
@@ -0,0 +1,19 @@
+{
+ "compilerOptions": {
+ "target": "esnext",
+ "module": "preserve",
+ "lib": ["es2023", "DOM"],
+ "strict": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "declaration": true,
+ "jsx": "react-jsx",
+ "paths": {
+ "~utils": ["./test-utils.ts"]
+ }
+ }
+}
diff --git a/examples/vitest.config.ts b/examples/vitest.config.ts
@@ -0,0 +1,45 @@
+import { defineConfig } from 'vitest/config'
+import { resolve } from 'node:path'
+
+const timeout = process.env.CI ? 6000 : 3000
+
+export default defineConfig({
+ resolve: {
+ alias: {
+ '~utils': resolve(import.meta.dirname, './test-utils.ts'),
+ },
+ },
+ test: {
+ setupFiles: ['./vitestSetup.ts'],
+ globalSetup: ['./vitestGlobalSetup.ts'],
+ testTimeout: timeout,
+ hookTimeout: timeout,
+ reporters: 'dot',
+ fileParallelism: false,
+ projects: [
+ {
+ extends: true,
+ test: {
+ name: 'e2e:dev',
+ env: {
+ // set here to override Vitest's default `"test"`
+ NODE_ENV: 'development',
+ },
+ },
+ },
+ {
+ extends: true,
+ test: {
+ name: 'e2e:build',
+ provide: {
+ isBuild: '1',
+ },
+ env: {
+ // set here to override Vitest's default `"test"`
+ NODE_ENV: 'production',
+ },
+ },
+ },
+ ],
+ },
+})
diff --git a/examples/vitestGlobalSetup.ts b/examples/vitestGlobalSetup.ts
@@ -0,0 +1,31 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import type { TestProject } from 'vitest/node'
+import type { BrowserServer } from 'playwright-chromium'
+import { chromium } from 'playwright-chromium'
+
+let tempBaseDir: string | undefined
+let browserServer: BrowserServer | undefined
+
+export async function setup({ provide, config }: TestProject): Promise<void> {
+ browserServer = await chromium.launchServer({
+ headless: !process.env.VITE_DEBUG_SERVE,
+ args: process.env.CI ? ['--no-sandbox', '--disable-setuid-sandbox'] : undefined,
+ })
+ provide('wsEndpoint', browserServer.wsEndpoint())
+
+ const isBuild = !!config.provide.isBuild
+ tempBaseDir = path.join(import.meta.dirname, `../examples-temp-${isBuild ? 'build' : 'dev'}`)
+
+ if (!fs.existsSync(tempBaseDir)) {
+ fs.mkdirSync(tempBaseDir, { recursive: true })
+ }
+ provide('tempBaseDir', tempBaseDir)
+}
+
+export async function teardown(): Promise<void> {
+ await browserServer?.close()
+ if (fs.existsSync(tempBaseDir!)) {
+ fs.rmSync(tempBaseDir!, { recursive: true, force: true })
+ }
+}
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,2 @@
+# keep LF as-is even on Windows for consistent hash values across platforms
+* text=auto eol=lf
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -48,6 +48,9 @@ jobs:
  - name: Install deps
  run: pnpm install
 
+ - name: Install playwright
+ run: pnpm --filter examples exec playwright install chromium --with-deps
+
  - name: Build
  run: pnpm run build
 
@@ -77,6 +80,9 @@ jobs:
  - name: Install deps
  run: pnpm install --no-frozen-lockfile
 
+ - name: Install playwright
+ run: pnpm --filter examples exec playwright install chromium --with-deps
+
  - name: Install @babel/core v7 types
  run: pnpm add -Dw @types/babel__core@^7.20.5
 

diff --git a/.gitignore b/.gitignore
@@ -142,3 +142,8 @@ dist
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 .vite/
+
+.swc
+
+/examples-temp-*
+output.swc.*
diff --git a/.oxfmtrc.json b/.oxfmtrc.json
@@ -2,5 +2,10 @@
  "$schema": "./node_modules/oxfmt/configuration_schema.json",
  "semi": false,
  "singleQuote": true,
- "ignorePatterns": ["**/dist/**", "packages/*/CHANGELOG.md"]
+ "ignorePatterns": [
+ "**/dist/**",
+ "packages/*/CHANGELOG.md",
+ "**/fixtures/**",
+ "**/fixtures-labels/**"
+ ]
 }
diff --git a/.oxlintrc.json b/.oxlintrc.json
@@ -4,5 +4,8 @@
  "correctness": "error",
  "suspicious": "error"
  },
- "ignorePatterns": ["**/dist/**"]
+ "rules": {
+ "no-shadow": "off"
+ },
+ "ignorePatterns": ["**/dist/**", "**/fixtures/**", "**/fixtures-labels/**", "**/benchmark/**"]
 }
diff --git a/README.md b/README.md
@@ -20,10 +20,13 @@ Official Rolldown plugins
 ## Packages
 
 - [`@rolldown/plugin-babel`](https://github.com/rolldown/plugins/tree/main/packages/babel) ([![NPM version][badge-npm-version-babel]][url-npm-babel]): transform code with Babel
+- [`@rolldown/plugin-emotion`](https://github.com/rolldown/plugins/tree/main/packages/emotion) ([![NPM version][badge-npm-version-emotion]][url-npm-emotion]): minification and optimization of Emotion styles
 
 ## License
 
 [MIT](https://github.com/rolldown/plugins/blob/main/LICENSE)
 
 [badge-npm-version-babel]: https://img.shields.io/npm/v/@rolldown/plugin-babel/latest?color=brightgreen
+[badge-npm-version-emotion]: https://img.shields.io/npm/v/@rolldown/plugin-emotion/latest?color=brightgreen
 [url-npm-babel]: https://npmx.dev/package/@rolldown/plugin-babel/v/latest
+[url-npm-emotion]: https://npmx.dev/package/@rolldown/plugin-emotion/v/latest
diff --git a/examples/emotion/emotion.test.ts b/examples/emotion/emotion.test.ts
@@ -0,0 +1,28 @@
+import { expect, test } from 'vitest'
+import { editFile, getBg, getColor, isServe, page } from '~utils'
+
+test('should render app', async () => {
+ expect(await page.textContent('.emotion-title')).toBe('Emotion Works!')
+})
+
+test('styled component should apply styles', async () => {
+ const title = page.locator('.emotion-title')
+ const color = await getColor(title)
+ expect(color).toBe('rgb(255, 105, 180)') // hotpink
+})
+
+test('css prop should work', async () => {
+ const button = page.locator('.emotion-button')
+ const bgColor = await getBg(button)
+ expect(bgColor).toBe('rgb(100, 108, 255)') // #646cff
+})
+
+test.runIf(isServe)('hmr works', async () => {
+ editFile('src/App.tsx', (code) => code.replace('hotpink', 'blue'))
+ await expect
+ .poll(async () => {
+ const title = page.locator('.emotion-title')
+ return getColor(title)
+ })
+ .toBe('rgb(0, 0, 255)') // blue
+})
diff --git a/examples/emotion/index.html b/examples/emotion/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Emotion Example</title>
+ </head>
+ <body>
+ <div id="root"></div>
+ <script type="module" src="/src/main.tsx"></script>
+ </body>
+</html>
diff --git a/examples/emotion/package.json b/examples/emotion/package.json
@@ -0,0 +1,23 @@
+{
+ "name": "@rolldown/example-emotion",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "@emotion/react": "^11.14.0",
+ "@emotion/styled": "^11.14.1",
+ "react": "^19.2.4",
+ "react-dom": "^19.2.4"
+ },
+ "devDependencies": {
+ "@rolldown/plugin-emotion": "workspace:*",
+ "@types/react": "^19.2.14",
+ "@types/react-dom": "^19.2.3",
+ "@vitejs/plugin-react": "^6.0.1",
+ "vite": "8.0.0"
+ }
+}
diff --git a/examples/emotion/src/App.tsx b/examples/emotion/src/App.tsx
@@ -0,0 +1,42 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react'
+import styled from '@emotion/styled'
+
+const Title = styled.h1`
+ color: hotpink;
+ font-size: 2rem;
+`
+
+const buttonStyle = css`
+ padding: 0.5rem 1rem;
+ background-color: #646cff;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+
+ &:hover {
+ background-color: #535bf2;
+ }
+`
+
+const Card = styled.div`
+ padding: 2rem;
+ border: 1px solid #ccc;
+ border-radius: 8px;
+ margin: 1rem;
+`
+
+export default function App() {
+ return (
+ <div className="emotion-app">
+ <Title className="emotion-title">Emotion Works!</Title>
+ <Card className="emotion-card">
+ <p className="emotion-text">This is a styled card component.</p>
+ <button css={buttonStyle} className="emotion-button">
+ Styled Button
+ </button>
+ </Card>
+ </div>
+ )
+}
diff --git a/examples/emotion/src/main.tsx b/examples/emotion/src/main.tsx
@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+ <StrictMode>
+ <App />
+ </StrictMode>,
+)
diff --git a/examples/emotion/vite.config.ts b/examples/emotion/vite.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import emotion from '@rolldown/plugin-emotion'
+
+export default defineConfig({
+ plugins: [
+ emotion({
+ sourceMap: true,
+ autoLabel: 'always',
+ }),
+ react({
+ jsxImportSource: '@emotion/react',
+ }),
+ ],
+})
diff --git a/examples/package.json b/examples/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "@rolldown/examples",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "test": "vitest --project=e2e:dev --project=e2e:build",
+ "test:dev": "vitest --project=e2e:dev",
+ "test:build": "vitest --project=e2e:build"
+ },
+ "devDependencies": {
+ "playwright-chromium": "^1.58.2",
+ "vite": "^8.0.0"
+ }
+}
diff --git a/examples/test-utils.ts b/examples/test-utils.ts
@@ -0,0 +1,25 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import type { Locator } from 'playwright-chromium'
+import { inject } from 'vitest'
+import { tempDir } from './vitestSetup'
+
+export { page } from './vitestSetup'
+
+export const isBuild = !!inject('isBuild')
+export const isServe = !isBuild
+
+export function editFile(file: string, callback: (content: string) => string): void {
+ const filePath = path.resolve(tempDir, file)
+ const content = fs.readFileSync(filePath, 'utf-8')
+ const modified = callback(content)
+ fs.writeFileSync(filePath, modified)
+}
+
+export async function getColor(locator: Locator): Promise<string> {
+ return locator.evaluate((el) => getComputedStyle(el).color)
+}
+
+export async function getBg(locator: Locator): Promise<string> {
+ return locator.evaluate((el) => getComputedStyle(el).backgroundColor)
+}
diff --git a/examples/tsconfig.json b/examples/tsconfig.json
@@ -0,0 +1,19 @@
+{
+ "compilerOptions": {
+ "target": "esnext",
+ "module": "preserve",
+ "lib": ["es2023", "DOM"],
+ "strict": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "declaration": true,
+ "jsx": "react-jsx",
+ "paths": {
+ "~utils": ["./test-utils.ts"]
+ }
+ }
+}
diff --git a/examples/vitest.config.ts b/examples/vitest.config.ts
@@ -0,0 +1,45 @@
+import { defineConfig } from 'vitest/config'
+import { resolve } from 'node:path'
+
+const timeout = process.env.CI ? 6000 : 3000
+
+export default defineConfig({
+ resolve: {
+ alias: {
+ '~utils': resolve(import.meta.dirname, './test-utils.ts'),
+ },
+ },
+ test: {
+ setupFiles: ['./vitestSetup.ts'],
+ globalSetup: ['./vitestGlobalSetup.ts'],
+ testTimeout: timeout,
+ hookTimeout: timeout,
+ reporters: 'dot',
+ fileParallelism: false,
+ projects: [
+ {
+ extends: true,
+ test: {
+ name: 'e2e:dev',
+ env: {
+ // set here to override Vitest's default `"test"`
+ NODE_ENV: 'development',
+ },
+ },
+ },
+ {
+ extends: true,
+ test: {
+ name: 'e2e:build',
+ provide: {
+ isBuild: '1',
+ },
+ env: {
+ // set here to override Vitest's default `"test"`
+ NODE_ENV: 'production',
+ },
+ },
+ },
+ ],
+ },
+})
diff --git a/examples/vitestGlobalSetup.ts b/examples/vitestGlobalSetup.ts
@@ -0,0 +1,31 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import type { TestProject } from 'vitest/node'
+import type { BrowserServer } from 'playwright-chromium'
+import { chromium } from 'playwright-chromium'
+
+let tempBaseDir: string | undefined
+let browserServer: BrowserServer | undefined
+
+export async function setup({ provide, config }: TestProject): Promise<void> {
+ browserServer = await chromium.launchServer({
+ headless: !process.env.VITE_DEBUG_SERVE,
+ args: process.env.CI ? ['--no-sandbox', '--disable-setuid-sandbox'] : undefined,
+ })
+ provide('wsEndpoint', browserServer.wsEndpoint())
+
+ const isBuild = !!config.provide.isBuild
+ tempBaseDir = path.join(import.meta.dirname, `../examples-temp-${isBuild ? 'build' : 'dev'}`)
+
+ if (!fs.existsSync(tempBaseDir)) {
+ fs.mkdirSync(tempBaseDir, { recursive: true })
+ }
+ provide('tempBaseDir', tempBaseDir)
+}
+
+export async function teardown(): Promise<void> {
+ await browserServer?.close()
+ if (fs.existsSync(tempBaseDir!)) {
+ fs.rmSync(tempBaseDir!, { recursive: true, force: true })
+ }
+}
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,2 @@
+# keep LF as-is even on Windows for consistent hash values across platforms
+* text=auto eol=lf
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -48,6 +48,9 @@ jobs:
  - name: Install deps
  run: pnpm install
 
+ - name: Install playwright
+ run: pnpm --filter examples exec playwright install chromium --with-deps
+
  - name: Build
  run: pnpm run build
 
@@ -77,6 +80,9 @@ jobs:
  - name: Install deps
  run: pnpm install --no-frozen-lockfile
 
+ - name: Install playwright
+ run: pnpm --filter examples exec playwright install chromium --with-deps
+
  - name: Install @babel/core v7 types
  run: pnpm add -Dw @types/babel__core@^7.20.5
 

diff --git a/.gitignore b/.gitignore
@@ -142,3 +142,8 @@ dist
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 .vite/
+
+.swc
+
+/examples-temp-*
+output.swc.*
diff --git a/.oxfmtrc.json b/.oxfmtrc.json
@@ -2,5 +2,10 @@
  "$schema": "./node_modules/oxfmt/configuration_schema.json",
  "semi": false,
  "singleQuote": true,
- "ignorePatterns": ["**/dist/**", "packages/*/CHANGELOG.md"]
+ "ignorePatterns": [
+ "**/dist/**",
+ "packages/*/CHANGELOG.md",
+ "**/fixtures/**",
+ "**/fixtures-labels/**"
+ ]
 }
diff --git a/.oxlintrc.json b/.oxlintrc.json
@@ -4,5 +4,8 @@
  "correctness": "error",
  "suspicious": "error"
  },
- "ignorePatterns": ["**/dist/**"]
+ "rules": {
+ "no-shadow": "off"
+ },
+ "ignorePatterns": ["**/dist/**", "**/fixtures/**", "**/fixtures-labels/**", "**/benchmark/**"]
 }
diff --git a/README.md b/README.md
@@ -20,10 +20,13 @@ Official Rolldown plugins
 ## Packages
 
 - [`@rolldown/plugin-babel`](https://github.com/rolldown/plugins/tree/main/packages/babel) ([![NPM version][badge-npm-version-babel]][url-npm-babel]): transform code with Babel
+- [`@rolldown/plugin-emotion`](https://github.com/rolldown/plugins/tree/main/packages/emotion) ([![NPM version][badge-npm-version-emotion]][url-npm-emotion]): minification and optimization of Emotion styles
 
 ## License
 
 [MIT](https://github.com/rolldown/plugins/blob/main/LICENSE)
 
 [badge-npm-version-babel]: https://img.shields.io/npm/v/@rolldown/plugin-babel/latest?color=brightgreen
+[badge-npm-version-emotion]: https://img.shields.io/npm/v/@rolldown/plugin-emotion/latest?color=brightgreen
 [url-npm-babel]: https://npmx.dev/package/@rolldown/plugin-babel/v/latest
+[url-npm-emotion]: https://npmx.dev/package/@rolldown/plugin-emotion/v/latest
diff --git a/examples/emotion/emotion.test.ts b/examples/emotion/emotion.test.ts
@@ -0,0 +1,28 @@
+import { expect, test } from 'vitest'
+import { editFile, getBg, getColor, isServe, page } from '~utils'
+
+test('should render app', async () => {
+ expect(await page.textContent('.emotion-title')).toBe('Emotion Works!')
+})
+
+test('styled component should apply styles', async () => {
+ const title = page.locator('.emotion-title')
+ const color = await getColor(title)
+ expect(color).toBe('rgb(255, 105, 180)') // hotpink
+})
+
+test('css prop should work', async () => {
+ const button = page.locator('.emotion-button')
+ const bgColor = await getBg(button)
+ expect(bgColor).toBe('rgb(100, 108, 255)') // #646cff
+})
+
+test.runIf(isServe)('hmr works', async () => {
+ editFile('src/App.tsx', (code) => code.replace('hotpink', 'blue'))
+ await expect
+ .poll(async () => {
+ const title = page.locator('.emotion-title')
+ return getColor(title)
+ })
+ .toBe('rgb(0, 0, 255)') // blue
+})
diff --git a/examples/emotion/index.html b/examples/emotion/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Emotion Example</title>
+ </head>
+ <body>
+ <div id="root"></div>
+ <script type="module" src="/src/main.tsx"></script>
+ </body>
+</html>
diff --git a/examples/emotion/package.json b/examples/emotion/package.json
@@ -0,0 +1,23 @@
+{
+ "name": "@rolldown/example-emotion",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "@emotion/react": "^11.14.0",
+ "@emotion/styled": "^11.14.1",
+ "react": "^19.2.4",
+ "react-dom": "^19.2.4"
+ },
+ "devDependencies": {
+ "@rolldown/plugin-emotion": "workspace:*",
+ "@types/react": "^19.2.14",
+ "@types/react-dom": "^19.2.3",
+ "@vitejs/plugin-react": "^6.0.1",
+ "vite": "8.0.0"
+ }
+}
diff --git a/examples/emotion/src/App.tsx b/examples/emotion/src/App.tsx
@@ -0,0 +1,42 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react'
+import styled from '@emotion/styled'
+
+const Title = styled.h1`
+ color: hotpink;
+ font-size: 2rem;
+`
+
+const buttonStyle = css`
+ padding: 0.5rem 1rem;
+ background-color: #646cff;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+
+ &:hover {
+ background-color: #535bf2;
+ }
+`
+
+const Card = styled.div`
+ padding: 2rem;
+ border: 1px solid #ccc;
+ border-radius: 8px;
+ margin: 1rem;
+`
+
+export default function App() {
+ return (
+ <div className="emotion-app">
+ <Title className="emotion-title">Emotion Works!</Title>
+ <Card className="emotion-card">
+ <p className="emotion-text">This is a styled card component.</p>
+ <button css={buttonStyle} className="emotion-button">
+ Styled Button
+ </button>
+ </Card>
+ </div>
+ )
+}
diff --git a/examples/emotion/src/main.tsx b/examples/emotion/src/main.tsx
@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+ <StrictMode>
+ <App />
+ </StrictMode>,
+)
diff --git a/examples/emotion/vite.config.ts b/examples/emotion/vite.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import emotion from '@rolldown/plugin-emotion'
+
+export default defineConfig({
+ plugins: [
+ emotion({
+ sourceMap: true,
+ autoLabel: 'always',
+ }),
+ react({
+ jsxImportSource: '@emotion/react',
+ }),
+ ],
+})
diff --git a/examples/package.json b/examples/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "@rolldown/examples",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "test": "vitest --project=e2e:dev --project=e2e:build",
+ "test:dev": "vitest --project=e2e:dev",
+ "test:build": "vitest --project=e2e:build"
+ },
+ "devDependencies": {
+ "playwright-chromium": "^1.58.2",
+ "vite": "^8.0.0"
+ }
+}
diff --git a/examples/test-utils.ts b/examples/test-utils.ts
@@ -0,0 +1,25 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import type { Locator } from 'playwright-chromium'
+import { inject } from 'vitest'
+import { tempDir } from './vitestSetup'
+
+export { page } from './vitestSetup'
+
+export const isBuild = !!inject('isBuild')
+export const isServe = !isBuild
+
+export function editFile(file: string, callback: (content: string) => string): void {
+ const filePath = path.resolve(tempDir, file)
+ const content = fs.readFileSync(filePath, 'utf-8')
+ const modified = callback(content)
+ fs.writeFileSync(filePath, modified)
+}
+
+export async function getColor(locator: Locator): Promise<string> {
+ return locator.evaluate((el) => getComputedStyle(el).color)
+}
+
+export async function getBg(locator: Locator): Promise<string> {
+ return locator.evaluate((el) => getComputedStyle(el).backgroundColor)
+}
diff --git a/examples/tsconfig.json b/examples/tsconfig.json
@@ -0,0 +1,19 @@
+{
+ "compilerOptions": {
+ "target": "esnext",
+ "module": "preserve",
+ "lib": ["es2023", "DOM"],
+ "strict": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "declaration": true,
+ "jsx": "react-jsx",
+ "paths": {
+ "~utils": ["./test-utils.ts"]
+ }
+ }
+}
diff --git a/examples/vitest.config.ts b/examples/vitest.config.ts
@@ -0,0 +1,45 @@
+import { defineConfig } from 'vitest/config'
+import { resolve } from 'node:path'
+
+const timeout = process.env.CI ? 6000 : 3000
+
+export default defineConfig({
+ resolve: {
+ alias: {
+ '~utils': resolve(import.meta.dirname, './test-utils.ts'),
+ },
+ },
+ test: {
+ setupFiles: ['./vitestSetup.ts'],
+ globalSetup: ['./vitestGlobalSetup.ts'],
+ testTimeout: timeout,
+ hookTimeout: timeout,
+ reporters: 'dot',
+ fileParallelism: false,
+ projects: [
+ {
+ extends: true,
+ test: {
+ name: 'e2e:dev',
+ env: {
+ // set here to override Vitest's default `"test"`
+ NODE_ENV: 'development',
+ },
+ },
+ },
+ {
+ extends: true,
+ test: {
+ name: 'e2e:build',
+ provide: {
+ isBuild: '1',
+ },
+ env: {
+ // set here to override Vitest's default `"test"`
+ NODE_ENV: 'production',
+ },
+ },
+ },
+ ],
+ },
+})
diff --git a/examples/vitestGlobalSetup.ts b/examples/vitestGlobalSetup.ts
@@ -0,0 +1,31 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import type { TestProject } from 'vitest/node'
+import type { BrowserServer } from 'playwright-chromium'
+import { chromium } from 'playwright-chromium'
+
+let tempBaseDir: string | undefined
+let browserServer: BrowserServer | undefined
+
+export async function setup({ provide, config }: TestProject): Promise<void> {
+ browserServer = await chromium.launchServer({
+ headless: !process.env.VITE_DEBUG_SERVE,
+ args: process.env.CI ? ['--no-sandbox', '--disable-setuid-sandbox'] : undefined,
+ })
+ provide('wsEndpoint', browserServer.wsEndpoint())
+
+ const isBuild = !!config.provide.isBuild
+ tempBaseDir = path.join(import.meta.dirname, `../examples-temp-${isBuild ? 'build' : 'dev'}`)
+
+ if (!fs.existsSync(tempBaseDir)) {
+ fs.mkdirSync(tempBaseDir, { recursive: true })
+ }
+ provide('tempBaseDir', tempBaseDir)
+}
+
+export async function teardown(): Promise<void> {
+ await browserServer?.close()
+ if (fs.existsSync(tempBaseDir!)) {
+ fs.rmSync(tempBaseDir!, { recursive: true, force: true })
+ }
+}
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,2 @@
+# keep LF as-is even on Windows for consistent hash values across platforms
+* text=auto eol=lf
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -48,6 +48,9 @@ jobs:
  - name: Install deps
  run: pnpm install
 
+ - name: Install playwright
+ run: pnpm --filter examples exec playwright install chromium --with-deps
+
  - name: Build
  run: pnpm run build
 
@@ -77,6 +80,9 @@ jobs:
  - name: Install deps
  run: pnpm install --no-frozen-lockfile
 
+ - name: Install playwright
+ run: pnpm --filter examples exec playwright install chromium --with-deps
+
  - name: Install @babel/core v7 types
  run: pnpm add -Dw @types/babel__core@^7.20.5
 

diff --git a/.gitignore b/.gitignore
@@ -142,3 +142,8 @@ dist
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 .vite/
+
+.swc
+
+/examples-temp-*
+output.swc.*
diff --git a/.oxfmtrc.json b/.oxfmtrc.json
@@ -2,5 +2,10 @@
  "$schema": "./node_modules/oxfmt/configuration_schema.json",
  "semi": false,
  "singleQuote": true,
- "ignorePatterns": ["**/dist/**", "packages/*/CHANGELOG.md"]
+ "ignorePatterns": [
+ "**/dist/**",
+ "packages/*/CHANGELOG.md",
+ "**/fixtures/**",
+ "**/fixtures-labels/**"
+ ]
 }
diff --git a/.oxlintrc.json b/.oxlintrc.json
@@ -4,5 +4,8 @@
  "correctness": "error",
  "suspicious": "error"
  },
- "ignorePatterns": ["**/dist/**"]
+ "rules": {
+ "no-shadow": "off"
+ },
+ "ignorePatterns": ["**/dist/**", "**/fixtures/**", "**/fixtures-labels/**", "**/benchmark/**"]
 }
diff --git a/README.md b/README.md
@@ -20,10 +20,13 @@ Official Rolldown plugins
 ## Packages
 
 - [`@rolldown/plugin-babel`](https://github.com/rolldown/plugins/tree/main/packages/babel) ([![NPM version][badge-npm-version-babel]][url-npm-babel]): transform code with Babel
+- [`@rolldown/plugin-emotion`](https://github.com/rolldown/plugins/tree/main/packages/emotion) ([![NPM version][badge-npm-version-emotion]][url-npm-emotion]): minification and optimization of Emotion styles
 
 ## License
 
 [MIT](https://github.com/rolldown/plugins/blob/main/LICENSE)
 
 [badge-npm-version-babel]: https://img.shields.io/npm/v/@rolldown/plugin-babel/latest?color=brightgreen
+[badge-npm-version-emotion]: https://img.shields.io/npm/v/@rolldown/plugin-emotion/latest?color=brightgreen
 [url-npm-babel]: https://npmx.dev/package/@rolldown/plugin-babel/v/latest
+[url-npm-emotion]: https://npmx.dev/package/@rolldown/plugin-emotion/v/latest
diff --git a/examples/emotion/emotion.test.ts b/examples/emotion/emotion.test.ts
@@ -0,0 +1,28 @@
+import { expect, test } from 'vitest'
+import { editFile, getBg, getColor, isServe, page } from '~utils'
+
+test('should render app', async () => {
+ expect(await page.textContent('.emotion-title')).toBe('Emotion Works!')
+})
+
+test('styled component should apply styles', async () => {
+ const title = page.locator('.emotion-title')
+ const color = await getColor(title)
+ expect(color).toBe('rgb(255, 105, 180)') // hotpink
+})
+
+test('css prop should work', async () => {
+ const button = page.locator('.emotion-button')
+ const bgColor = await getBg(button)
+ expect(bgColor).toBe('rgb(100, 108, 255)') // #646cff
+})
+
+test.runIf(isServe)('hmr works', async () => {
+ editFile('src/App.tsx', (code) => code.replace('hotpink', 'blue'))
+ await expect
+ .poll(async () => {
+ const title = page.locator('.emotion-title')
+ return getColor(title)
+ })
+ .toBe('rgb(0, 0, 255)') // blue
+})
diff --git a/examples/emotion/index.html b/examples/emotion/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Emotion Example</title>
+ </head>
+ <body>
+ <div id="root"></div>
+ <script type="module" src="/src/main.tsx"></script>
+ </body>
+</html>
diff --git a/examples/emotion/package.json b/examples/emotion/package.json
@@ -0,0 +1,23 @@
+{
+ "name": "@rolldown/example-emotion",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "@emotion/react": "^11.14.0",
+ "@emotion/styled": "^11.14.1",
+ "react": "^19.2.4",
+ "react-dom": "^19.2.4"
+ },
+ "devDependencies": {
+ "@rolldown/plugin-emotion": "workspace:*",
+ "@types/react": "^19.2.14",
+ "@types/react-dom": "^19.2.3",
+ "@vitejs/plugin-react": "^6.0.1",
+ "vite": "8.0.0"
+ }
+}
diff --git a/examples/emotion/src/App.tsx b/examples/emotion/src/App.tsx
@@ -0,0 +1,42 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react'
+import styled from '@emotion/styled'
+
+const Title = styled.h1`
+ color: hotpink;
+ font-size: 2rem;
+`
+
+const buttonStyle = css`
+ padding: 0.5rem 1rem;
+ background-color: #646cff;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+
+ &:hover {
+ background-color: #535bf2;
+ }
+`
+
+const Card = styled.div`
+ padding: 2rem;
+ border: 1px solid #ccc;
+ border-radius: 8px;
+ margin: 1rem;
+`
+
+export default function App() {
+ return (
+ <div className="emotion-app">
+ <Title className="emotion-title">Emotion Works!</Title>
+ <Card className="emotion-card">
+ <p className="emotion-text">This is a styled card component.</p>
+ <button css={buttonStyle} className="emotion-button">
+ Styled Button
+ </button>
+ </Card>
+ </div>
+ )
+}
diff --git a/examples/emotion/src/main.tsx b/examples/emotion/src/main.tsx
@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+ <StrictMode>
+ <App />
+ </StrictMode>,
+)
diff --git a/examples/emotion/vite.config.ts b/examples/emotion/vite.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import emotion from '@rolldown/plugin-emotion'
+
+export default defineConfig({
+ plugins: [
+ emotion({
+ sourceMap: true,
+ autoLabel: 'always',
+ }),
+ react({
+ jsxImportSource: '@emotion/react',
+ }),
+ ],
+})
diff --git a/examples/package.json b/examples/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "@rolldown/examples",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "test": "vitest --project=e2e:dev --project=e2e:build",
+ "test:dev": "vitest --project=e2e:dev",
+ "test:build": "vitest --project=e2e:build"
+ },
+ "devDependencies": {
+ "playwright-chromium": "^1.58.2",
+ "vite": "^8.0.0"
+ }
+}
diff --git a/examples/test-utils.ts b/examples/test-utils.ts
@@ -0,0 +1,25 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import type { Locator } from 'playwright-chromium'
+import { inject } from 'vitest'
+import { tempDir } from './vitestSetup'
+
+export { page } from './vitestSetup'
+
+export const isBuild = !!inject('isBuild')
+export const isServe = !isBuild
+
+export function editFile(file: string, callback: (content: string) => string): void {
+ const filePath = path.resolve(tempDir, file)
+ const content = fs.readFileSync(filePath, 'utf-8')
+ const modified = callback(content)
+ fs.writeFileSync(filePath, modified)
+}
+
+export async function getColor(locator: Locator): Promise<string> {
+ return locator.evaluate((el) => getComputedStyle(el).color)
+}
+
+export async function getBg(locator: Locator): Promise<string> {
+ return locator.evaluate((el) => getComputedStyle(el).backgroundColor)
+}
diff --git a/examples/tsconfig.json b/examples/tsconfig.json
@@ -0,0 +1,19 @@
+{
+ "compilerOptions": {
+ "target": "esnext",
+ "module": "preserve",
+ "lib": ["es2023", "DOM"],
+ "strict": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "declaration": true,
+ "jsx": "react-jsx",
+ "paths": {
+ "~utils": ["./test-utils.ts"]
+ }
+ }
+}
diff --git a/examples/vitest.config.ts b/examples/vitest.config.ts
@@ -0,0 +1,45 @@
+import { defineConfig } from 'vitest/config'
+import { resolve } from 'node:path'
+
+const timeout = process.env.CI ? 6000 : 3000
+
+export default defineConfig({
+ resolve: {
+ alias: {
+ '~utils': resolve(import.meta.dirname, './test-utils.ts'),
+ },
+ },
+ test: {
+ setupFiles: ['./vitestSetup.ts'],
+ globalSetup: ['./vitestGlobalSetup.ts'],
+ testTimeout: timeout,
+ hookTimeout: timeout,
+ reporters: 'dot',
+ fileParallelism: false,
+ projects: [
+ {
+ extends: true,
+ test: {
+ name: 'e2e:dev',
+ env: {
+ // set here to override Vitest's default `"test"`
+ NODE_ENV: 'development',
+ },
+ },
+ },
+ {
+ extends: true,
+ test: {
+ name: 'e2e:build',
+ provide: {
+ isBuild: '1',
+ },
+ env: {
+ // set here to override Vitest's default `"test"`
+ NODE_ENV: 'production',
+ },
+ },
+ },
+ ],
+ },
+})
diff --git a/examples/vitestGlobalSetup.ts b/examples/vitestGlobalSetup.ts
@@ -0,0 +1,31 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import type { TestProject } from 'vitest/node'
+import type { BrowserServer } from 'playwright-chromium'
+import { chromium } from 'playwright-chromium'
+
+let tempBaseDir: string | undefined
+let browserServer: BrowserServer | undefined
+
+export async function setup({ provide, config }: TestProject): Promise<void> {
+ browserServer = await chromium.launchServer({
+ headless: !process.env.VITE_DEBUG_SERVE,
+ args: process.env.CI ? ['--no-sandbox', '--disable-setuid-sandbox'] : undefined,
+ })
+ provide('wsEndpoint', browserServer.wsEndpoint())
+
+ const isBuild = !!config.provide.isBuild
+ tempBaseDir = path.join(import.meta.dirname, `../examples-temp-${isBuild ? 'build' : 'dev'}`)
+
+ if (!fs.existsSync(tempBaseDir)) {
+ fs.mkdirSync(tempBaseDir, { recursive: true })
+ }
+ provide('tempBaseDir', tempBaseDir)
+}
+
+export async function teardown(): Promise<void> {
+ await browserServer?.close()
+ if (fs.existsSync(tempBaseDir!)) {
+ fs.rmSync(tempBaseDir!, { recursive: true, force: true })
+ }
+}
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,2 @@
+# keep LF as-is even on Windows for consistent hash values across platforms
+* text=auto eol=lf
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -48,6 +48,9 @@ jobs:
  - name: Install deps
  run: pnpm install
 
+ - name: Install playwright
+ run: pnpm --filter examples exec playwright install chromium --with-deps
+
  - name: Build
  run: pnpm run build
 
@@ -77,6 +80,9 @@ jobs:
  - name: Install deps
  run: pnpm install --no-frozen-lockfile
 
+ - name: Install playwright
+ run: pnpm --filter examples exec playwright install chromium --with-deps
+
  - name: Install @babel/core v7 types
  run: pnpm add -Dw @types/babel__core@^7.20.5
 

diff --git a/.gitignore b/.gitignore
@@ -142,3 +142,8 @@ dist
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 .vite/
+
+.swc
+
+/examples-temp-*
+output.swc.*
diff --git a/.oxfmtrc.json b/.oxfmtrc.json
@@ -2,5 +2,10 @@
  "$schema": "./node_modules/oxfmt/configuration_schema.json",
  "semi": false,
  "singleQuote": true,
- "ignorePatterns": ["**/dist/**", "packages/*/CHANGELOG.md"]
+ "ignorePatterns": [
+ "**/dist/**",
+ "packages/*/CHANGELOG.md",
+ "**/fixtures/**",
+ "**/fixtures-labels/**"
+ ]
 }
diff --git a/.oxlintrc.json b/.oxlintrc.json
@@ -4,5 +4,8 @@
  "correctness": "error",
  "suspicious": "error"
  },
- "ignorePatterns": ["**/dist/**"]
+ "rules": {
+ "no-shadow": "off"
+ },
+ "ignorePatterns": ["**/dist/**", "**/fixtures/**", "**/fixtures-labels/**", "**/benchmark/**"]
 }
diff --git a/README.md b/README.md
@@ -20,10 +20,13 @@ Official Rolldown plugins
 ## Packages
 
 - [`@rolldown/plugin-babel`](https://github.com/rolldown/plugins/tree/main/packages/babel) ([![NPM version][badge-npm-version-babel]][url-npm-babel]): transform code with Babel
+- [`@rolldown/plugin-emotion`](https://github.com/rolldown/plugins/tree/main/packages/emotion) ([![NPM version][badge-npm-version-emotion]][url-npm-emotion]): minification and optimization of Emotion styles
 
 ## License
 
 [MIT](https://github.com/rolldown/plugins/blob/main/LICENSE)
 
 [badge-npm-version-babel]: https://img.shields.io/npm/v/@rolldown/plugin-babel/latest?color=brightgreen
+[badge-npm-version-emotion]: https://img.shields.io/npm/v/@rolldown/plugin-emotion/latest?color=brightgreen
 [url-npm-babel]: https://npmx.dev/package/@rolldown/plugin-babel/v/latest
+[url-npm-emotion]: https://npmx.dev/package/@rolldown/plugin-emotion/v/latest
diff --git a/examples/emotion/emotion.test.ts b/examples/emotion/emotion.test.ts
@@ -0,0 +1,28 @@
+import { expect, test } from 'vitest'
+import { editFile, getBg, getColor, isServe, page } from '~utils'
+
+test('should render app', async () => {
+ expect(await page.textContent('.emotion-title')).toBe('Emotion Works!')
+})
+
+test('styled component should apply styles', async () => {
+ const title = page.locator('.emotion-title')
+ const color = await getColor(title)
+ expect(color).toBe('rgb(255, 105, 180)') // hotpink
+})
+
+test('css prop should work', async () => {
+ const button = page.locator('.emotion-button')
+ const bgColor = await getBg(button)
+ expect(bgColor).toBe('rgb(100, 108, 255)') // #646cff
+})
+
+test.runIf(isServe)('hmr works', async () => {
+ editFile('src/App.tsx', (code) => code.replace('hotpink', 'blue'))
+ await expect
+ .poll(async () => {
+ const title = page.locator('.emotion-title')
+ return getColor(title)
+ })
+ .toBe('rgb(0, 0, 255)') // blue
+})
diff --git a/examples/emotion/index.html b/examples/emotion/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Emotion Example</title>
+ </head>
+ <body>
+ <div id="root"></div>
+ <script type="module" src="/src/main.tsx"></script>
+ </body>
+</html>
diff --git a/examples/emotion/package.json b/examples/emotion/package.json
@@ -0,0 +1,23 @@
+{
+ "name": "@rolldown/example-emotion",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "@emotion/react": "^11.14.0",
+ "@emotion/styled": "^11.14.1",
+ "react": "^19.2.4",
+ "react-dom": "^19.2.4"
+ },
+ "devDependencies": {
+ "@rolldown/plugin-emotion": "workspace:*",
+ "@types/react": "^19.2.14",
+ "@types/react-dom": "^19.2.3",
+ "@vitejs/plugin-react": "^6.0.1",
+ "vite": "8.0.0"
+ }
+}
diff --git a/examples/emotion/src/App.tsx b/examples/emotion/src/App.tsx
@@ -0,0 +1,42 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react'
+import styled from '@emotion/styled'
+
+const Title = styled.h1`
+ color: hotpink;
+ font-size: 2rem;
+`
+
+const buttonStyle = css`
+ padding: 0.5rem 1rem;
+ background-color: #646cff;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+
+ &:hover {
+ background-color: #535bf2;
+ }
+`
+
+const Card = styled.div`
+ padding: 2rem;
+ border: 1px solid #ccc;
+ border-radius: 8px;
+ margin: 1rem;
+`
+
+export default function App() {
+ return (
+ <div className="emotion-app">
+ <Title className="emotion-title">Emotion Works!</Title>
+ <Card className="emotion-card">
+ <p className="emotion-text">This is a styled card component.</p>
+ <button css={buttonStyle} className="emotion-button">
+ Styled Button
+ </button>
+ </Card>
+ </div>
+ )
+}
diff --git a/examples/emotion/src/main.tsx b/examples/emotion/src/main.tsx
@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+ <StrictMode>
+ <App />
+ </StrictMode>,
+)
diff --git a/examples/emotion/vite.config.ts b/examples/emotion/vite.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import emotion from '@rolldown/plugin-emotion'
+
+export default defineConfig({
+ plugins: [
+ emotion({
+ sourceMap: true,
+ autoLabel: 'always',
+ }),
+ react({
+ jsxImportSource: '@emotion/react',
+ }),
+ ],
+})
diff --git a/examples/package.json b/examples/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "@rolldown/examples",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "test": "vitest --project=e2e:dev --project=e2e:build",
+ "test:dev": "vitest --project=e2e:dev",
+ "test:build": "vitest --project=e2e:build"
+ },
+ "devDependencies": {
+ "playwright-chromium": "^1.58.2",
+ "vite": "^8.0.0"
+ }
+}
diff --git a/examples/test-utils.ts b/examples/test-utils.ts
@@ -0,0 +1,25 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import type { Locator } from 'playwright-chromium'
+import { inject } from 'vitest'
+import { tempDir } from './vitestSetup'
+
+export { page } from './vitestSetup'
+
+export const isBuild = !!inject('isBuild')
+export const isServe = !isBuild
+
+export function editFile(file: string, callback: (content: string) => string): void {
+ const filePath = path.resolve(tempDir, file)
+ const content = fs.readFileSync(filePath, 'utf-8')
+ const modified = callback(content)
+ fs.writeFileSync(filePath, modified)
+}
+
+export async function getColor(locator: Locator): Promise<string> {
+ return locator.evaluate((el) => getComputedStyle(el).color)
+}
+
+export async function getBg(locator: Locator): Promise<string> {
+ return locator.evaluate((el) => getComputedStyle(el).backgroundColor)
+}
diff --git a/examples/tsconfig.json b/examples/tsconfig.json
@@ -0,0 +1,19 @@
+{
+ "compilerOptions": {
+ "target": "esnext",
+ "module": "preserve",
+ "lib": ["es2023", "DOM"],
+ "strict": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "declaration": true,
+ "jsx": "react-jsx",
+ "paths": {
+ "~utils": ["./test-utils.ts"]
+ }
+ }
+}
diff --git a/examples/vitest.config.ts b/examples/vitest.config.ts
@@ -0,0 +1,45 @@
+import { defineConfig } from 'vitest/config'
+import { resolve } from 'node:path'
+
+const timeout = process.env.CI ? 6000 : 3000
+
+export default defineConfig({
+ resolve: {
+ alias: {
+ '~utils': resolve(import.meta.dirname, './test-utils.ts'),
+ },
+ },
+ test: {
+ setupFiles: ['./vitestSetup.ts'],
+ globalSetup: ['./vitestGlobalSetup.ts'],
+ testTimeout: timeout,
+ hookTimeout: timeout,
+ reporters: 'dot',
+ fileParallelism: false,
+ projects: [
+ {
+ extends: true,
+ test: {
+ name: 'e2e:dev',
+ env: {
+ // set here to override Vitest's default `"test"`
+ NODE_ENV: 'development',
+ },
+ },
+ },
+ {
+ extends: true,
+ test: {
+ name: 'e2e:build',
+ provide: {
+ isBuild: '1',
+ },
+ env: {
+ // set here to override Vitest's default `"test"`
+ NODE_ENV: 'production',
+ },
+ },
+ },
+ ],
+ },
+})
diff --git a/examples/vitestGlobalSetup.ts b/examples/vitestGlobalSetup.ts
@@ -0,0 +1,31 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import type { TestProject } from 'vitest/node'
+import type { BrowserServer } from 'playwright-chromium'
+import { chromium } from 'playwright-chromium'
+
+let tempBaseDir: string | undefined
+let browserServer: BrowserServer | undefined
+
+export async function setup({ provide, config }: TestProject): Promise<void> {
+ browserServer = await chromium.launchServer({
+ headless: !process.env.VITE_DEBUG_SERVE,
+ args: process.env.CI ? ['--no-sandbox', '--disable-setuid-sandbox'] : undefined,
+ })
+ provide('wsEndpoint', browserServer.wsEndpoint())
+
+ const isBuild = !!config.provide.isBuild
+ tempBaseDir = path.join(import.meta.dirname, `../examples-temp-${isBuild ? 'build' : 'dev'}`)
+
+ if (!fs.existsSync(tempBaseDir)) {
+ fs.mkdirSync(tempBaseDir, { recursive: true })
+ }
+ provide('tempBaseDir', tempBaseDir)
+}
+
+export async function teardown(): Promise<void> {
+ await browserServer?.close()
+ if (fs.existsSync(tempBaseDir!)) {
+ fs.rmSync(tempBaseDir!, { recursive: true, force: true })
+ }
+}
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,2 @@
+# keep LF as-is even on Windows for consistent hash values across platforms
+* text=auto eol=lf
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -48,6 +48,9 @@ jobs:
  - name: Install deps
  run: pnpm install
 
+ - name: Install playwright
+ run: pnpm --filter examples exec playwright install chromium --with-deps
+
  - name: Build
  run: pnpm run build
 
@@ -77,6 +80,9 @@ jobs:
  - name: Install deps
  run: pnpm install --no-frozen-lockfile
 
+ - name: Install playwright
+ run: pnpm --filter examples exec playwright install chromium --with-deps
+
  - name: Install @babel/core v7 types
  run: pnpm add -Dw @types/babel__core@^7.20.5
 

diff --git a/.gitignore b/.gitignore
@@ -142,3 +142,8 @@ dist
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 .vite/
+
+.swc
+
+/examples-temp-*
+output.swc.*
diff --git a/.oxfmtrc.json b/.oxfmtrc.json
@@ -2,5 +2,10 @@
  "$schema": "./node_modules/oxfmt/configuration_schema.json",
  "semi": false,
  "singleQuote": true,
- "ignorePatterns": ["**/dist/**", "packages/*/CHANGELOG.md"]
+ "ignorePatterns": [
+ "**/dist/**",
+ "packages/*/CHANGELOG.md",
+ "**/fixtures/**",
+ "**/fixtures-labels/**"
+ ]
 }
diff --git a/.oxlintrc.json b/.oxlintrc.json
@@ -4,5 +4,8 @@
  "correctness": "error",
  "suspicious": "error"
  },
- "ignorePatterns": ["**/dist/**"]
+ "rules": {
+ "no-shadow": "off"
+ },
+ "ignorePatterns": ["**/dist/**", "**/fixtures/**", "**/fixtures-labels/**", "**/benchmark/**"]
 }
diff --git a/README.md b/README.md
@@ -20,10 +20,13 @@ Official Rolldown plugins
 ## Packages
 
 - [`@rolldown/plugin-babel`](https://github.com/rolldown/plugins/tree/main/packages/babel) ([![NPM version][badge-npm-version-babel]][url-npm-babel]): transform code with Babel
+- [`@rolldown/plugin-emotion`](https://github.com/rolldown/plugins/tree/main/packages/emotion) ([![NPM version][badge-npm-version-emotion]][url-npm-emotion]): minification and optimization of Emotion styles
 
 ## License
 
 [MIT](https://github.com/rolldown/plugins/blob/main/LICENSE)
 
 [badge-npm-version-babel]: https://img.shields.io/npm/v/@rolldown/plugin-babel/latest?color=brightgreen
+[badge-npm-version-emotion]: https://img.shields.io/npm/v/@rolldown/plugin-emotion/latest?color=brightgreen
 [url-npm-babel]: https://npmx.dev/package/@rolldown/plugin-babel/v/latest
+[url-npm-emotion]: https://npmx.dev/package/@rolldown/plugin-emotion/v/latest
diff --git a/examples/emotion/emotion.test.ts b/examples/emotion/emotion.test.ts
@@ -0,0 +1,28 @@
+import { expect, test } from 'vitest'
+import { editFile, getBg, getColor, isServe, page } from '~utils'
+
+test('should render app', async () => {
+ expect(await page.textContent('.emotion-title')).toBe('Emotion Works!')
+})
+
+test('styled component should apply styles', async () => {
+ const title = page.locator('.emotion-title')
+ const color = await getColor(title)
+ expect(color).toBe('rgb(255, 105, 180)') // hotpink
+})
+
+test('css prop should work', async () => {
+ const button = page.locator('.emotion-button')
+ const bgColor = await getBg(button)
+ expect(bgColor).toBe('rgb(100, 108, 255)') // #646cff
+})
+
+test.runIf(isServe)('hmr works', async () => {
+ editFile('src/App.tsx', (code) => code.replace('hotpink', 'blue'))
+ await expect
+ .poll(async () => {
+ const title = page.locator('.emotion-title')
+ return getColor(title)
+ })
+ .toBe('rgb(0, 0, 255)') // blue
+})
diff --git a/examples/emotion/index.html b/examples/emotion/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Emotion Example</title>
+ </head>
+ <body>
+ <div id="root"></div>
+ <script type="module" src="/src/main.tsx"></script>
+ </body>
+</html>
diff --git a/examples/emotion/package.json b/examples/emotion/package.json
@@ -0,0 +1,23 @@
+{
+ "name": "@rolldown/example-emotion",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "@emotion/react": "^11.14.0",
+ "@emotion/styled": "^11.14.1",
+ "react": "^19.2.4",
+ "react-dom": "^19.2.4"
+ },
+ "devDependencies": {
+ "@rolldown/plugin-emotion": "workspace:*",
+ "@types/react": "^19.2.14",
+ "@types/react-dom": "^19.2.3",
+ "@vitejs/plugin-react": "^6.0.1",
+ "vite": "8.0.0"
+ }
+}
diff --git a/examples/emotion/src/App.tsx b/examples/emotion/src/App.tsx
@@ -0,0 +1,42 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react'
+import styled from '@emotion/styled'
+
+const Title = styled.h1`
+ color: hotpink;
+ font-size: 2rem;
+`
+
+const buttonStyle = css`
+ padding: 0.5rem 1rem;
+ background-color: #646cff;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+
+ &:hover {
+ background-color: #535bf2;
+ }
+`
+
+const Card = styled.div`
+ padding: 2rem;
+ border: 1px solid #ccc;
+ border-radius: 8px;
+ margin: 1rem;
+`
+
+export default function App() {
+ return (
+ <div className="emotion-app">
+ <Title className="emotion-title">Emotion Works!</Title>
+ <Card className="emotion-card">
+ <p className="emotion-text">This is a styled card component.</p>
+ <button css={buttonStyle} className="emotion-button">
+ Styled Button
+ </button>
+ </Card>
+ </div>
+ )
+}
diff --git a/examples/emotion/src/main.tsx b/examples/emotion/src/main.tsx
@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+ <StrictMode>
+ <App />
+ </StrictMode>,
+)
diff --git a/examples/emotion/vite.config.ts b/examples/emotion/vite.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import emotion from '@rolldown/plugin-emotion'
+
+export default defineConfig({
+ plugins: [
+ emotion({
+ sourceMap: true,
+ autoLabel: 'always',
+ }),
+ react({
+ jsxImportSource: '@emotion/react',
+ }),
+ ],
+})
diff --git a/examples/package.json b/examples/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "@rolldown/examples",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "test": "vitest --project=e2e:dev --project=e2e:build",
+ "test:dev": "vitest --project=e2e:dev",
+ "test:build": "vitest --project=e2e:build"
+ },
+ "devDependencies": {
+ "playwright-chromium": "^1.58.2",
+ "vite": "^8.0.0"
+ }
+}
diff --git a/examples/test-utils.ts b/examples/test-utils.ts
@@ -0,0 +1,25 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import type { Locator } from 'playwright-chromium'
+import { inject } from 'vitest'
+import { tempDir } from './vitestSetup'
+
+export { page } from './vitestSetup'
+
+export const isBuild = !!inject('isBuild')
+export const isServe = !isBuild
+
+export function editFile(file: string, callback: (content: string) => string): void {
+ const filePath = path.resolve(tempDir, file)
+ const content = fs.readFileSync(filePath, 'utf-8')
+ const modified = callback(content)
+ fs.writeFileSync(filePath, modified)
+}
+
+export async function getColor(locator: Locator): Promise<string> {
+ return locator.evaluate((el) => getComputedStyle(el).color)
+}
+
+export async function getBg(locator: Locator): Promise<string> {
+ return locator.evaluate((el) => getComputedStyle(el).backgroundColor)
+}
diff --git a/examples/tsconfig.json b/examples/tsconfig.json
@@ -0,0 +1,19 @@
+{
+ "compilerOptions": {
+ "target": "esnext",
+ "module": "preserve",
+ "lib": ["es2023", "DOM"],
+ "strict": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "declaration": true,
+ "jsx": "react-jsx",
+ "paths": {
+ "~utils": ["./test-utils.ts"]
+ }
+ }
+}
diff --git a/examples/vitest.config.ts b/examples/vitest.config.ts
@@ -0,0 +1,45 @@
+import { defineConfig } from 'vitest/config'
+import { resolve } from 'node:path'
+
+const timeout = process.env.CI ? 6000 : 3000
+
+export default defineConfig({
+ resolve: {
+ alias: {
+ '~utils': resolve(import.meta.dirname, './test-utils.ts'),
+ },
+ },
+ test: {
+ setupFiles: ['./vitestSetup.ts'],
+ globalSetup: ['./vitestGlobalSetup.ts'],
+ testTimeout: timeout,
+ hookTimeout: timeout,
+ reporters: 'dot',
+ fileParallelism: false,
+ projects: [
+ {
+ extends: true,
+ test: {
+ name: 'e2e:dev',
+ env: {
+ // set here to override Vitest's default `"test"`
+ NODE_ENV: 'development',
+ },
+ },
+ },
+ {
+ extends: true,
+ test: {
+ name: 'e2e:build',
+ provide: {
+ isBuild: '1',
+ },
+ env: {
+ // set here to override Vitest's default `"test"`
+ NODE_ENV: 'production',
+ },
+ },
+ },
+ ],
+ },
+})
diff --git a/examples/vitestGlobalSetup.ts b/examples/vitestGlobalSetup.ts
@@ -0,0 +1,31 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import type { TestProject } from 'vitest/node'
+import type { BrowserServer } from 'playwright-chromium'
+import { chromium } from 'playwright-chromium'
+
+let tempBaseDir: string | undefined
+let browserServer: BrowserServer | undefined
+
+export async function setup({ provide, config }: TestProject): Promise<void> {
+ browserServer = await chromium.launchServer({
+ headless: !process.env.VITE_DEBUG_SERVE,
+ args: process.env.CI ? ['--no-sandbox', '--disable-setuid-sandbox'] : undefined,
+ })
+ provide('wsEndpoint', browserServer.wsEndpoint())
+
+ const isBuild = !!config.provide.isBuild
+ tempBaseDir = path.join(import.meta.dirname, `../examples-temp-${isBuild ? 'build' : 'dev'}`)
+
+ if (!fs.existsSync(tempBaseDir)) {
+ fs.mkdirSync(tempBaseDir, { recursive: true })
+ }
+ provide('tempBaseDir', tempBaseDir)
+}
+
+export async function teardown(): Promise<void> {
+ await browserServer?.close()
+ if (fs.existsSync(tempBaseDir!)) {
+ fs.rmSync(tempBaseDir!, { recursive: true, force: true })
+ }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# keep LF as-is even on Windows for consistent hash values across platforms
		* text=auto eol=lf