Keyframes compiled css contains an extra semicolon - affecting the HTC One stock android browser

[JumpSlash]

Hi

I have a very specific bug with my LESS using the Lesshat keyframes mixin. There appears to be an extra semicolon which breaks the CSS for the HTC One stock android browser. So far this is the only device/browser that I've seen affected but there could be others.

I have the following LESS:

.keyframes(~'swing, 0% { transform: rotate(-15deg) } 100% { transform: rotate(15deg) }');

Which gets compiled to:

lesshat-selector {
-lh-property: 0; } 
@-webkit-keyframes swing{ 0% { -webkit-transform: rotate(-15deg) } 100% { -webkit-transform:     rotate(15deg) }}
@-moz-keyframes swing{ 0% { -moz-transform: rotate(-15deg) } 100% { -moz-transform: rotate(15deg) }}
@-o-keyframes swing{ 0% { -o-transform: rotate(-15deg) } 100% { -o-transform: rotate(15deg) }}
@keyframes swing{ 0% {-webkit-transform: rotate(-15deg);-moz-transform: rotate(-15deg);-ms-transform: rotate(-15deg);transform: rotate(-15deg);} 100% {-webkit-transform: rotate(15deg);-moz-transform: rotate(15deg);-ms-transform: rotate(15deg);transform: rotate(15deg);};
}

The offending semicolon seems to be the one right at the end, before the final brace '}'.

I believe this could also be the cause of this issue: https://github.com/madebysource/lesshat/issues/129

Thanks

JumpSlash

[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.