Wrong tail for the .keyframes

zvictor commented 10 years ago

Description

On the .keyframes mixin the last characters seem to be wrong for me. Except by the @keyframes section, all the vendor specific definitions end with a }} string, but the @keyframes tail is compound by a };\n} sequence. Isn't that wrong?

Error

When using .keyframe on a Meteorjs project it breaks the entire application and we have the following error:

=> Errors prevented startup:

While building the application:
client/animate.less.css: @keyframes missing '}' near line 6:266

Input

.keyframes(~'animationName, 0%{ transform: scale(1.5); color: blue; } 100%{ transform: scale(2); color: red }');

Output

lesshat-selector {
  -lh-property: 0; } 
@-webkit-keyframes animationName{ 0%{ -webkit-transform: scale(1.5); color: blue; } 100%{ -webkit-transform: scale(2); color: red }}
@-moz-keyframes animationName{ 0%{ -moz-transform: scale(1.5); color: blue; } 100%{ -moz-transform: scale(2); color: red }}
@-o-keyframes animationName{ 0%{ -o-transform: scale(1.5); color: blue; } 100%{ -o-transform: scale(2); color: red }}
@keyframes animationName{ 0%{-webkit-transform: scale(1.5);-moz-transform: scale(1.5);-ms-transform: scale(1.5);transform: scale(1.5); color: blue; } 100%{-webkit-transform: scale(2);-moz-transform: scale(2);-ms-transform: scale(2);transform: scale(2); color: red };
}

exocom commented 10 years ago

I just ran into this same issue.

For a temporary fix, you can modify lesshat.less on line 508 and add the string below to the end of the line just before the closing tick

+"} \nlesshat-selector { -lh-property: 0 "

Line 509

@process: ~`(function ..............)())+"} \nlesshat-selector { -lh-property: 0 "`;

This turns the output into

lesshat-selector {
  -lh-property: 0; } 
@-webkit-keyframes animationName{ 0%{ -webkit-transform: scale(1.5); color: blue; } 100%{ -webkit-transform: scale(2); color: red }}
@-moz-keyframes animationName{ 0%{ -moz-transform: scale(1.5); color: blue; } 100%{ -moz-transform: scale(2); color: red }}
@-o-keyframes animationName{ 0%{ -o-transform: scale(1.5); color: blue; } 100%{ -o-transform: scale(2); color: red }}
@keyframes animationName{ 0%{-webkit-transform: scale(1.5);-moz-transform: scale(1.5);-ms-transform: scale(1.5);transform: scale(1.5); color: blue; } 100%{-webkit-transform: scale(2);-moz-transform: scale(2);-ms-transform: scale(2);transform: scale(2); color: red }}
lesshat-selector { -lh-property: 0;
}

zvictor commented 10 years ago

Thank you @exocom ! It works well =)