Skip to content

Commit

Permalink
Fixes to compatible vendor prefixes rule (fixes #285 and fixes #286)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nzakas
nzakas committed Jul 23, 2012
1 parent 176433a commit e14628b
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 25 deletions.
24 changes: 16 additions & 8 deletions lib/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 v0.1.8, Build time: 23-July-2012 09:55:09 */
/* Version v0.1.9, Build time: 23-July-2012 10:52:31 */
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 v0.1.8, Build time: 23-July-2012 09:55:09 */
/* Version v0.1.9, Build time: 23-July-2012 10:52:31 */
(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" ] },

This comment has been minimized.

Sign in to view

Copy link
@diggabyte

diggabyte Aug 8, 2012

This change introduced a new error:
Error - Unknown @ rule: @-ms-keyframes

Looks like @-ms-keyframes was overwritten with @-o-keyframes here instead of being appended.

This comment has been minimized.

Sign in to view

Copy link
@kristerkari

kristerkari Aug 12, 2012

@diggabyte IE10 is using the unprefixed version of CSS animations (@keyframes), so there is no need for @-ms-keyframes any more.

Sources:
http://blogs.msdn.com/b/ie/archive/2012/06/06/moving-the-stable-web-forward-in-ie10-release-preview.aspx
http://caniuse.com/css-animation

//important symbol
{ name: "IMPORTANT_SYM"},
Expand Down
27 changes: 21 additions & 6 deletions src/rules/compatible-vendor-prefixes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ CSSLint.addRule({
prefixed,
i,
len,
inKeyFrame = false,
arrayPush = Array.prototype.push,
applyTo = [];

Expand Down Expand Up @@ -74,11 +75,11 @@ CSSLint.addRule({
"text-size-adjust" : "webkit ms",
"transform" : "webkit moz ms o",
"transform-origin" : "webkit moz ms o",
"transition" : "webkit moz o ms",
"transition-delay" : "webkit moz o ms",
"transition-duration" : "webkit moz o ms",
"transition-property" : "webkit moz o ms",
"transition-timing-function" : "webkit moz o ms",
"transition" : "webkit moz o",
"transition-delay" : "webkit moz o",
"transition-duration" : "webkit moz o",
"transition-property" : "webkit moz o",
"transition-timing-function" : "webkit moz o",
"user-modify" : "webkit moz",
"user-select" : "webkit moz ms",
"word-break" : "epub ms",
Expand All @@ -97,14 +98,28 @@ CSSLint.addRule({
arrayPush.apply(applyTo, variations);
}
}

parser.addListener("startrule", function () {
properties = [];
});

parser.addListener("startkeyframes", function (event) {
inKeyFrame = event.prefix || true;
});

parser.addListener("endkeyframes", function (event) {
inKeyFrame = false;
});

parser.addListener("property", function (event) {
var name = event.property;
if (CSSLint.Util.indexOf(applyTo, name.text) > -1) {
properties.push(name);

// e.g., -moz-transform is okay to be alone in @-moz-keyframes
if (!inKeyFrame || typeof inKeyFrame != "string" ||
name.text.indexOf("-" + inKeyFrame + "-") !== 0) {
properties.push(name);
}
}
});

Expand Down
22 changes: 11 additions & 11 deletions tests/rules/compatible-vendor-prefixes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,21 +16,16 @@
Assert.areEqual(1, result.messages[0].line);
},

"Using -webkit-transition and -moz-transition should warn to also include -o-transition and -ms-transition.": function(){
"Using -webkit-transition and -moz-transition should warn to also include -o-transition.": function() {
var result = CSSLint.verify("h1 { -webkit-transition: height 20px 1s; -moz-transition: height 20px 1s; }", { "compatible-vendor-prefixes": 1 });
Assert.areEqual(2, result.messages.length);
Assert.areEqual(1, result.messages.length);
Assert.areEqual("warning", result.messages[0].type);
Assert.areEqual("The property -o-transition is compatible with -webkit-transition and -moz-transition and should be included as well.", result.messages[0].message);
Assert.areEqual(6, result.messages[0].col);
Assert.areEqual(1, result.messages[0].line);
Assert.areEqual("warning", result.messages[1].type);
Assert.areEqual("The property -ms-transition is compatible with -webkit-transition and -moz-transition and should be included as well.", result.messages[1].message);
Assert.areEqual(6, result.messages[1].col);
Assert.areEqual(1, result.messages[1].line);

Assert.areEqual(1, result.messages[0].line);
},

"Using -webkit-transform should warn to also include -moz-transform, -ms-transform, and -o-transform.": function(){
"Using -webkit-transform should warn to also include -moz-transform, -ms-transform, and -o-transform.": function() {
var result = CSSLint.verify("div.box { -webkit-transform: translate(50px, 100px); }", { "compatible-vendor-prefixes": 3 });
Assert.areEqual(3, result.messages.length);
Assert.areEqual("warning", result.messages[0].type);
Expand All @@ -41,13 +36,18 @@
Assert.areEqual("The property -o-transform is compatible with -webkit-transform and should be included as well.", result.messages[2].message);
},

"Using -webkit-transform inside of an @-webkit- block shouldn't cause a warning": function(){
var result = CSSLint.verify("@-webkit-keyframes spin {0%{ -webkit-transform: rotateX(-10deg) rotateY(0deg); } 100%{ -webkit-transform: rotateX(-10deg) rotateY(-360deg); } }", { "compatible-vendor-prefixes": 1 });
Assert.areEqual(0, result.messages.length);
},

"Using all compatible vendor prefixes for animation should be allowed with no warnings.": function(){
var result = CSSLint.verify(".next:focus { -moz-animation: 'diagonal-slide' 5s 10; -webkit-animation: 'diagonal-slide' 5s 10; -ms-animation: 'diagonal-slide' 5s 10; }", { "compatible-vendor-prefixes": 0 });
var result = CSSLint.verify(".next:focus { -moz-animation: 'diagonal-slide' 5s 10; -webkit-animation: 'diagonal-slide' 5s 10; -ms-animation: 'diagonal-slide' 5s 10; }", { "compatible-vendor-prefixes": 1 });
Assert.areEqual(0, result.messages.length);
},

"Using box-shadow with no vendor prefixes should be allowed with no warnings.": function(){
var result = CSSLint.verify("h1 { box-shadow: 5px 5px 5px #ccc; }", { "compatible-vendor-prefixes": 0 });
var result = CSSLint.verify("h1 { box-shadow: 5px 5px 5px #ccc; }", { "compatible-vendor-prefixes": 1 });
Assert.areEqual(0, result.messages.length);
}

Expand Down

0 comments on commit e14628b

Please sign in to comment.