Skip to content

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

@jvm986

Description

@jvm986

Describe the bug

@swc/plugin-emotion@14.8.0 injects "label:pulse;" into keyframes tagged template literal calls, whereas 14.7.0 correctly passes just the name string "pulse". This causes Emotion's runtime to generate CSS class names with an animation- prefix (e.g., css-animation-1k1d89d instead of css-1k1d89d), breaking styles in production builds.

The regression was introduced by PR #597, which changed create_label(false) to create_label(true) for tagged template expressions. Since keyframes is mapped to ExprKind::Css in import_map.rs, the label injection now also applies to keyframes calls — but keyframes expects a plain name string, not a label:name; CSS property.

14.7.0 output (correct):

var pulse = keyframes("0%{opacity:1;}50%{opacity:0.5;}100%{opacity:1;}", "pulse", "/*# sourceMappingURL=... */");

14.8.0 output (broken):

var pulse = keyframes("0%{opacity:1;}50%{opacity:0.5;}100%{opacity:1;}", "label:pulse;", "/*# sourceMappingURL=... */");

URL to minimal reproduction

https://gist.github.com/jvm986/1c5440e095c90f0fe09f81251f8570aa

pnpm install
node transform.mjs

Expected behavior

keyframes calls should receive the plain name string (e.g., "pulse"), not a CSS label property ("label:pulse;"). Class names should not contain animation- prefix.

Additional context

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