Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

cssnano renames css keyframes to "a" #247

Closed
breytex opened this Issue Aug 11, 2016 · 21 comments

Comments

Projects
None yet
@breytex
Copy link

commented Aug 11, 2016

Css nano used in gulp renames
@-webkit-keyframes toRightFromLeft {
to
@-webkit-keyframes a {

leading to conflicts with css rules defining styles for a link ("a").
All my animations stopt working because of this renaming and I had to stop using css nano.

@ben-eb

This comment has been minimized.

Copy link
Collaborator

commented Aug 11, 2016

Would you be able to share an example of this? As far as I am aware the keyframes identifiers are separate to the identifiers for HTML tags, and I've been running this transform on a few sites without problems.

@breytex

This comment has been minimized.

Copy link
Author

commented Aug 11, 2016

Hey!
Sorry, I am not able to deliver a full working example since I found the bug in a very big project and I am not as-good with gulp to create a quick and small example in-time (yet).

But I am 100% sure that css nano renamed the keyframe name as showed in my #1 post.
After I disabled css nano, everything worked again.

Some more information:
The keyframe css rule was placed in a scss file. In an other scss file, the keyframes where referenced. We use a pipe to put all scss contents together in one big file and then use css nano on the big file with the stated result.

I found the bug when scrolling through the dist css file, my editor (atom) highlighted the new name "a" in red, the color which is used to show that this is a reserved name (like b, li, ul...)

@ben-eb

This comment has been minimized.

Copy link
Collaborator

commented Aug 11, 2016

If you don't want the behaviour you can always disable the transform;

{
  reduceIdents: false
}

An example would definitely be useful, I haven't had any problems with this transform thus far. 😄

@bfricka

This comment has been minimized.

Copy link

commented Aug 13, 2016

There's nothing "reserved" about a keyframe "a", but as mentioned you can certainly disable the transform

@stewwan

This comment has been minimized.

Copy link

commented Aug 15, 2016

+1 here
the mentioned workaround solves

cssnano({
  reduceIdents: false
})
@gavinlynch

This comment has been minimized.

Copy link

commented Sep 26, 2017

just got this issue as well. it's still around.

@os1r1s110

This comment has been minimized.

Copy link

commented Sep 27, 2017

Also got this same problem. Proposed workaround is effectively working, but it would be nice to have the option to let minification process keyframes without breaking them.

@andyjansson

This comment has been minimized.

Copy link
Collaborator

commented Sep 28, 2017

How does the issue manifest itself?

@os1r1s110

This comment has been minimized.

Copy link

commented Sep 28, 2017

What do you mean how does it manifest?
Exactly as described above:

Css nano used in gulp renames
@-webkit-keyframes toRightFromLeft {
to
@-webkit-keyframes a {

Which breaks animations (at least in Edge browser). I'm not convinced it has anything to do with the fact the it may overwrite rules for links, but it may be the case, I don't know. The only thing I know for sure is it broke the animations until I set the flag to reduceIdents to false.

Beforehand, I tested the solution by manually renaming the keyframes name to something else and setting the css rule to that new animation name, which fixed it. So I'm 99.99% confident that it was effectively the source of error.

@sqfbeijing

This comment has been minimized.

Copy link

commented Nov 24, 2017

I have the same problem as @breytex. cssnano change the keyframes '@Keyframes g-line-loading' to '@Keyframes a'. And '@Keyframes swiper-preloader-spin ' to '@Keyframes a'. So the two animation in the same html are all 'a', and go wrong.

@impressor615

This comment has been minimized.

Copy link

commented Jan 20, 2018

I encountered the same issues!

@MikeChugunov

This comment has been minimized.

Copy link

commented Mar 1, 2018

Same, it won't be a problem with single file probably, but it starts to messing with multiple minified files.

cssnano({
  reduceIdents: false
})

resolves issue

@manavm1990

This comment has been minimized.

Copy link

commented Mar 2, 2018

Yes, I am using: https://daneden.github.io/animate.css/ As part of my production build only unless I use

cssnano({
  reduceIdents: false
})

it will completely break all of the class names that are defined in the library and no animations will work.

@vincentbernat

This comment has been minimized.

Copy link

commented Mar 18, 2018

I was also hit with this issue. However, in my case, the explanation is quite simple: I am using several CSS files in the same page. If they each contain keyframes, I get conflicting definitions.

@toobull

This comment has been minimized.

Copy link

commented Apr 6, 2018

@vincentbernat I'm the same with you.

@dyw934854565

This comment has been minimized.

Copy link

commented Apr 12, 2018

it will also remove the keyframes not used in a same file. Is there way to prevent?

@Lakston

This comment has been minimized.

Copy link

commented Apr 26, 2018

Just had this happen to me, took me 2 hours to find the culprit, reduceIdents: false fixes it but it's not a proper solutions as it defeats the purpose of a minifier...

@dalyr95

This comment has been minimized.

Copy link

commented May 23, 2018

Getting this issue as well. I have two separate animations, works fine on page load, then when the chunk with the other animation is loaded it, its keyframe a overrides the previous one.

@thomasclausen

This comment has been minimized.

Copy link

commented Jun 25, 2018

I got a similar problem with a couple of websites where I use animation.css. My problem is that in Internet Explorer 11 an element gets a different animation then expected.
All my styles are in a single minified stylesheet, and as far as I can see it's because Internet Explorer doesn't know the difference between keyframes with uppercase and lowercase name - ex. @keyframes a {} and @keyframes A {}.

@huangyunshen

This comment has been minimized.

Copy link

commented Aug 10, 2018

the same problem

@andyjansson

This comment has been minimized.

Copy link
Collaborator

commented Aug 10, 2018

This optimisation is only enabled in the advanced preset in cssnano 4. If you're using the default preset, this shouldn't be an issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.