fix(emotion): fix autoLabel not adding label to css tagged template class names by kdy1 · Pull Request #597 · swc-project/plugins

kdy1 · 2026-03-21T01:00:03Z

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

…lass names The `autoLabel` option for `css\`...\`` tagged templates was not working because `create_label(false)` was used, which returns just the label name (e.g., `"testCls"`) without the `label:` CSS property prefix. Emotion's runtime recognizes labels in CSS via the `label:xxx` CSS property. Without the prefix, the bare string `"testCls"` gets appended to the CSS content without being recognized as a label, so the class name hash did not include the label suffix. Fix: use `create_label(true)` for `css\`\`` tagged template expressions, which produces `"label:testCls"` (matching how call expressions handle it). This fixes the issue where `autoLabel: 'always'` config option had no effect on class names generated from CSS tagged template literals. Fixes: #571 Co-authored-by: Donny/강동윤 <kdy1@users.noreply.github.com>

changeset-bot · 2026-03-21T01:00:08Z

⚠️ No Changeset found

Latest commit: 89f3371

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

CLAassistant · 2026-03-21T01:00:10Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

claude · 2026-03-21T01:02:03Z

PR Review: fix(emotion): fix autoLabel not adding label to css tagged template class names

Overall: Clean, focused bug fix. Looks good to merge.

Summary

The root cause is in — was called for tagged template literals, where the boolean controls whether the label: CSS property prefix is included. Every other call site correctly passes true. This caused emotion's runtime to receive "myLabel" instead of "label:myLabel", so it silently ignored it and the label never appeared in the generated class name.

Strengths

Minimal, targeted fix: The one-line change (create_label(false) → create_label(true)) is exactly right and touches nothing else.
Good test coverage: The new tests cover both autoLabel: 'always' and autoLabel: 'never', and the 'always' test uses both snapshot assertions and explicit toContain checks for robustness.
Fixture updates are consistent: All the updated fixture files (compress/output.ts, css-in-callback/output.ts, labels/emotion-js/*.js, etc.) now correctly show "label:xxx" — confirming the bug was widespread and the fix is consistently applied.
Nice refactor: Extracting pluginPath to a constant eliminates the repetition and makes the new tests cleaner.

Minor Observations

The 'never' test lacks a snapshot: The 'always' test calls expect(output.code).toMatchSnapshot() but the 'never' test does not. It's not wrong (since only the absence of labels is being verified), but adding a snapshot to the 'never' test would make future output regressions visible.
Boolean parameter semantics on create_label: The with_prefix: bool parameter is a bit implicit — someone reading the call site needs to know what true vs false means. This pre-exists this PR, so not a blocker, but a named enum or a constant would make it self-documenting. Again, not something that needs to be addressed here.

Neither of these is a blocker. The fix is correct, well-tested, and all relevant existing fixtures have been updated.

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 89f3371565

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-03-21T01:06:06Z

+                                args.push(self.create_label(true).as_arg());
                            }
                            if let Some(cm) = self.create_sourcemap(tagged_tpl.span.lo()) {


Append a semicolon before the source-map comment

This still doesn’t fix the default development configuration. create_label(true) returns label:<name> without a trailing ;, and the next lines append the source-map comment, so the emitted call becomes css(..., "label:foo", "/*# sourceMappingURL... */"). Emotion’s runtime only extracts labels when they end with ; or end-of-string, which means tagged-template labels are still ignored whenever sourceMap is left at its documented default of true in dev. The new wasm coverage masks this by forcing sourceMap: false in packages/emotion/__tests__/wasm.test.ts.

Useful? React with 👍 / 👎.

## Summary - Addressed `chatgpt-codex-connector[bot]` review follow-ups across merged PRs: #585, #591, #592, #593, #594, #595, #597, #598, #599. - Applied the fixes as 9 separate commits (one commit per original PR) in a single follow-up branch. ## What Changed - #585 / #592 (`loadable-components`) - Fixed source-less default-import matching to honor the configured local name. - Updated `ssr: false` detection to respect final object-literal override order. - Added/updated fixtures for both behaviors. - #591 / #594 (`formatjs`) - Added JSX member-expression message component support (e.g. `ReactIntl.FormattedMessage`). - Updated #532 regression coverage to validate the `ast: true` path. - #593 / #595 (`graphql-codegen-client-preset`) - Extended `namingConvention` parsing to accept string/object forms. - Preserved names for `keep`/unknown conventions instead of forcing PascalCase. - Fixed Windows absolute `filename` path handling in WASM runtime path resolution. - Added unit coverage for the new config/path behaviors. - #597 / #599 (`emotion`) - Ensured tagged-template labels are terminated before sourcemap comments. - Added css-prop rewrite support for namespace imports (`emotionReact.css`). - Attached PURE comments to the generated call site span. - Updated emotion fixtures accordingly. - #598 (docs) - Corrected capability descriptions in `packages/jest/README.tmpl.md` and `packages/swc-sdk/README.tmpl.md`. ## Validation - `cargo test -p swc_plugin_loadable_components --test fixture -- --ignored` - `cargo test -p swc_plugin_graphql_codegen_client_preset` - `cargo test -p swc_emotion --test fixture -- --ignored` - `pnpm -C /Users/kdy1/.codex/worktrees/17e6/plugins/packages/formatjs test` All passed (formatjs has an existing non-blocking Vitest warning about an un-awaited rejects assertion).

…perty `keyframes` expects a plain name string (e.g. "pulse"), not a CSS label property (e.g. "label:pulse;"). Add `ExprKind::Keyframes` variant and map `keyframes` to it so label injection uses `create_label(false)` instead of `create_label(true)`, preventing the `animation-` prefix regression introduced in #597. Fixes #607 Co-authored-by: Donny/강동윤 <kdy1@users.noreply.github.com>

kdy1 enabled auto-merge (squash) March 21, 2026 01:00

kdy1 merged commit c84bfc9 into main Mar 21, 2026
10 of 11 checks passed

kdy1 deleted the claude/issue-571-20260321-0029 branch March 21, 2026 01:03

chatgpt-codex-connector Bot reviewed Mar 21, 2026

View reviewed changes

kdy1 added a commit that referenced this pull request Mar 21, 2026

fix(emotion): terminate tagged-template labels before sourcemaps (#597)

7934933

kdy1 mentioned this pull request Mar 21, 2026

fix: address codex-bot follow-ups for 2026-03-21 merged PRs #600

Merged

jvm986 mentioned this pull request Apr 7, 2026

@swc/plugin-emotion 14.8.0: keyframes label injection causes css-animation- class name prefix #607

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

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

fix(emotion): fix autoLabel not adding label to css tagged template class names#597
kdy1 merged 1 commit into
mainfrom
claude/issue-571-20260321-0029

kdy1 commented Mar 21, 2026

Uh oh!

changeset-bot Bot commented Mar 21, 2026

Uh oh!

CLAassistant commented Mar 21, 2026

Uh oh!

claude Bot commented Mar 21, 2026

Uh oh!

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

chatgpt-codex-connector Bot Mar 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

2 participants

Uh oh!

Uh oh!

Conversation

kdy1 commented Mar 21, 2026

Uh oh!

changeset-bot Bot commented Mar 21, 2026

⚠️ No Changeset found

Uh oh!

CLAassistant commented Mar 21, 2026

Uh oh!

claude Bot commented Mar 21, 2026

PR Review: fix(emotion): fix autoLabel not adding label to css tagged template class names

Summary

Strengths

Minor Observations

Uh oh!

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Mar 21, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

2 participants