keyframes issue

[alexandru-calinoiu]

Hi,

I have the follwoing less code that uses lesshat:

// FadeIn
.fadeIn(@delay: 0) {
    .animation-delay(@delay);
    .animation-name(fadeIn);
    .animation-duration(1.5s);
    .animation-fill-mode(forwards);
    .transition-timing-function(ease-in-out);
}

.keyframes(~'fadeIn, 0% { transform: scale(0); opacity: 0.0; } 60% { transform: scale(1.1); } 80% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1); opacity: 1; }');

When compiling this I will get the following error:

ExecJS::ProgramError 

Unclosed block
@-o-keyframes fadeIn{ 0% { -o-transform: scale(0); opacity: 0.0; }}
@keyframes fadeIn{ 0% {-webkit-transform: scale(0);-moz-transform: scale(0);-ms-transform: scale(0);transform: scale(0); opacity: 0.0; };
^
}

[meetwudi]

I just got this error too

[davipt]

This major issue is now also affecting Safari on OS X 10.11 and iOS 9 betas. The issue is not the extra semicolon at the end of the @keyframes, but the fact that the line is not terminated by the "}" on a contiguous line, but on the line below. If you try to move the last "}" up, it starts working with Safari. I assume the same will happen with the HTC. Even the less hat code mentions that the "@*keyframes must be in a single line". I've added a pull requests that moves the "}" up, by having to create a fake line below it. Please see it below.