Automatically remove @keyframes duplicates

[Justineo]

Hi,

When writing animations I don't want @keyframes rules appear in final .css files if they are not used (because if we support lots of animations that will be great amount of code). So I put a @keyframes rule inside a mixin, like this:

.play() {
  @keyframes play {
    from {
      margin-top: 0;
    }

    to {
      margin-top: 100px;
    }
  }
}

But if I call that mixin for several times, the @keyframes rule will also be repeated.

.test {
  .play();
}

.test2 {
  .play();
}

will output (in global scope):

@keyframes play {
  from {
    margin-top: 0;
  }
  to {
    margin-top: 100px;
  }
}
@keyframes play {
  from {
    margin-top: 0;
  }
  to {
    margin-top: 100px;
  }
}

Is there a way to avoid this? (I'm using lessc 1.4.2)

[Soviut]

This seems to fall into the same area as grouping media queries.

#950

However, instead of grouping it's more of a "collapse" situation. It would also need to be optional, however, since there may be a valid reason someone might want to override a @keyframe rule.

It seems that in both cases, some sort of syntax to indicate that a rule is allowed to be "grouped" or "collapsed" would be necessary.

[Justineo]

@keyframes rules don't cascade so the last one always wins. I think overriding is not a problem because you just need to pick the last rule.

[lukeapage]

You could get round this by setting a global variable and using a guard so
the mixin doesn't run if the variable is set...

[Justineo]

@lukeapage
I had considered that but it doesn't really solve the problem. I hope to 'Lessify' animation libraries like animate.css but it contains huge amount of @keyframes rules. If they cannot be produced into .css files upon mixin calls, I will have to output all of them. If I put them in mixins, I will only get those are actually used but with duplicates. I can't figure out a perfect solution in this case...

[lukeapage]

it would need to be an option - some people might want a key frame referenced inline or in another stylesheet.

[Justineo]

@lukeapage
Agree. So what I expect is that perhaps Less can offer some mechanism (maybe compilation option?) to automatically remove duplicate @keyframes rules (or even more general, other potential uncascaded rules) except the last one (by default it is turned off).

[lukeapage]

I thought your problem was unused keyframes, not duplicates?

[Justineo]

I can think of two choices:

1. directly write all @keyframes rules in the global scope, some of which may be unused, or
2. put @keyframes rules in mixins and output them only when mixins are called, which generates duplicates.

Your last comment is right, unused @keyframes rules cannot be removed because they might be referenced elsewhere. So I think there should be a way to remove duplicates.

[Justineo]

I found @counter-style rules being a similar case as this one.
http://dev.w3.org/csswg/css-counter-styles-3/#the-counter-style-rule

[lukeapage]

Feature will be in next minor release - 1.7

[Justineo]

@lukeapage
The problem discussed in this issue doesn't seem to be solved in 1.7. The problem here is duplication after each mixin call, while 1.7 supported using rulesets as variables.

[seven-phases-max]

OK, I'll reopen this (probably @lukeapage mean some other @keyframes related feature not "removing duplicates"). So far I have not seen anyone was planning to implement this.

[Justineo]

https://github.com/Justineo/less-plugin-unique-directives

Not fully tested yet.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[atang-gfm]

Hi @Justineo , wondering if you found a better solution to this problem?