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)

Most upvoted comments