@keyframes generates invalid vendor prefix combinations

[maerten]

@import 'nib'
@keyframes fadeinout
  0%
    opacity 1
  50%
    opacity 0
  100%
    opacity 1

results in

@-moz-keyframes fadeinout{0%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)} 50%{opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0)} 100%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)} }@-webkit-keyframes fadeinout{0%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)} 50%{opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0)} 100%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)} }@-o-keyframes fadeinout{0%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)} 50%{opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0)} 100%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)} }@-ms-keyframes fadeinout{0%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)} 50%{opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0)} 100%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)} }@keyframes fadeinout{0%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)} 50%{opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0)} 100%{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)} }

The filter:DXImageTransform is for IE6(?) compatibility, but even if IE6 would support the @-ms-keyframes property, it's a waste of space to put the IE specific prefixes within Webkit/Mozilla/Opera prefixes.

Same things happens with CSS transforms:

@import 'nib'
@keyframes fadeinout
  0%
    transform: translateX(10px)

Resulting in:

@-moz-keyframes fadeinout{0%{-webkit-transform:translateX(10px);-moz-transform:translateX(10px);transform:translateX(10px)} }@-webkit-keyframes fadeinout{0%{-webkit-transform:translateX(10px);-moz-transform:translateX(10px);transform:translateX(10px)} }@-o-keyframes fadeinout{0%{-webkit-transform:translateX(10px);-moz-transform:translateX(10px);transform:translateX(10px)} }@-ms-keyframes fadeinout{0%{-webkit-transform:translateX(10px);-moz-transform:translateX(10px);transform:translateX(10px)} }@keyframes fadeinout{0%{-webkit-transform:translateX(10px);-moz-transform:translateX(10px);transform:translateX(10px)} }

-moz-transforms inside @-webkit-keyframes, etc

Using node v0.6.8, stylus v0.22.6.

[tj]

yeah definitely, that's just a side-effect of the mixin having no clue where it is but we could easily expose something to provide that level of introspection