Skip to content

animation: false lightningcss option not working #1083

Description

@kputnins

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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    Fields

    Priority

    None yet

    Effort

    None yet

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions