Repository navigation
CSS: @value replacement in keyframes/animation produces broken output #22030
Description
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.4Is this a regression?
None
Last Working Version
No response
Additional Context
No response
Activity
Knagis commentedon Sep 10, 2026
there is some discussion in the rspack issue about what exactly would be the expected output in this case...
intellild commentedon Sep 10, 2026
Things are a little bit complicated.
In this case, if we prefer animation first, the
@value imported fromcan also be an animation in "values.module.css".alexander-akait commentedon Sep 10, 2026
@Knagis i want to say the current behavior is right, firstly we resolve @value, then we apply interpolations, it was a bug in css modules plugins for postcss (I literally worked on them and I want confirm it is a bug)
alexander-akait commentedon Sep 10, 2026
@value is a build time replacement, after resolving all
@value’s, we apply the standard logic for css modules, you can use global() to keep the name as is
Knagis commentedon Sep 10, 2026
But that isn't the case for selectors - there the value replaced ident isn't then hashed
alexander-akait commentedon Sep 10, 2026
@Knagis are sure? I remember we made it and had tests for this
Knagis commentedon Sep 10, 2026
Yes, pretty sure, see the repro page https://github.com/Knagis/rspack-webpack-css-value-animation#webpack-output-native-cssmodule
I wouldn't mind it being hashed either, as long as the behavior is consistent and defined 🙂
alexander-akait commentedon Sep 10, 2026
@Knagis give me time to think about it, @value was always bad written in docs and spec, so we need to think how to we should behave
alexander-akait commentedon Sep 13, 2026
@Knagis implemented - #22036, please take a look, open to any discussions
fix(css): replace a @value named in an at-rule prelude only once (web…
alexander-akait commentedon Oct 3, 2026
@Knagis friendly ping, if it is good behavior for you we can close or continue the discussion
Knagis commentedon Oct 3, 2026
Sorry for not responding.
It looks great imo. Though for me the most important part is simply that this is specified behavior now.
BTW, what is the JS output for
@value animName: pulseAnim; @keyframes animName {}? Do we getexports.animName = "pulseAnim"and thenexports.pulseAnim = "value-at-rule-prelude-style_module_css-pulseAnim"?alexander-akait commentedon Oct 5, 2026
@Knagis found some bugs with reexport and fixed them, and yes, it works like your describe, feel free to test and report about any bugs if you find them