lesshat: Incorrect keyframes syntax breaks Safari9's CSS parser
There’s a problem in Safari 9 now, that CSS generated by LESS+LESSHat breaks the entire parser if the keyframes()
function was used.
This is the rule that causes this issue:
.content h1:target lesshat-selector {
-lh-property: 0; }
@-webkit-keyframes targetLinkOpacity{ 0%{ opacity: 0 } 100%{ opacity: 1 }}
@-moz-keyframes targetLinkOpacity{ 0%{ opacity: 0 } 100%{ opacity: 1 }}
@-o-keyframes targetLinkOpacity{ 0%{ opacity: 0 } 100%{ opacity: 1 }}
@keyframes targetLinkOpacity{ 0%{ opacity: 0 } 100%{ opacity: 1 };
}
It’s generated from:
...
&:target {
.keyframes( ~'targetLinkOpacity, 0%{ opacity: 0 } 100%{ opacity: 1 }' );
}
The problem is in the semicolon at the end of the last keyframe. After manually removing it everything is working fine.
This is a critical issue because Safari totally gives up on parsing once it encounters a syntax issue. I guess that this issue is related to #93. That semicolon seems to terminate the -lh-property: 0...
value that LESS Hat uses to workaround the inability to generate keyframes in LESS.
About this issue
- Original URL
- State: closed
- Created 9 years ago
- Reactions: 1
- Comments: 20 (1 by maintainers)
+1