@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