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 })
+  }
+}
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