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 · 25 comments
Closed

cssnano renames css keyframes to "a" #247

breytex opened this issue Aug 11, 2016 · 25 comments

Comments

@breytex
Copy link

@breytex breytex 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
Copy link
Collaborator

@ben-eb ben-eb 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
Copy link
Author

@breytex breytex 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
Copy link
Collaborator

@ben-eb ben-eb 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
Copy link

@bfricka bfricka commented Aug 13, 2016

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

@stewones
Copy link

@stewones stewones commented Aug 15, 2016

+1 here
the mentioned workaround solves

cssnano({
  reduceIdents: false
})

@gavinlynch
Copy link

@gavinlynch gavinlynch commented Sep 26, 2017

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

@lvmajor
Copy link

@lvmajor lvmajor 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
Copy link
Contributor

@andyjansson andyjansson commented Sep 28, 2017

How does the issue manifest itself?

@lvmajor
Copy link

@lvmajor lvmajor 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
Copy link

@sqfbeijing sqfbeijing 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.

@seonghyeonkimm
Copy link

@seonghyeonkimm seonghyeonkimm commented Jan 20, 2018

I encountered the same issues!

@MikeChugunov
Copy link

@MikeChugunov MikeChugunov 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
Copy link

@manavm1990 manavm1990 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
Copy link

@vincentbernat vincentbernat 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
Copy link

@toobull toobull commented Apr 6, 2018

@vincentbernat I'm the same with you.

@dyw934854565
Copy link

@dyw934854565 dyw934854565 commented Apr 12, 2018

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

@Lakston
Copy link

@Lakston Lakston 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
Copy link

@dalyr95 dalyr95 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
Copy link

@thomasclausen thomasclausen 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
Copy link

@huangyunshen huangyunshen commented Aug 10, 2018

the same problem

@andyjansson
Copy link
Contributor

@andyjansson andyjansson 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.

@tkiehne
Copy link

@tkiehne tkiehne commented Jun 6, 2019

A better fix is to use the string identifier for keyframes: display, e.g.:

@-webkit-keyframes 'toRightFromLeft' {...}
...
animation: 'toRightFromLeft'...

The names are preserved in the compiled css.

https://www.w3.org/TR/css-animations-1/#typedef-keyframes-name

@BB-000
Copy link

@BB-000 BB-000 commented Oct 2, 2019

A better fix is to use the string identifier for keyframes:

This causes me a sass compile error (grunt-sass)

Warning: undefined:24:20: @Keyframes missing name Use --force to continue.

@tkiehne
Copy link

@tkiehne tkiehne commented Feb 12, 2020

Sometime since my comment above, Chrome (on Mac OS X) stopped allowing quotes on animation names. Now the "better" workaround seems to be to implement the cssnano parameters, but in a more targeted fashion:

...
reduceIdents: { keyframes: false}, 
discardUnused: { keyframes: false },
...

The animation name comes through unmolested and without quotes while retaining the default reduceIndents behavior for everything else.

@janwillemvancappellen
Copy link

@janwillemvancappellen janwillemvancappellen commented Dec 30, 2020

To only target the keyframes:

reduceIdents: { keyframes: false}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet