Version

3.0.0

Reproduction link

https://github.com/fotijr/spacevg

Steps to reproduce

1. Remove the !important flag at this line.
2. Run yarn dev.
3. View the generated CSS and see that both liftoff and firstLanding animation names are in the CSS.
4. Run yarn build.
5. View the generated CSS, and see the animation is reduced to a shorthand of animation: 1s linear forwards liftoff; . Notably the firstLanding animation is now missing.

What is expected?

CSS should be functionally the same between development and builds.

What is actually happening?

firstLanding animation is not applied in the build. It appears to be lost when the build translates animation properties into shorthand format.

I worked around the issue by adding the !important flag in this PR. I disabled autoprefixer to verify it wasn't causing the issue.

Also, I know I'm using animations a bit differently. I wrote about why I built this and some Safari issues I had to work around.

I found something. The generated CSS is correct when I remove animation-iteration-count: 1, 1;(line 55) and !important.

This issue seems to be caused by one of the CSS libs, so please open an issue there. You are also sharing your whole project as a reproduction which makes it really hard for us to check

@posva I can create a simpler repo that just shows the issue, but I'll wait to do that until I find the right project that is causing the bug. What do you mean by "cas libs"? I looked through the dependency tree but didn't see anything containing "cas". I'm not familiar with Vue internal architecture, so I'd appreciate any help getting pointed in the right direction. This is a bug that affects Vue apps, so I would like to see this through in getting it fixed (in whatever end repo it may be).

@fotijr I meant CSS, sorry, like postcss or any other plugin. Vue doesn't parse the CSS after all. It could still come from Vue or Vite, but in that case, a boiled down reproduction should be provided

Gotcha. OK I will try reproducing directly with PostCSS. Thanks.

I found the library causing the bug and opened an issue with clean-css. I didn't realize Vue doesn't do any CSS parsing, thanks for the info. I should have started with Vite, since that's what wired up clean-css.