Vendors & Keyframes #131

Open
ghost opened this Issue Aug 30, 2012 · 2 comments

Projects

None yet

1 participant

@ghost
ghost commented Aug 30, 2012

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);
  }
}
Owner
tj commented Sep 1, 2012

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

Owner
tj commented Sep 1, 2012

though gzip will make this more or less irrelevant

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment