Minify transform properties breaks animations

[oscarotero]

I have the following css code:

@keyframes firecircle {
    0% {
      transform: translateY(0) scale(1);
    }

    100% {
      transform: translateY(-11em) scale(0);
    }
  }

That is minified to:

@keyframes firecircle{0%{transform:matrix(1,0,0,1,0,0)}to{transform:translateY(-11em)scale(0)}}

As you can see, the value in the first step is transformed to a matrix and the animation no longer works.

This happens after updating to the latest version (0.15.0). Before that, I was using 0.11.1 and it worked fine.

[wilsonzlin]

Thanks for raising. This is likely due to the migration to lightningcss. Are you able to take a look upstream to see if there's any config or issue related to this? I'll investigate later as well.

[oscarotero]

Thanks @wilsonzlin Okay, I can see this issue is already filed in https://github.com/parcel-bundler/lightningcss/issues/288 I hope they fix it soon, or at least allow to customize the behavior.

[wilsonzlin]

Thanks for finding the issue, I'll keep track of it.

[oscarotero]

Hi. Just want to let you know that this bug seems to be fixed by lightningcss.