[Bug]: CSS: @value replacement in keyframes/animation produces broken output

System Info

rspack 2.2.3

Details

@value replacement for animation + @keyframes produce broken output:

===== input =====
@value animName: pulseAnim;

.anim {
    animation: animName 2s linear;
}

@keyframes animName {
    from { opacity: 0; }
}

===== rspack (native css/module) output =====
.css-modules-value-animation-src_index_css-anim {
    animation: pulseAnim 2s linear;
}

@keyframes css-modules-value-animation-src_index_css-animName {
    from { opacity: 0; }
}

note - webpack native css also has an issue, though with different output: webpack/webpack#22030

Reproduce link

https://github.com/Knagis/rspack-webpack-css-value-animation

Reproduce Steps

npm install
npm run build

Expected Behavior... Needs to be aligned with webpack.

Likely to keep consistency with how @value are used (not hashed) in selectors:

.anim_hash {
    animation: pulseAnim 2s linear;
}

@keyframes pulseAnim {
    from { opacity: 0; }
}

I checked css-loader and the name is hashed.
localIdentName: "[path][name]__[local]--[hash:base64:5]"

.src-index__anim--aDRCe {
    animation: 2s linear src-index__pulseAnim--rpbwN;
}
@keyframes src-index__pulseAnim--rpbwN {
    0% {
        opacity: 0;
    }
}

I will align with css-loader first.

css-loader is deprecated now, and it doesn't even support values in selectors that webpack and rspack native css support does support.

/* input */
@value sel: .globalThing;

sel {
    color: blue;
}

/* output */
.XbSZ44YRvgGzLB6rR_A1 {
    color: blue;
}

Emmm, latest webpack emits a warning for re-declaration while the generated name is incorrect.
If we treat at-value and at-keyframes as variable declarations, this is actually correct output.

@value animName: pulseAnim; // <- first declaration

.anim {
    animation: animName 2s linear; // <- deref first declaration here
}

@keyframes animName { // <- declare the second one, the first declaration is shadowed
    from { opacity: 0; }
}

If you want to keep the animation name, at-value is not needed. Just set parser['css/module'].animation = false
https://rspack.rs/config/module-parser#cssautoanimation

@intellild

@intellild If the logic that @keyframes override @value holds (why not, seems logical) then would it be expected that for

@value animName: pulseAnim;

@keyframes animName {
    from { opacity: 0; }
}

.anim {
    animation: animName 2s linear;
}

this produces the same output - the animation reference uses the first declaration, not the second.

@keyframes css-modules-value-animation-src_index_css-animName {
    from { opacity: 0; }
}

.css-modules-value-animation-src_index_css-anim {
    animation: pulseAnim 2s linear;
}

Perhaps the better approach is to throw an error when such conflict is encountered to make it explicitly not supported?

I personally don't have clear preference, we don't use this case, it was something that i found while making sure @value for typical cases work for us, and thought it worth reporting - primarily because of the inconsistency with webpack.

Thanks for reporting, this I will add a warning

Navigation Menu

Repository navigation

[Bug]: CSS: @value replacement in keyframes/animation produces broken output #15612

System Info

Details

Reproduce link

Reproduce Steps

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Bug]: CSS: @value replacement in keyframes/animation produces broken output #15612

Description

System Info

Details

Reproduce link

Reproduce Steps

Activity

Knagis commented on Sep 10, 2026

intellild commented on Sep 10, 2026

Knagis commented on Sep 10, 2026

intellild commented on Sep 10, 2026

intellild commented on Sep 10, 2026

Knagis commented on Sep 10, 2026

intellild commented on Sep 10, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions