Reproduction link or steps
minimal repo with reproduction steps in readme
https://github.com/kputnins/tsdown-lightningcss-bug/tree/main
What is expected?
The animation: false lightningcss option should prevent CSS animation keyframes from being renamed.
Sample tsdown configuration:
import { defineConfig } from "tsdown";
export default defineConfig({
css: {
modules: true,
lightningcss: {
cssModules: {
animation: false, // 👈 not working
},
},
},
});
An animation defined in a CSS module should not get renamed, for example this should be the expected output after building the project:
@keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
What is actually happening?
The CSS animation keyframes get renamed and this is the output:
@keyframes eRYWUa_fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
Any additional comments?
I ran in to this bug as the lightningcss has a know limitation that it can't transform animations defined in CSS variables, so when the key frames get renamed they become out of sync with he animation defined in the CSS variable. For example
:root {
/* "fade-out" does not get renamed and keyframes can't be found */
--fade-out-animation: fade-out 2s ease-in-out
}
.fade-out-on-hover:hover {
animation: var(--fade-out-animation);
}
/* "fade-out" gets renamed */
@keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
As a workaround you can disable animation renaming in lightningcss with the animation configuration and just leave them to be global.
I've checked that this works as expected with lightningcss@1.33.0
Although in tsdown@0.23.0 and @tsdown/css@0.23.0 this setting is available to be passed down to lightningcss it does not work and the animations are transformed regardless.
Reproduction link or steps
minimal repo with reproduction steps in readme
https://github.com/kputnins/tsdown-lightningcss-bug/tree/main
What is expected?
The
animation: falselightningcss option should prevent CSS animation keyframes from being renamed.Sample tsdown configuration:
An animation defined in a CSS module should not get renamed, for example this should be the expected output after building the project:
What is actually happening?
The CSS animation keyframes get renamed and this is the output:
Any additional comments?
I ran in to this bug as the lightningcss has a know limitation that it can't transform animations defined in CSS variables, so when the key frames get renamed they become out of sync with he animation defined in the CSS variable. For example
As a workaround you can disable animation renaming in lightningcss with the animation configuration and just leave them to be global.
I've checked that this works as expected with
lightningcss@1.33.0Although in
tsdown@0.23.0and@tsdown/css@0.23.0this setting is available to be passed down to lightningcss it does not work and the animations are transformed regardless.