.keyframes gives incorrect output - additional semi-colon

[Nospamas]

Given input (from the docs):

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

Gives output (from my processor using lesshat.less version 2.0.15):

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 };
}

The problem is that final semi colon. It appears to me to be invalid css. Interestingly this does match what the docs say it will output, if you add a couple of line breaks.

[Nospamas]

I have done a little bit of investigation but have run out of time for the moment. The keyframes mixin/function itself returns:

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 }

so it would appear the prefix and suffix are added by the build system/wrapper which I haven't yet dug in to.

[petrbrzek]

Hey, I know about this problem. Unfortunately LESS CSS adds additional semi-colon. If you use some minifying app for LESS like Codekit or LESS app you should be fine. It strips all unused code.