Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

un-anchored :hover issue #387

Open
wants to merge 17 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions non-link-hover
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/*
* Rule: When using a vendor-prefixed gradient, make sure to use them all.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please update this text.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oops! Edited to describe the :hover rule

*/
/*global CSSLint*/
CSSLint.addRule({

//rule information
id: "non-link-hover",
name: "Non-Link Hover",
desc: "Using :hover pseudo-selector to non-link elements is known to be slow.",
browsers: "IE",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be IE7, IE8

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated affected browsers to IE7, IE8


//initialization
init: function(parser, reporter){
var rule = this;


parser.addListener("startrule", function(event){
var selectors = event.selectors,
selector,
part,
modifier,
i, j, k;

for (i=0; i < selectors.length; i++){
selector = selectors[i];

part = selector.parts[selector.parts.length-1];

if (part.modifiers.length-1 !== -1){
if (part.modifiers[part.modifiers.length-1].text === ":hover" && (part.elementName == null || part.elementName != "a")){
reporter.warn(rule.desc, part.line, part.col, rule);
}
}

}
});
}

});
40 changes: 40 additions & 0 deletions src/rules/non-link-hover
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/*
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this file in two places?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i have removed the extra non-link-hover which was at root of csslint-1. Sorry i am very new to Git Hub so I am making a lot of newbie mistakes

* Rule: When using a vendor-prefixed gradient, make sure to use them all.
*/
/*global CSSLint*/
CSSLint.addRule({

//rule information
id: "non-link-hover",
name: "Non-Link Hover",
desc: "Using :hover pseudo-selector to non-link elements is known to be slow.",
browsers: "IE",

//initialization
init: function(parser, reporter){
var rule = this;


parser.addListener("startrule", function(event){
var selectors = event.selectors,
selector,
part,
modifier,
i, j, k;

for (i=0; i < selectors.length; i++){
selector = selectors[i];

part = selector.parts[selector.parts.length-1];

if (part.modifiers.length-1 !== -1){
if (part.modifiers[part.modifiers.length-1].text === ":hover" && (part.elementName == null || part.elementName != "a")){
reporter.warn(rule.desc, part.line, part.col, rule);
}
}

}
});
}

});
19 changes: 19 additions & 0 deletions tests/rules/non-link-hover
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
(function(){

/*global YUITest, CSSLint*/
var Assert = YUITest.Assert;

YUITest.TestRunner.add(new YUITest.TestCase({
name: ":hover; Warning",
"using :hover on non-link ements should result in an warning": function(){
var result = CSSLint.verify("li:hover {color:blue;} .foo:hover {float:left;} #foo:hover {clear:both;} div.faa :hover {font-size:1px;}", { "non-link-hover": 4 });
Assert.areEqual(4, result.messages.length);
Assert.areEqual("warn", result.messages[0].type);
Assert.areEqual("Using :hover pseudo-selector to non-link elements is known to be slow.", result.messages[0].message);
},
"using :hover on link ements should not result in any remark": function(){
var result = CSSLint.verify("a:hover {color:red;} li a:hover, div a:hover {color:red;}", { "non-link-hover": 0 });
Assert.areEqual(0, result.messages.length);
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's add a couple tests with more complicated selectors:

:hover {}
div ul li :hover {}
div:hover a span span{}

}));
})();