fix(emotion): fix autoLabel not adding label to css tagged template class names (#597)

Fix `autoLabel` option not working for `css` tagged template literals.

The label was added without the `label:` CSS property prefix, so
emotion's runtime did not recognize it and omitted it from the class
name.

Fixes #571

Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com>
Co-authored-by: Donny/강동윤 <kdy1@users.noreply.github.com>

Author: kdy1

packages/emotion/__tests__/__snapshots__/wasm.test.ts.snap

@@ -1,5 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`Should add label to css tagged template when autoLabel is 'always' 1`] = `
+"import { css } from '@emotion/css';
+export var testCls = /*#__PURE__*/ css("font-size:100px;font-weight:bold;", "label:testCls");
+export var anotherStyle = /*#__PURE__*/ css("color:red;", "label:anotherStyle");
+"
+`;
+
 exports[`Should transform emotion css correctly 1`] = `
 "function _tagged_template_literal(strings, raw) {
     if (!raw) {

packages/emotion/__tests__/fixtures/auto-label-input.js

@@ -0,0 +1,10 @@
+import { css } from '@emotion/css';
+
+export const testCls = css`
+  font-size: 100px;
+  font-weight: bold;
+`;
+
+export const anotherStyle = css`
+  color: red;
+`;

packages/emotion/__tests__/wasm.test.ts

@@ -5,6 +5,11 @@ import url from "node:url";
 import { type Options, transform } from "@swc/core";
 
 const pluginName = "swc_plugin_emotion.wasm";
+const pluginPath = path.join(
+  path.dirname(url.fileURLToPath(import.meta.url)),
+  "..",
+  pluginName,
+);
 
 const options: Options = {
   jsc: {
@@ -14,11 +19,7 @@ const options: Options = {
     experimental: {
       plugins: [
         [
-          path.join(
-            path.dirname(url.fileURLToPath(import.meta.url)),
-            "..",
-            pluginName,
-          ),
+          pluginPath,
           {},
         ],
       ],
@@ -39,3 +40,69 @@ test("Should transform emotion css correctly", async () => {
   const output = await transform(code, options);
   expect(output.code).toMatchSnapshot();
 });
+
+test("Should add label to css tagged template when autoLabel is 'always'", async () => {
+  const code = await fs.readFile(
+    path.resolve(
+      url.fileURLToPath(import.meta.url),
+      "..",
+      "fixtures",
+      "auto-label-input.js",
+    ),
+    "utf-8",
+  );
+  const output = await transform(code, {
+    jsc: {
+      parser: {
+        syntax: "ecmascript",
+      },
+      experimental: {
+        plugins: [
+          [
+            pluginPath,
+            {
+              autoLabel: "always",
+              sourceMap: false,
+            },
+          ],
+        ],
+      },
+    },
+  });
+  expect(output.code).toMatchSnapshot();
+  // Verify labels are added with the correct "label:" prefix
+  expect(output.code).toContain('"label:testCls"');
+  expect(output.code).toContain('"label:anotherStyle"');
+});
+
+test("Should not add label to css tagged template when autoLabel is 'never'", async () => {
+  const code = await fs.readFile(
+    path.resolve(
+      url.fileURLToPath(import.meta.url),
+      "..",
+      "fixtures",
+      "auto-label-input.js",
+    ),
+    "utf-8",
+  );
+  const output = await transform(code, {
+    jsc: {
+      parser: {
+        syntax: "ecmascript",
+      },
+      experimental: {
+        plugins: [
+          [
+            pluginPath,
+            {
+              autoLabel: "never",
+              sourceMap: false,
+            },
+          ],
+        ],
+      },
+    },
+  });
+  expect(output.code).not.toContain('"label:testCls"');
+  expect(output.code).not.toContain('"label:anotherStyle"');
+});

packages/emotion/transform/src/lib.rs

@@ -727,7 +727,7 @@ impl<C: Comments> Fold for EmotionTransformer<'_, C> {
                         if !self.in_jsx_element {
                             self.comments.add_pure_comment(i.span.lo());
                             if self.options.auto_label.unwrap_or(false) {
-                                args.push(self.create_label(false).as_arg());
+                                args.push(self.create_label(true).as_arg());
                             }
                             if let Some(cm) = self.create_sourcemap(tagged_tpl.span.lo()) {
                                 args.push(cm.as_arg());

packages/emotion/transform/tests/fixture/compress/output.ts

@@ -10,7 +10,7 @@ export const Animated = /*#__PURE__*/ styled("div", {
     target: "e1xgaop21",
     label: "Animated"
 })("& code{background-color:linen;}animation:", ({ animation })=>animation, " 0.2s infinite ease-in-out alternate;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmNvbnN0IHVuaXROb3JtYWwgPSBcIjFyZW1cIjtcbmNvbnN0IHVuaXRMYXJnZSA9IFwiMnJlbVwiO1xuXG5jb25zdCBFeGFtcGxlID0gc3R5bGVkLmRpdmBcbiAgbWFyZ2luOiAke3VuaXROb3JtYWx9ICR7dW5pdExhcmdlfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBBbmltYXRlZCA9IHN0eWxlZC5kaXZgXG4gICYgY29kZSB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogbGluZW47XG4gIH1cbiAgYW5pbWF0aW9uOiAkeyh7IGFuaW1hdGlvbiB9KSA9PiBhbmltYXRpb259IDAuMnMgaW5maW5pdGUgZWFzZS1pbi1vdXQgYWx0ZXJuYXRlO1xuYDtcblxuY29uc3Qgc2hhZG93Qm9yZGVyID0gKHsgd2lkdGggPSBcIjFweFwiLCBjb2xvciB9KSA9PiBjc3NgXG4gIGJveC1zaGFkb3c6IGluc2V0IDBweCAwcHggMHB4ICR7d2lkdGh9ICR7Y29sb3J9O1xuYDtcblxuY29uc3QgU3R5bGVkSW5wdXQgPSBzdHlsZWQuaW5wdXRgXG4gICR7c2hhZG93Qm9yZGVyKHsgY29sb3I6IFwicmVkXCIsIHdpZHRoOiBcIjRweFwiIH0pfVxuYDtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVd0IifQ== */");
-const shadowBorder = ({ width = "1px", color })=>/*#__PURE__*/ css("box-shadow:inset 0px 0px 0px ", width, " ", color, ";", "shadowBorder", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmNvbnN0IHVuaXROb3JtYWwgPSBcIjFyZW1cIjtcbmNvbnN0IHVuaXRMYXJnZSA9IFwiMnJlbVwiO1xuXG5jb25zdCBFeGFtcGxlID0gc3R5bGVkLmRpdmBcbiAgbWFyZ2luOiAke3VuaXROb3JtYWx9ICR7dW5pdExhcmdlfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBBbmltYXRlZCA9IHN0eWxlZC5kaXZgXG4gICYgY29kZSB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogbGluZW47XG4gIH1cbiAgYW5pbWF0aW9uOiAkeyh7IGFuaW1hdGlvbiB9KSA9PiBhbmltYXRpb259IDAuMnMgaW5maW5pdGUgZWFzZS1pbi1vdXQgYWx0ZXJuYXRlO1xuYDtcblxuY29uc3Qgc2hhZG93Qm9yZGVyID0gKHsgd2lkdGggPSBcIjFweFwiLCBjb2xvciB9KSA9PiBjc3NgXG4gIGJveC1zaGFkb3c6IGluc2V0IDBweCAwcHggMHB4ICR7d2lkdGh9ICR7Y29sb3J9O1xuYDtcblxuY29uc3QgU3R5bGVkSW5wdXQgPSBzdHlsZWQuaW5wdXRgXG4gICR7c2hhZG93Qm9yZGVyKHsgY29sb3I6IFwicmVkXCIsIHdpZHRoOiBcIjRweFwiIH0pfVxuYDtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQm1EIn0= */");
+const shadowBorder = ({ width = "1px", color })=>/*#__PURE__*/ css("box-shadow:inset 0px 0px 0px ", width, " ", color, ";", "label:shadowBorder", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmNvbnN0IHVuaXROb3JtYWwgPSBcIjFyZW1cIjtcbmNvbnN0IHVuaXRMYXJnZSA9IFwiMnJlbVwiO1xuXG5jb25zdCBFeGFtcGxlID0gc3R5bGVkLmRpdmBcbiAgbWFyZ2luOiAke3VuaXROb3JtYWx9ICR7dW5pdExhcmdlfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBBbmltYXRlZCA9IHN0eWxlZC5kaXZgXG4gICYgY29kZSB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogbGluZW47XG4gIH1cbiAgYW5pbWF0aW9uOiAkeyh7IGFuaW1hdGlvbiB9KSA9PiBhbmltYXRpb259IDAuMnMgaW5maW5pdGUgZWFzZS1pbi1vdXQgYWx0ZXJuYXRlO1xuYDtcblxuY29uc3Qgc2hhZG93Qm9yZGVyID0gKHsgd2lkdGggPSBcIjFweFwiLCBjb2xvciB9KSA9PiBjc3NgXG4gIGJveC1zaGFkb3c6IGluc2V0IDBweCAwcHggMHB4ICR7d2lkdGh9ICR7Y29sb3J9O1xuYDtcblxuY29uc3QgU3R5bGVkSW5wdXQgPSBzdHlsZWQuaW5wdXRgXG4gICR7c2hhZG93Qm9yZGVyKHsgY29sb3I6IFwicmVkXCIsIHdpZHRoOiBcIjRweFwiIH0pfVxuYDtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQm1EIn0= */");
 const StyledInput = /*#__PURE__*/ styled("input", {
     target: "e1xgaop22",
     label: "StyledInput"