Skip to content

Commit

Permalink
Expose vendor prefix for @Keyframes (fixes #29)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nzakas
nzakas committed Jul 23, 2012
1 parent 04cb62b commit 9a970e5
Show file tree
Hide file tree
Showing 9 changed files with 112 additions and 41 deletions.
24 changes: 16 additions & 8 deletions build/node-parserlib.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
/* Version v@VERSION@, Build time: 23-July-2012 09:55:09 */
/* Version v@VERSION@, Build time: 23-July-2012 10:50:53 */
var parserlib = {};
(function(){

Expand Down Expand Up @@ -931,7 +931,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
/* Version v@VERSION@, Build time: 23-July-2012 09:55:09 */
/* Version v@VERSION@, Build time: 23-July-2012 10:50:53 */
(function(){
var EventTarget = parserlib.util.EventTarget,
TokenStreamBase = parserlib.util.TokenStreamBase,
Expand Down Expand Up @@ -2999,9 +2999,15 @@ Parser.prototype = function(){
var tokenStream = this._tokenStream,
token,
tt,
name;
name,
prefix = "";

tokenStream.mustMatch(Tokens.KEYFRAMES_SYM);
token = tokenStream.token();
if (/^@\-([^\-]+)\-/.test(token.value)) {
prefix = RegExp.$1;
}

this._readWhitespace();
name = this._keyframe_name();

Expand All @@ -3011,8 +3017,9 @@ Parser.prototype = function(){
this.fire({
type: "startkeyframes",
name: name,
line: name.line,
col: name.col
prefix: prefix,
line: token.startLine,
col: token.startCol
});

this._readWhitespace();
Expand All @@ -3028,8 +3035,9 @@ Parser.prototype = function(){
this.fire({
type: "endkeyframes",
name: name,
line: name.line,
col: name.col
prefix: prefix,
line: token.startLine,
col: token.startCol
});

this._readWhitespace();
Expand Down Expand Up @@ -5556,7 +5564,7 @@ var Tokens = [
//{ name: "ATKEYWORD"},

//CSS3 animations
{ name: "KEYFRAMES_SYM", text: [ "@keyframes", "@-webkit-keyframes", "@-moz-keyframes", "@-ms-keyframes" ] },
{ name: "KEYFRAMES_SYM", text: [ "@keyframes", "@-webkit-keyframes", "@-moz-keyframes", "@-o-keyframes" ] },

//important symbol
{ name: "IMPORTANT_SYM"},
Expand Down
24 changes: 16 additions & 8 deletions build/npm/lib/node-parserlib.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
/* Version v@VERSION@, Build time: 23-July-2012 09:55:09 */
/* Version v@VERSION@, Build time: 23-July-2012 10:50:53 */
var parserlib = {};
(function(){

Expand Down Expand Up @@ -931,7 +931,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
/* Version v@VERSION@, Build time: 23-July-2012 09:55:09 */
/* Version v@VERSION@, Build time: 23-July-2012 10:50:53 */
(function(){
var EventTarget = parserlib.util.EventTarget,
TokenStreamBase = parserlib.util.TokenStreamBase,
Expand Down Expand Up @@ -2999,9 +2999,15 @@ Parser.prototype = function(){
var tokenStream = this._tokenStream,
token,
tt,
name;
name,
prefix = "";

tokenStream.mustMatch(Tokens.KEYFRAMES_SYM);
token = tokenStream.token();
if (/^@\-([^\-]+)\-/.test(token.value)) {
prefix = RegExp.$1;
}

this._readWhitespace();
name = this._keyframe_name();

Expand All @@ -3011,8 +3017,9 @@ Parser.prototype = function(){
this.fire({
type: "startkeyframes",
name: name,
line: name.line,
col: name.col
prefix: prefix,
line: token.startLine,
col: token.startCol
});

this._readWhitespace();
Expand All @@ -3028,8 +3035,9 @@ Parser.prototype = function(){
this.fire({
type: "endkeyframes",
name: name,
line: name.line,
col: name.col
prefix: prefix,
line: token.startLine,
col: token.startCol
});

this._readWhitespace();
Expand Down Expand Up @@ -5556,7 +5564,7 @@ var Tokens = [
//{ name: "ATKEYWORD"},

//CSS3 animations
{ name: "KEYFRAMES_SYM", text: [ "@keyframes", "@-webkit-keyframes", "@-moz-keyframes", "@-ms-keyframes" ] },
{ name: "KEYFRAMES_SYM", text: [ "@keyframes", "@-webkit-keyframes", "@-moz-keyframes", "@-o-keyframes" ] },

//important symbol
{ name: "IMPORTANT_SYM"},
Expand Down
2 changes: 1 addition & 1 deletion build/parserlib-core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
/* Version v@VERSION@, Build time: 23-July-2012 09:55:09 */
/* Version v@VERSION@, Build time: 23-July-2012 10:50:53 */
var parserlib = {};
(function(){

Expand Down
22 changes: 15 additions & 7 deletions build/parserlib-css.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
/* Version v@VERSION@, Build time: 23-July-2012 09:55:09 */
/* Version v@VERSION@, Build time: 23-July-2012 10:50:53 */
(function(){
var EventTarget = parserlib.util.EventTarget,
TokenStreamBase = parserlib.util.TokenStreamBase,
Expand Down Expand Up @@ -2089,9 +2089,15 @@ Parser.prototype = function(){
var tokenStream = this._tokenStream,
token,
tt,
name;
name,
prefix = "";

tokenStream.mustMatch(Tokens.KEYFRAMES_SYM);
token = tokenStream.token();
if (/^@\-([^\-]+)\-/.test(token.value)) {
prefix = RegExp.$1;
}

this._readWhitespace();
name = this._keyframe_name();

Expand All @@ -2101,8 +2107,9 @@ Parser.prototype = function(){
this.fire({
type: "startkeyframes",
name: name,
line: name.line,
col: name.col
prefix: prefix,
line: token.startLine,
col: token.startCol
});

this._readWhitespace();
Expand All @@ -2118,8 +2125,9 @@ Parser.prototype = function(){
this.fire({
type: "endkeyframes",
name: name,
line: name.line,
col: name.col
prefix: prefix,
line: token.startLine,
col: token.startCol
});

this._readWhitespace();
Expand Down Expand Up @@ -4646,7 +4654,7 @@ var Tokens = [
//{ name: "ATKEYWORD"},

//CSS3 animations
{ name: "KEYFRAMES_SYM", text: [ "@keyframes", "@-webkit-keyframes", "@-moz-keyframes", "@-ms-keyframes" ] },
{ name: "KEYFRAMES_SYM", text: [ "@keyframes", "@-webkit-keyframes", "@-moz-keyframes", "@-o-keyframes" ] },

//important symbol
{ name: "IMPORTANT_SYM"},
Expand Down
13 changes: 11 additions & 2 deletions build/parserlib-tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1368,9 +1368,18 @@
name: "Animation Parsing Tests",

testWebKitKeyFrames: function(){
var parser = new Parser({strict:true});
var parser = new Parser({strict:true}),
called = true;

parser.addListener("startkeyframes", function(event) {
Assert.areEqual("webkit", event.prefix);
Assert.areEqual("movingbox", event.name);
Assert.areEqual(1, event.line, "Line should be 1");
Assert.areEqual(1, event.col, "Column should be 1");
called = true;
});
var result = parser.parse("@-webkit-keyframes movingbox{0%{left:90%;}}");
Assert.isTrue(true); //just don't want an error
Assert.isTrue(called); //just don't want an error
},

testMozKeyFrames: function(){
Expand Down
24 changes: 16 additions & 8 deletions build/parserlib.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
/* Version v@VERSION@, Build time: 23-July-2012 09:55:09 */
/* Version v@VERSION@, Build time: 23-July-2012 10:50:53 */
var parserlib = {};
(function(){

Expand Down Expand Up @@ -931,7 +931,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
/* Version v@VERSION@, Build time: 23-July-2012 09:55:09 */
/* Version v@VERSION@, Build time: 23-July-2012 10:50:53 */
(function(){
var EventTarget = parserlib.util.EventTarget,
TokenStreamBase = parserlib.util.TokenStreamBase,
Expand Down Expand Up @@ -2999,9 +2999,15 @@ Parser.prototype = function(){
var tokenStream = this._tokenStream,
token,
tt,
name;
name,
prefix = "";

tokenStream.mustMatch(Tokens.KEYFRAMES_SYM);
token = tokenStream.token();
if (/^@\-([^\-]+)\-/.test(token.value)) {
prefix = RegExp.$1;
}

this._readWhitespace();
name = this._keyframe_name();

Expand All @@ -3011,8 +3017,9 @@ Parser.prototype = function(){
this.fire({
type: "startkeyframes",
name: name,
line: name.line,
col: name.col
prefix: prefix,
line: token.startLine,
col: token.startCol
});

this._readWhitespace();
Expand All @@ -3028,8 +3035,9 @@ Parser.prototype = function(){
this.fire({
type: "endkeyframes",
name: name,
line: name.line,
col: name.col
prefix: prefix,
line: token.startLine,
col: token.startCol
});

this._readWhitespace();
Expand Down Expand Up @@ -5556,7 +5564,7 @@ var Tokens = [
//{ name: "ATKEYWORD"},

//CSS3 animations
{ name: "KEYFRAMES_SYM", text: [ "@keyframes", "@-webkit-keyframes", "@-moz-keyframes", "@-ms-keyframes" ] },
{ name: "KEYFRAMES_SYM", text: [ "@keyframes", "@-webkit-keyframes", "@-moz-keyframes", "@-o-keyframes" ] },

//important symbol
{ name: "IMPORTANT_SYM"},
Expand Down
13 changes: 13 additions & 0 deletions docs/css.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,6 +229,19 @@ The `startmedia` event fires when `@media` is encountered and the `endmedia` eve
console.log("Ending page margin " + event.margin);
});

### startkeyframes and endkeyframes events

The `startkeyframes` event fires when `@keyframes` (or any vendor prefixed version) is encountered and the `endkeyframes` event fires just after the closing right brace (`}`) is encountered after `@keyframes`. The `event` object has one property, `name`, which is the name of the animation. Example:

parser.addListener("startkeyframes", function(event){
console.log("Starting animation definition " + event.name);
});


parser.addListener("endkeyframes", function(event){
console.log("Ending animation definition " + event.name);
});

### startrule and endrule events

The `startrule` event fires just after all selectors on a rule have been parsed and the `endrule` event fires just after the closing right brace (`}`) is encountered for the rule. The `event` object has one additional property, `selectors`, which is an array of `parserlib.css.Selector` objects. Example:
Expand Down
18 changes: 13 additions & 5 deletions src/css/Parser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1799,9 +1799,15 @@ Parser.prototype = function(){
var tokenStream = this._tokenStream,
token,
tt,
name;
name,
prefix = "";

tokenStream.mustMatch(Tokens.KEYFRAMES_SYM);
token = tokenStream.token();
if (/^@\-([^\-]+)\-/.test(token.value)) {
prefix = RegExp.$1;
}

this._readWhitespace();
name = this._keyframe_name();

Expand All @@ -1811,8 +1817,9 @@ Parser.prototype = function(){
this.fire({
type: "startkeyframes",
name: name,
line: name.line,
col: name.col
prefix: prefix,
line: token.startLine,
col: token.startCol
});

this._readWhitespace();
Expand All @@ -1828,8 +1835,9 @@ Parser.prototype = function(){
this.fire({
type: "endkeyframes",
name: name,
line: name.line,
col: name.col
prefix: prefix,
line: token.startLine,
col: token.startCol
});

this._readWhitespace();
Expand Down
13 changes: 11 additions & 2 deletions tests/css/Parser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1368,9 +1368,18 @@
name: "Animation Parsing Tests",

testWebKitKeyFrames: function(){
var parser = new Parser({strict:true});
var parser = new Parser({strict:true}),
called = true;

parser.addListener("startkeyframes", function(event) {
Assert.areEqual("webkit", event.prefix);
Assert.areEqual("movingbox", event.name);
Assert.areEqual(1, event.line, "Line should be 1");
Assert.areEqual(1, event.col, "Column should be 1");
called = true;
});
var result = parser.parse("@-webkit-keyframes movingbox{0%{left:90%;}}");
Assert.isTrue(true); //just don't want an error
Assert.isTrue(called); //just don't want an error
},

testMozKeyFrames: function(){
Expand Down

0 comments on commit 9a970e5

Please sign in to comment.