Fix box model rule so there's not a warning when box-sizing is used (fixes #298)

Author: nzakas

src/cli/common.js

@@ -179,44 +179,72 @@ function cli(api){
             }
         }
         return exitCode;
-    }    
-
-    //-----------------------------------------------------------------------------
-    // Process command line
-    //-----------------------------------------------------------------------------
-
-    var args     = api.args,
-        argName,
-        parts,
-        arg      = args.shift(),
-        options  = {},
-        files    = [];
-
-    while(arg){
-        if (arg.indexOf("--") === 0){
-            argName = arg.substring(2);
-            options[argName] = true;
-            
-            if (argName.indexOf("=") > -1){
-                parts = argName.split("=");
-                options[parts[0]] = parts[1];
-            } else {
+    } 
+    
+    
+    function processArguments(args, options) {
+        var arg = args.shift(),
+            argName,
+            parts,
+            files = [];
+        
+        while(arg){
+            if (arg.indexOf("--") === 0){
+                argName = arg.substring(2);
                 options[argName] = true;
-            }
+                
+                if (argName.indexOf("=") > -1){
+                    parts = argName.split("=");
+                    options[parts[0]] = parts[1];
+                } else {
+                    options[argName] = true;
+                }
 
-        } else {
-            
-            //see if it's a directory or a file
-            if (api.isDirectory(arg)){
-                files = files.concat(api.getFiles(arg));
             } else {
-                files.push(arg);
+                
+                //see if it's a directory or a file
+                if (api.isDirectory(arg)){
+                    files = files.concat(api.getFiles(arg));
+                } else {
+                    files.push(arg);
+                }
             }
+            arg = args.shift();
+        }
+        
+        options.files = files;
+        return options;
+    }
+    
+    function readConfigFile(options) {
+        var data = api.readFile(api.getFullPath(".csslintrc"));
+        if (data) {           
+            options = processArguments(data.split(/[\s\n\r]+/m), options);
+            api.print("ignore = " + options.ignore);
+            api.print("errors = " + options.errors);
+            api.print("warnings = " + options.warnings);
         }
-        arg = args.shift();
+    
+        return options;
     }
+    
+    
+
+    //-----------------------------------------------------------------------------
+    // Process command line
+    //-----------------------------------------------------------------------------
+
+    var args     = api.args,
+        argCount = args.length,
+        options  = {};
+        
+    // first look for config file .csslintrc
+    options = readConfigFile(options);    
+    
+    // Command line arguments override config file
+    options = processArguments(args, options);
 
-    if (options.help || arguments.length === 0){
+    if (options.help || argCount === 0){
         outputHelp();
         api.quit(0);
     }
@@ -231,5 +259,5 @@ function cli(api){
         api.quit(0);
     }
 
-    api.quit(processFiles(files,options));
+    api.quit(processFiles(options.files,options));
 }

src/cli/rhino.js

@@ -7,7 +7,7 @@
 importPackage(java.io);
 
 cli({
-    args: arguments,
+    args: Array.prototype.concat.call(arguments),
     print: print,
     quit: quit,
 
@@ -43,5 +43,11 @@ cli({
         return (new File(filename)).getCanonicalPath();
     },
 
-    readFile: readFile
+    readFile: function(filename) {
+        try {
+            return readFile(filename);
+        } catch (ex) {
+            return "";
+        }
+    }
 });

src/rules/box-model.js

@@ -30,37 +30,42 @@ CSSLint.addRule({
                 "padding-bottom": 1,
                 "padding-top": 1
             },
-            properties;
+            properties,
+            boxSizing = false;
 
         function startRule(){
             properties = {};
+            boxSizing = false;
         }
 
         function endRule(){
             var prop, value;
-            if (properties.height){
-                for (prop in heightProperties){
-                    if (heightProperties.hasOwnProperty(prop) && properties[prop]){
-                        value = properties[prop].value;
-                        //special case for padding
-                        if (!(prop == "padding" && value.parts.length === 2 && value.parts[0].value === 0)){
-                            reporter.report("Using height with " + prop + " can sometimes make elements larger than you expect.", properties[prop].line, properties[prop].col, rule);
+            
+            if (!boxSizing) {
+                if (properties.height){
+                    for (prop in heightProperties){
+                        if (heightProperties.hasOwnProperty(prop) && properties[prop]){
+                            value = properties[prop].value;
+                            //special case for padding
+                            if (!(prop == "padding" && value.parts.length === 2 && value.parts[0].value === 0)){
+                                reporter.report("Using height with " + prop + " can sometimes make elements larger than you expect.", properties[prop].line, properties[prop].col, rule);
+                            }
                         }
                     }
                 }
-            }
 
-            if (properties.width){
-                for (prop in widthProperties){
-                    if (widthProperties.hasOwnProperty(prop) && properties[prop]){
-                        value = properties[prop].value;
-                        
-                        if (!(prop == "padding" && value.parts.length === 2 && value.parts[1].value === 0)){
-                            reporter.report("Using width with " + prop + " can sometimes make elements larger than you expect.", properties[prop].line, properties[prop].col, rule);
+                if (properties.width){
+                    for (prop in widthProperties){
+                        if (widthProperties.hasOwnProperty(prop) && properties[prop]){
+                            value = properties[prop].value;
+                            
+                            if (!(prop == "padding" && value.parts.length === 2 && value.parts[1].value === 0)){
+                                reporter.report("Using width with " + prop + " can sometimes make elements larger than you expect.", properties[prop].line, properties[prop].col, rule);
+                            }
                         }
                     }
-                }
-            }        
+                }   
+            }     
         }
 
         parser.addListener("startrule", startRule);
@@ -79,6 +84,8 @@ CSSLint.addRule({
             } else {
                 if (/^(width|height)/i.test(name) && /^(length|percentage)/.test(event.value.parts[0].type)){
                     properties[name] = 1;
+                } else if (name == "box-sizing") {
+                    boxSizing = true;
                 }
             }
 

tests/rules/box-model.js

@@ -80,6 +80,11 @@
             Assert.areEqual("Using width with border can sometimes make elements larger than you expect.", result.messages[0].message);
         },
 
+        "Using width and border with box-sizing should not result in a warning": function(){
+            var result = CSSLint.verify(".foo { box-sizing: border-box; width: 100px; border: 10px; }", { "box-model": 1 });
+            Assert.areEqual(0, result.messages.length);
+        },
+        
         "Using width and border-left should result in a warning": function(){
             var result = CSSLint.verify(".foo { width: 100px; border-left: 10px; }", { "box-model": 1 });
             Assert.areEqual(1, result.messages.length);