ruby_css_lint 0.0.1

data/csslint/src/rules/display-property-grouping.js

@@ -0,0 +1,117 @@
+/*
+ * Rule: Certain properties don't play well with certain display values. 
+ * - float should not be used with inline-block
+ * - height, width, margin-top, margin-bottom, float should not be used with inline
+ * - vertical-align should not be used with block
+ * - margin, float should not be used with table-*
+ */
+/*global CSSLint*/
+CSSLint.addRule({
+
+    //rule information
+    id: "display-property-grouping",
+    name: "Require properties appropriate for display",
+    desc: "Certain properties shouldn't be used with certain display property values.",
+    browsers: "All",
+
+    //initialization
+    init: function(parser, reporter){
+        var rule = this;
+
+        var propertiesToCheck = {
+                display: 1,
+                "float": "none",
+                height: 1,
+                width: 1,
+                margin: 1,
+                "margin-left": 1,
+                "margin-right": 1,
+                "margin-bottom": 1,
+                "margin-top": 1,
+                padding: 1,
+                "padding-left": 1,
+                "padding-right": 1,
+                "padding-bottom": 1,
+                "padding-top": 1,
+                "vertical-align": 1
+            },
+            properties;
+
+        function reportProperty(name, display, msg){
+            if (properties[name]){
+                if (typeof propertiesToCheck[name] != "string" || properties[name].value.toLowerCase() != propertiesToCheck[name]){
+                    reporter.report(msg || name + " can't be used with display: " + display + ".", properties[name].line, properties[name].col, rule);
+                }
+            }
+        }
+        
+        function startRule(){
+            properties = {};
+        }
+
+        function endRule(){
+
+            var display = properties.display ? properties.display.value : null;
+            if (display){
+                switch(display){
+
+                    case "inline":
+                        //height, width, margin-top, margin-bottom, float should not be used with inline
+                        reportProperty("height", display);
+                        reportProperty("width", display);
+                        reportProperty("margin", display);
+                        reportProperty("margin-top", display);
+                        reportProperty("margin-bottom", display);              
+                        reportProperty("float", display, "display:inline has no effect on floated elements (but may be used to fix the IE6 double-margin bug).");
+                        break;
+
+                    case "block":
+                        //vertical-align should not be used with block
+                        reportProperty("vertical-align", display);
+                        break;
+
+                    case "inline-block":
+                        //float should not be used with inline-block
+                        reportProperty("float", display);
+                        break;
+
+                    default:
+                        //margin, float should not be used with table
+                        if (display.indexOf("table-") === 0){
+                            reportProperty("margin", display);
+                            reportProperty("margin-left", display);
+                            reportProperty("margin-right", display);
+                            reportProperty("margin-top", display);
+                            reportProperty("margin-bottom", display);
+                            reportProperty("float", display);
+                        }
+
+                        //otherwise do nothing
+                }
+            }
+          
+        }
+
+        parser.addListener("startrule", startRule);
+        parser.addListener("startfontface", startRule);
+        parser.addListener("startkeyframerule", startRule);
+        parser.addListener("startpagemargin", startRule);
+        parser.addListener("startpage", startRule);
+
+        parser.addListener("property", function(event){
+            var name = event.property.text.toLowerCase();
+
+            if (propertiesToCheck[name]){
+                properties[name] = { value: event.value.text, line: event.property.line, col: event.property.col };                    
+            }
+        });
+
+        parser.addListener("endrule", endRule);
+        parser.addListener("endfontface", endRule);
+        parser.addListener("endkeyframerule", endRule);
+        parser.addListener("endpagemargin", endRule);
+        parser.addListener("endpage", endRule);
+
+    }
+
+});

data/csslint/src/rules/duplicate-background-images.js

@@ -0,0 +1,37 @@
+/*
+ * Rule: Disallow duplicate background-images (using url).
+ */
+/*global CSSLint*/
+CSSLint.addRule({
+
+    //rule information
+    id: "duplicate-background-images",
+    name: "Disallow duplicate background images",
+    desc: "Every background-image should be unique. Use a common class for e.g. sprites.",
+    browsers: "All",
+
+    //initialization
+    init: function(parser, reporter){
+        var rule = this,
+            stack = {};
+
+        parser.addListener("property", function(event){
+            var name = event.property.text,
+                value = event.value,
+                i, len;
+
+            if (name.match(/background/i)) {
+                for (i=0, len=value.parts.length; i < len; i++) {
+                    if (value.parts[i].type == 'uri') {
+                        if (typeof stack[value.parts[i].uri] === 'undefined') {
+                            stack[value.parts[i].uri] = event;
+                        }
+                        else {
+                            reporter.report("Background image '" + value.parts[i].uri + "' was used multiple times, first declared at line " + stack[value.parts[i].uri].line + ", col " + stack[value.parts[i].uri].col + ".", event.line, event.col, rule);
+                        }
+                    }
+                }
+            }
+        });
+    }
+});

data/csslint/src/rules/duplicate-properties.js

@@ -0,0 +1,46 @@
+/*
+ * Rule: Duplicate properties must appear one after the other. If an already-defined
+ * property appears somewhere else in the rule, then it's likely an error.
+ */
+/*global CSSLint*/
+CSSLint.addRule({
+
+    //rule information
+    id: "duplicate-properties",
+    name: "Disallow duplicate properties",
+    desc: "Duplicate properties must appear one after the other.",
+    browsers: "All",
+
+    //initialization
+    init: function(parser, reporter){
+        var rule = this,
+            properties,
+            lastProperty;            
+            
+        function startRule(event){
+            properties = {};        
+        }
+        
+        parser.addListener("startrule", startRule);
+        parser.addListener("startfontface", startRule);
+        parser.addListener("startpage", startRule);
+        parser.addListener("startpagemargin", startRule);
+        parser.addListener("startkeyframerule", startRule);        
+        
+        parser.addListener("property", function(event){
+            var property = event.property,
+                name = property.text.toLowerCase();
+            
+            if (properties[name] && (lastProperty != name || properties[name] == event.value.text)){
+                reporter.report("Duplicate property '" + event.property + "' found.", event.line, event.col, rule);
+            }
+            
+            properties[name] = event.value.text;
+            lastProperty = name;
+                        
+        });
+            
+        
+    }
+
+});

data/csslint/src/rules/empty-rules.js

@@ -0,0 +1,34 @@
+/*
+ * Rule: Style rules without any properties defined should be removed.
+ */
+/*global CSSLint*/
+CSSLint.addRule({
+
+    //rule information
+    id: "empty-rules",
+    name: "Disallow empty rules",
+    desc: "Rules without any properties specified should be removed.",
+    browsers: "All",
+
+    //initialization
+    init: function(parser, reporter){
+        var rule = this,
+            count = 0;
+
+        parser.addListener("startrule", function(){
+            count=0;
+        });
+
+        parser.addListener("property", function(){
+            count++;
+        });
+
+        parser.addListener("endrule", function(event){
+            var selectors = event.selectors;
+            if (count === 0){
+                reporter.report("Rule is empty.", selectors[0].line, selectors[0].col, rule);
+            }
+        });
+    }
+
+});

data/csslint/src/rules/errors.js

@@ -0,0 +1,23 @@
+/*
+ * Rule: There should be no syntax errors. (Duh.)
+ */
+/*global CSSLint*/
+CSSLint.addRule({
+
+    //rule information
+    id: "errors",
+    name: "Parsing Errors",
+    desc: "This rule looks for recoverable syntax errors.",
+    browsers: "All",
+
+    //initialization
+    init: function(parser, reporter){
+        var rule = this;
+
+        parser.addListener("error", function(event){
+            reporter.error(event.message, event.line, event.col, rule);
+        });
+
+    }
+
+});

data/csslint/src/rules/fallback-colors.js

@@ -0,0 +1,67 @@
+
+/*global CSSLint*/
+CSSLint.addRule({
+
+    //rule information
+    id: "fallback-colors",
+    name: "Require fallback colors",
+    desc: "For older browsers that don't support RGBA, HSL, or HSLA, provide a fallback color.",
+    browsers: "IE6,IE7,IE8",
+
+    //initialization
+    init: function(parser, reporter){
+        var rule = this,
+            lastProperty,
+            propertiesToCheck = {
+                color: 1,
+                background: 1,
+                "background-color": 1                
+            },
+            properties;
+        
+        function startRule(event){
+            properties = {};    
+            lastProperty = null;    
+        }
+        
+        parser.addListener("startrule", startRule);
+        parser.addListener("startfontface", startRule);
+        parser.addListener("startpage", startRule);
+        parser.addListener("startpagemargin", startRule);
+        parser.addListener("startkeyframerule", startRule);        
+        
+        parser.addListener("property", function(event){
+            var property = event.property,
+                name = property.text.toLowerCase(),
+                parts = event.value.parts,
+                i = 0, 
+                colorType = "",
+                len = parts.length;                
+                        
+            if(propertiesToCheck[name]){
+                while(i < len){
+                    if (parts[i].type == "color"){
+                        if ("alpha" in parts[i] || "hue" in parts[i]){
+                            
+                            if (/([^\)]+)\(/.test(parts[i])){
+                                colorType = RegExp.$1.toUpperCase();
+                            }
+                            
+                            if (!lastProperty || (lastProperty.property.text.toLowerCase() != name || lastProperty.colorType != "compat")){
+                                reporter.report("Fallback " + name + " (hex or RGB) should precede " + colorType + " " + name + ".", event.line, event.col, rule);
+                            }
+                        } else {
+                            event.colorType = "compat";
+                        }
+                    }
+                    
+                    i++;
+                }
+            }
+
+            lastProperty = event;
+        });        
+         
+    }
+
+});

data/csslint/src/rules/floats.js

@@ -0,0 +1,36 @@
+/*
+ * Rule: You shouldn't use more than 10 floats. If you do, there's probably
+ * room for some abstraction.
+ */
+/*global CSSLint*/
+CSSLint.addRule({
+
+    //rule information
+    id: "floats",
+    name: "Disallow too many floats",
+    desc: "This rule tests if the float property is used too many times",
+    browsers: "All",
+
+    //initialization
+    init: function(parser, reporter){
+        var rule = this;
+        var count = 0;
+
+        //count how many times "float" is used
+        parser.addListener("property", function(event){
+            if (event.property.text.toLowerCase() == "float" &&
+                    event.value.text.toLowerCase() != "none"){
+                count++;
+            }
+        });
+
+        //report the results
+        parser.addListener("endstylesheet", function(){
+            reporter.stat("floats", count);
+            if (count >= 10){
+                reporter.rollupWarn("Too many floats (" + count + "), you're probably using them for layout. Consider using a grid system instead.", rule);
+            }
+        });
+    }
+
+});

data/csslint/src/rules/font-faces.js

@@ -0,0 +1,30 @@
+/*
+ * Rule: Avoid too many @font-face declarations in the same stylesheet.
+ */
+/*global CSSLint*/
+CSSLint.addRule({
+
+    //rule information
+    id: "font-faces",
+    name: "Don't use too many web fonts",
+    desc: "Too many different web fonts in the same stylesheet.",
+    browsers: "All",
+
+    //initialization
+    init: function(parser, reporter){
+        var rule = this,
+            count = 0;
+
+
+        parser.addListener("startfontface", function(){
+            count++;
+        });
+
+        parser.addListener("endstylesheet", function(){
+            if (count > 5){
+                reporter.rollupWarn("Too many @font-face declarations (" + count + ").", rule);
+            }
+        });
+    }
+
+});

data/csslint/src/rules/font-sizes.js

@@ -0,0 +1,35 @@
+/*
+ * Rule: You shouldn't need more than 9 font-size declarations.
+ */
+
+/*global CSSLint*/
+CSSLint.addRule({
+
+    //rule information
+    id: "font-sizes",
+    name: "Disallow too many font sizes",
+    desc: "Checks the number of font-size declarations.",
+    browsers: "All",
+
+    //initialization
+    init: function(parser, reporter){
+        var rule = this,
+            count = 0;
+
+        //check for use of "font-size"
+        parser.addListener("property", function(event){
+            if (event.property == "font-size"){
+                count++;
+            }
+        });
+
+        //report the results
+        parser.addListener("endstylesheet", function(){
+            reporter.stat("font-sizes", count);
+            if (count >= 10){
+                reporter.rollupWarn("Too many font-size declarations (" + count + "), abstraction needed.", rule);
+            }
+        });
+    }
+
+});

data/csslint/src/rules/gradients.js

@@ -0,0 +1,69 @@
+/*
+ * Rule: When using a vendor-prefixed gradient, make sure to use them all.
+ */
+/*global CSSLint*/
+CSSLint.addRule({
+
+    //rule information
+    id: "gradients",
+    name: "Require all gradient definitions",
+    desc: "When using a vendor-prefixed gradient, make sure to use them all.",
+    browsers: "All",
+
+    //initialization
+    init: function(parser, reporter){
+        var rule = this,
+            gradients;
+
+        parser.addListener("startrule", function(){
+            gradients = {
+                moz: 0,
+                webkit: 0,
+                oldWebkit: 0,
+                ms: 0,
+                o: 0
+            };
+        });
+
+        parser.addListener("property", function(event){
+
+            if (/\-(moz|ms|o|webkit)(?:\-(?:linear|radial))\-gradient/i.test(event.value)){
+                gradients[RegExp.$1] = 1;
+            } else if (/\-webkit\-gradient/i.test(event.value)){
+                gradients.oldWebkit = 1;
+            }
+
+        });
+
+        parser.addListener("endrule", function(event){
+            var missing = [];
+
+            if (!gradients.moz){
+                missing.push("Firefox 3.6+");
+            }
+
+            if (!gradients.webkit){
+                missing.push("Webkit (Safari 5+, Chrome)");
+            }
+            
+            if (!gradients.oldWebkit){
+                missing.push("Old Webkit (Safari 4+, Chrome)");
+            }
+
+            if (!gradients.ms){
+                missing.push("Internet Explorer 10+");
+            }
+
+            if (!gradients.o){
+                missing.push("Opera 11.1+");
+            }
+
+            if (missing.length && missing.length < 5){            
+                reporter.report("Missing vendor-prefixed CSS gradients for " + missing.join(", ") + ".", event.selectors[0].line, event.selectors[0].col, rule); 
+            }
+
+        });
+
+    }
+
+});