Added support for arbitrary @-VENDOR-keyframes support

abdul · Aug 17, 2011 · 421bbd1 · 421bbd1
1 parent bc69cd9
commit 421bbd1
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 40 deletions.
diff --git a/lib/lexer.js b/lib/lexer.js
@@ -444,9 +444,12 @@ Lexer.prototype = {
 
   atrule: function() {
     var captures;
-    if (captures = /^@(import|(-\w+-)?keyframes|charset|page) */.exec(this.str)) {
+    if (captures = /^@(import|(?:-(\w+)-)?keyframes|charset|page) */.exec(this.str)) {
       this.skip(captures);
-      return new Token(captures[1]);
+      var vendor = captures[2]
+        , type = captures[1];
+      if (vendor) type = 'keyframes';
+      return new Token(type, vendor);
     }
   },
 

diff --git a/lib/nodes/keyframes.js b/lib/nodes/keyframes.js
@@ -12,17 +12,19 @@
 var Node = require('./node');
 
 /**
- * Initialize a new `Keyframes` with the given `name`.
+ * Initialize a new `Keyframes` with the given `name`,
+ * and optional vendor `prefix`.
  *
  * @param {String} name
+ * @param {String} prefix
  * @api public
  */
 
-var Keyframes = module.exports = function Keyframes(name){
+var Keyframes = module.exports = function Keyframes(name, prefix){
   Node.call(this);
   this.name = name;
   this.frames = [];
-  this.prefix = 'official';
+  this.prefix = prefix || 'official';
 };
 
 /**

diff --git a/lib/parser.js b/lib/parser.js
@@ -732,10 +732,10 @@ Parser.prototype = {
    */
 
   keyframes: function() {
-    this.accept('-webkit-keyframes') || this.expect('keyframes');
     var pos
       , _ = this.css
-      , keyframes = new nodes.Keyframes(this.id());
+      , tok = this.expect('keyframes')
+      , keyframes = new nodes.Keyframes(this.id(), tok.val);
 
     // css-style
     if (this.css = this.accept('{')) {

diff --git a/lib/visitor/evaluator.js b/lib/visitor/evaluator.js
@@ -191,13 +191,14 @@ Evaluator.prototype.visitKeyframes = function(keyframes){
     frame.block = this.visit(frame.block);
     return frame;
   }, this);
-  console.log(keyframes.prefix);
+
+  if ('official' != keyframes.prefix) return keyframes;
 
   this.vendors.forEach(function(prefix){
     var node = keyframes.clone();
     node.prefix = prefix;
     node.fabricated = true;
-    this.root.push(node);
+    this.currentBlock.push(node);
   }, this);
 
   return nodes.null;

diff --git a/test/cases/css.keyframes.css b/test/cases/css.keyframes.css
@@ -1,14 +1,19 @@
-@-webkit-keyframes bouce {
+@-webkit-keyframes something {
   0% {
-    foo: bar;
+    color: #f00;
   }
 
-  50% {
-    foo: bar;
+  100% {
+    color: #00f;
+  }
+}
+@-webkit-keyframes fade {
+  0% {
+    opacity: 0;
   }
 
   100% {
-    foo: bar;
+    opacity: 1;
   }
 }
 @-webkit-keyframes bouce {
@@ -37,21 +42,16 @@
     foo: bar;
   }
 }
-@-webkit-keyframes something {
+@-webkit-keyframes bouce {
   0% {
-    color: #f00;
+    foo: bar;
   }
 
-  100% {
-    color: #00f;
-  }
-}
-@-webkit-keyframes fade {
-  0% {
-    opacity: 0;
+  50% {
+    foo: bar;
   }
 
   100% {
-    opacity: 1;
+    foo: bar;
   }
-}
+}
diff --git a/test/cases/css.keyframes.styl b/test/cases/css.keyframes.styl
@@ -1,6 +1,22 @@
 
 vendors = webkit
 
+animate(name) {
+  @keyframes name {
+    from { color: red; }
+    to { color: blue; }
+  }
+}
+
+animate(something)
+
+@-webkit-keyframes fade
+  from
+    opacity 0
+  to
+    opacity 1
+
+
 @keyframes bouce {
   from {
     foo: bar;
@@ -30,18 +46,3 @@ vendors = webkit
 
   to { foo: bar; }
 }
-
-animate(name) {
-  @keyframes name {
-    from { color: red; }
-    to { color: blue; }
-  }
-}
-
-animate(something)
-
-@-webkit-keyframes fade
-  from
-    opacity 0
-  to
-    opacity 1
diff --git a/test/cases/keyframes.css b/test/cases/keyframes.css
@@ -0,0 +1,9 @@
+@-moz-keyframes foo {
+  0% {
+    color: #000;
+  }
+
+  100% {
+    color: #fff;
+  }
+}
diff --git a/test/cases/keyframes.styl b/test/cases/keyframes.styl
@@ -0,0 +1,6 @@
+
+@-moz-keyframes foo
+  from
+    color: black
+  to
+    color: white