search

stylus / nib

Stylus mixins, utilities, components, and gradient image generation
http://stylus.github.io/nib
MIT License
1.9k stars 250 forks source link

@keyframes generates invalid vendor prefix combinations #63

Open maerten opened 12 years ago

maerten commented 12 years ago 
@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 commented 12 years ago

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