Skip to content

@swc/plugin-emotion doesn't support autoLabel option #571

@cskunkun

Description

@cskunkun

Describe the bug
set autoLabel options always, but it doesn't work in development mode

URL to minimal reproduction

# create a rspack project
npm create rsbuild@latest
// set @swc/plugin-emotion
export default defineConfig({
  plugins: [
    pluginReact({
      swcReactOptions: {
        importSource: '@emotion/react',
      },
    }),
  ],
  tools: {
    swc: {
      jsc: {
        experimental: {
          plugins: [
            [
              '@swc/plugin-emotion',
              {
                autoLabel: 'always',
                sourceMap: true,
              },
            ],
          ],
        },
      },
    },
  },
});
// create a file src/style.ts
import { css } from '@emotion/css';

export const testCls = css`
  font-size: 100px;

  font-weight: bold;
`;

app.tsx

import './App.css';
import * as s from './style';

const App = () => {
  return <div className={s.testCls}>TST</div>;
};

export default App;

package.json dependencies

  "dependencies": {
    "@babel/preset-react": "^7.28.5",
    "@emotion/css": "^11.13.5",
    "@emotion/react": "^11.14.0",
    "react": "^19.2.3",
    "react-dom": "^19.2.3"
  },
  "devDependencies": {
    "@eslint/js": "^9.39.1",
    "@rsbuild/core": "^1.6.14",
    "@rsbuild/plugin-babel": "^1.0.6",
    "@rsbuild/plugin-react": "^1.4.2",
    "@swc/plugin-emotion": "^12.0.0",
    "@types/react": "^19.2.7",
    "@types/react-dom": "^19.2.3",
    "eslint": "^9.39.1",
    "eslint-plugin-react-hooks": "^7.0.1",
    "eslint-plugin-react-refresh": "^0.4.24",
    "globals": "^16.5.0",
    "prettier": "^3.7.3",
    "typescript": "^5.9.3",
    "typescript-eslint": "^8.48.0"
  }

Expected behavior

run npm run dev, find classname is minified, expected xxx-xxx-testCls

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions