Vendors & Keyframes

[ghost]

The basic example:

@keyframes test
  0%
    transform scale(10)
  100%
    transform scale(1)

should be

@-moz-keyframes test {
  0% {
    -moz-transform: scale(10);
  }

  100% {
    -moz-transform: scale(1);
  }
}
@-webkit-keyframes test {
  0% {
    -webkit-transform: scale(10);
  }

  100% {
    -webkit-transform: scale(1);
  }
}
@-o-keyframes test {
  0% {
    -o-transform: scale(10);
  }

  100% {
    -o-transform: scale(1);
  }
}
@-ms-keyframes test {
  0% {
    -ms-transform: scale(10);
  }

  100% {
    -ms-transform: scale(1);
  }
}
@keyframes test {
  0% {
    transform: scale(10);
  }

  100% {
    transform: scale(1);
  }
}

but transformed to

@-moz-keyframes test {
  0% {
    -webkit-transform: scale(10);
    -moz-transform: scale(10);
    -o-transform: scale(10);
    -ms-transform: scale(10);
    transform: scale(10);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes test {
  0% {
    -webkit-transform: scale(10);
    -moz-transform: scale(10);
    -o-transform: scale(10);
    -ms-transform: scale(10);
    transform: scale(10);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-o-keyframes test {
  0% {
    -webkit-transform: scale(10);
    -moz-transform: scale(10);
    -o-transform: scale(10);
    -ms-transform: scale(10);
    transform: scale(10);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-ms-keyframes test {
  0% {
    -webkit-transform: scale(10);
    -moz-transform: scale(10);
    -o-transform: scale(10);
    -ms-transform: scale(10);
    transform: scale(10);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes test {
  0% {
    -webkit-transform: scale(10);
    -moz-transform: scale(10);
    -o-transform: scale(10);
    -ms-transform: scale(10);
    transform: scale(10);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

[tj]

yeah we need some better introspection capabilities there. I've done this correctly with https://github.com/visionmedia/rework but we can definitely do similar with stylus, just gotta expose a few vars

[tj]

though gzip will make this more or less irrelevant