Added @Keyframe expansion support. Closes stylus#293

Readme.md

@@ -73,7 +73,7 @@ form input {
   - single-line and multi-line [comments](/LearnBoost/stylus/blob/master/docs/comments.md)
   - css [literal](/LearnBoost/stylus/blob/master/docs/literal.md)
   - character [escaping](/LearnBoost/stylus/blob/master/docs/escape.md)
-  - [@keyframes](/LearnBoost/stylus/blob/master/docs/keyframes.md) support
+  - [@keyframes](/LearnBoost/stylus/blob/master/docs/keyframes.md) support & expansion
   - [@font-face](/LearnBoost/stylus/blob/master/docs/font-face.md) support
   - [@media](/LearnBoost/stylus/blob/master/docs/media.md) support
   - Connect [Middleware](/LearnBoost/stylus/blob/master/docs/middleware.md)

docs/keyframes.md

@@ -50,3 +50,71 @@ yielding:
         }
 
       }
+
+## Expansion
+
+ By utilizing `@keyframes` your rules are automatically expanded to the vendor prefixes defined by the `vendors` variable, defaulting to `webkit moz official`. This means we can alter it at any time for the expansion to take effect immediately. For example consider the following
+
+    @keyframes foo {
+      from {
+        color: black
+      }
+      to {
+        color: white
+      }
+    }
+
+expands to our two default vendors and the official syntax:
+
+    @-moz-keyframes foo {
+      0% {
+        color: #000;
+      }
+
+      100% {
+        color: #fff;
+      }
+    }
+    @-webkit-keyframes foo {
+      0% {
+        color: #000;
+      }
+
+      100% {
+        color: #fff;
+      }
+    }
+    @keyframes foo {
+      0% {
+        color: #000;
+      }
+
+      100% {
+        color: #fff;
+      }
+    }
+
+if we wanted to limit to the official syntax only, simply alter `vendors`:
+
+    vendors = official
+
+    @keyframes foo {
+      from {
+        color: black
+      }
+      to {
+        color: white
+      }
+    }
+
+yielding:
+
+    @keyframes foo {
+      0% {
+        color: #000;
+      }
+
+      100% {
+        color: #fff;
+      }
+    }

lib/functions/index.styl

@@ -1,4 +1,6 @@
 
+vendors = moz webkit official
+
 // stringify the given arg
 
 -string(arg)

lib/lexer.js

@@ -444,7 +444,7 @@ Lexer.prototype = {
 
   atrule: function() {
     var captures;
-    if (captures = /^@(import|(-webkit-)?keyframes|charset|page) */.exec(this.str)) {
+    if (captures = /^@(import|(-\w+-)?keyframes|charset|page) */.exec(this.str)) {
       this.skip(captures);
       return new Token(captures[1]);
     }

lib/nodes/keyframes.js

@@ -22,6 +22,7 @@ var Keyframes = module.exports = function Keyframes(name){
   Node.call(this);
   this.name = name;
   this.frames = [];
+  this.prefix = 'official';
 };
 
 /**
@@ -45,6 +46,24 @@ Keyframes.prototype.push = function(pos, block){
   });
 };
 
+/**
+ * Return a clone of this node.
+ * 
+ * @return {Node}
+ * @api public
+ */
+
+Keyframes.prototype.clone = function(){
+  var clone = new Keyframes(this.name);
+  clone.lineno = this.lineno;
+  clone.prefix = this.prefix;
+  clone.frames = this.frames.map(function(node){
+    node.block = node.block.clone();
+    return node;
+  });
+  return clone;
+};
+
 /**
  * Return `@keyframes name`.
  *

lib/visitor/compiler.js

@@ -144,7 +144,11 @@ Compiler.prototype.visitBlock = function(block){
  */
 
 Compiler.prototype.visitKeyframes = function(node){
-  this.buf += '@-webkit-keyframes '
+  var prefix = 'official' == node.prefix
+    ? ''
+    : '-' + node.prefix + '-';
+
+  this.buf += '@' + prefix + 'keyframes '
     + this.visit(node.name)
     + (this.compress ? '{' : ' {');
   ++this.indents;

lib/visitor/evaluator.js

@@ -184,12 +184,23 @@ Evaluator.prototype.visitMedia = function(media){
  */
 
 Evaluator.prototype.visitKeyframes = function(keyframes){
+  if (keyframes.fabricated) return keyframes;
+
   keyframes.name = this.visit(keyframes.name).first.name;
   keyframes.frames = keyframes.frames.map(function(frame){
     frame.block = this.visit(frame.block);
     return frame;
   }, this);
-  return keyframes;
+  console.log(keyframes.prefix);
+
+  this.vendors.forEach(function(prefix){
+    var node = keyframes.clone();
+    node.prefix = prefix;
+    node.fabricated = true;
+    this.root.push(node);
+  }, this);
+
+  return nodes.null;
 };
 
 /**
@@ -1019,6 +1030,19 @@ Evaluator.prototype.__defineGetter__('closestBlock', function(){
   }
 });
 
+/**
+ * Return an array of vendor names.
+ *
+ * @return {Array}
+ * @api private
+ */
+
+Evaluator.prototype.__defineGetter__('vendors', function(){
+  return this.lookup('vendors').nodes.map(function(node){
+    return node.string;
+  });
+});
+
 /**
  * Return the current frame `Scope`.
  *

test/cases/css.keyframes.styl

@@ -1,4 +1,6 @@
 
+vendors = webkit
+
 @keyframes bouce {
   from {
     foo: bar;

test/cases/keyframes.fabrication.css

@@ -0,0 +1,18 @@
+@-moz-keyframes foo {
+  0% {
+    color: #000;
+  }
+
+  100% {
+    color: #fff;
+  }
+}
+@keyframes foo {
+  0% {
+    color: #000;
+  }
+
+  100% {
+    color: #fff;
+  }
+}

test/cases/keyframes.fabrication.defaults.css

@@ -0,0 +1,27 @@
+@-moz-keyframes foo {
+  0% {
+    color: #000;
+  }
+
+  100% {
+    color: #fff;
+  }
+}
+@-webkit-keyframes foo {
+  0% {
+    color: #000;
+  }
+
+  100% {
+    color: #fff;
+  }
+}
+@keyframes foo {
+  0% {
+    color: #000;
+  }
+
+  100% {
+    color: #fff;
+  }
+}

test/cases/keyframes.fabrication.defaults.styl

@@ -0,0 +1,9 @@
+
+@keyframes foo {
+  from {
+    color: black
+  }
+  to {
+    color: white
+  }
+}

test/cases/keyframes.fabrication.styl

@@ -0,0 +1,11 @@
+
+vendors = moz official
+
+@keyframes foo {
+  from {
+    color: black
+  }
+  to {
+    color: white
+  }
+}

test/cases/regression.248.compressed.styl

@@ -1,4 +1,6 @@
 
+vendors = webkit
+
 @keyframes colors
   0%
     background-color red

test/cases/regression.252.styl

@@ -1,4 +1,6 @@
 
+vendors = webkit
+
 $border-radius = 25px
 
 @keyframes movingBorder