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

Have you used AI?

Yes

Which part of webpack is affected?

css

Bug Description

The animName replacement doesn't work correctly.

@value animName: pulseAnim;

.anim {
    animation: animName 2s linear;
}

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

Link to Minimal Reproduction and steps to reproduce

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

Expected Behavior

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

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

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

Actual Behavior

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

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

Environment

webpack 5.108.4

Is this a regression?

None

Last Working Version

No response

Additional Context

No response