Merge pull request #3 from stefmikhail/master

Changed module from `sys` to `util` and the variable name to match, to remove error notification in bundle output

Author: jcfant

README.md

@@ -1,10 +1,24 @@
 CSSLint TextMate Bundle
 
-Forked orignally from [JSHint TM Bundle](https://github.com/fgnass/jshint.tmbundle) and updated to use CSSLint
+Forked from jcfant's [CSSLint Textmate Bundle](https://github.com/jcfant/csslint.tmbundle), who originally forked it from [JSHint TM Bundle](https://github.com/fgnass/jshint.tmbundle) and updated it to use CSSLint.
 
 TextMate bundle for [CSSLint](http://csslint.net/)
 
-![Screenshot](https://github.com/jcfant/images/raw/master/CSSLintTMBundle.jpg)
+
+
+This Fork differs in several ways from jcfant's:
+
+* First, the window stays open after double clicking on an entry. This way, even though you will be brought to the line in your document the entry is referring to, you will still be able to return to the lint window to see the next entry.
+* Second, the window is a set 800px by 800px making it easier to manage.
+* Third, I preferred the old design of the window, so I merged the two styles into what IMHO is a much better lint window: 
+  * For errors, the background is now red.
+	* The line number and column number of the error is displayed.
+	* An underline is placed under the character in the code preview where the issue is found.
+	* And a description of the rule in question is also displayed.
+
+
+![Screenshot](https://github.com/stefmikhail/csslint.tmbundle/raw/master/cssLintTMBundle.png)
+
 
 Features:
 
@@ -15,17 +29,18 @@ Features:
 
 ## Installation
 
-Download the [zip file](http://github.com/jcfant/csslint.tmbundle/zipball/master) and rename the
-extracted folder to `csslint.tmbundle`. Double-click.
+	cd ~/Library/Application\ Support/TextMate/Bundles
+	git clone git://github.com/stefmikhail/csslint.tmbundle.git "CSSLint.tmbundle"
+	osascript -e 'tell app "TextMate" to reload bundles'
+
 
 ## Prerequisites
 
 You need [Node.js](http://nodejs.org/) and TextMate, that's all.
 
-If you don't have Node.js installed on your system you can also use [Pierre Bertet's fork](https://github.com/bpierre/jshint.tmbundle) which uses [WebKit's JavaScriptCore](http://trac.webkit.org/wiki/JSC) instead.
-
 This bundle uses `#!/usr/local/bin/node` to launch the node process. If you get a *node - not found* error,the `PATH` variable is probably not setup in TextMate.
 
 ## Contributors
 
 * [JC Fant](http://www.scriptble.com)
+* Stefan Melnychenko

Support/csslint-tm.js

@@ -2,7 +2,7 @@
 var env = process.env || process.ENV,
 	http = require('https'),
 	fs = require('fs'),
-	sys = require('sys'),
+	util = require('util'),
 	port = "443",
 	stdout  = process.stdout,
 	showVersionMessage = false,
@@ -55,7 +55,7 @@ function versionsMatch(tmContents, tempContents, callback){
 		cssTMContents = String(cssTMContents).replace(/^\s+|\s+$/, '');
 		if (error)
 			callback(false);
-			
+
 		fs.stat(cssTempFile, function(error, stats){
 			if (error){
 				callback(false);
@@ -97,7 +97,7 @@ function hasLatestJS(callback){
 			getLatest(callback, cssPath + cssFile, cssLintFile);
 			return;
 		}
-		
+
 		var aDate = Date.parse(stats.atime);
 		var mDate = Date.parse(stats.mtime);
 		var lDate = aDate < mDate ? aDate : mDate;
@@ -112,18 +112,18 @@ function hasLatestJS(callback){
 function hasLatestVersion(callback){
 	fs.stat(cssTMFile, function(error, stats){
 		if (error){
-			//sys.puts(error);
+			//util.puts(error);
 			versionUpdate.callback = callback;
 			getLatest(version, cssPath + cssVersion,  cssTempFile);
 			return;
 		}
-		
+
 		versionUpdate.callback = callback;
 		fs.stat(cssTempFile, function(error){
 			if (error){
 				getLatest(version, cssPath + cssVersion,  cssTempFile);
 			}
-			
+
 			var aDate = Date.parse(stats.atime);
 			var mDate = Date.parse(stats.mtime);
 			var lDate = aDate < mDate ? aDate : mDate;
@@ -143,24 +143,24 @@ module.exports = function(options) {
 		hasLatestJS(function(error){
 			if (options === undefined)
 				options = {};
-			
+
 			var file = env.TM_FILEPATH;
 			var input = fs.readFileSync(file, 'utf8');
 			var CSSLint = require(cssLintFile).CSSLint;
 
 			var result = CSSLint.verify(input);
 			var messages = result.messages;
-		
+
 			var body = "";
-		
+
 			if (messages.length){
 				if (showVersionMessage){
 					body += '<div class="cssHeader">' + versionMessage + '</div>';
 				}
-			    if (error){
-				    body += '<div class="cssHeader">' + error + '</div>';
-			    }
-		
+				if (error){
+					body += '<div class="cssHeader">' + error + '</div>';
+				}
+
 				if (options.rollup){
 					//rollups at the bottom
 					messages.sort(function(a, b){
@@ -175,23 +175,49 @@ module.exports = function(options) {
 				}
 
 				messages.forEach(function(message,i){
-					var link = 'txmt://open?url=file://' + escape(file) + '&line=' + message.line;
-					body += "<div class=\"entry " + message.type + "\"><a href=\"" + link + "\">";
-					body += "<div class=\"header " + message.type + "\">" + message.type + "</div>";
-					body += "<div class=\"message\">" + html(message.message) + "</div>";
-					body += "<div class=\"evidence\">" + html(message.evidence) + "</div>";
-					body += '</a>';
-					body += "</div>";
+					var temp = '',
+						link = 'txmt://open?url=file://' + escape(file) + '&line=' + message.line + '&column=' + message.col;
+					if (message && message.line && message.col && message.message) {
+						temp += '<div class="entry ' + message.type + '"><a href="' + link + '">';
+						temp += '<div class="header ' + message.type + '">' + message.message;
+						temp += '<span class="line"> Line ' + message.line + ' Char ' + message.col + '</span></div>';
+						if (message.evidence && !isNaN(message.col)) {
+							temp += '<div class="evidence">';
+							temp += html(message.evidence.substring(0, message.col-1));
+							temp += '<em>';
+							temp += (message.col <= message.evidence.length) ? html(message.evidence.substring(message.col-1, message.col)) : '&nbsp;';
+							temp += '</em>';
+							temp += html(message.evidence.substring(message.col));
+							temp += '</div>';
+						};
+						temp += '<div class="desc">' + message.rule.desc + '</div>';
+						temp += '</a>';
+						temp += '</div>';
+						// Insert our 'error' messages at the top of the list
+						if(message.type === "error"){
+							body = temp + body;
+						} else {
+							body += temp;
+						}
+						// For sections that only contain a message - e.g general suggestion errors
+					} else if (message.message) {
+						temp += '<div class="entry ' + message.type + '"><a href="txmt://open?url=file://' + escape(file) + '">';
+						temp += '<div class="header ' + message.type + '">' + message.message + '</div>';
+						temp += '<div class="desc">' + message.rule.desc + '</div>';
+						temp += '</a>';
+						temp += '</div>';
+						body += temp;
+					};
 				});
 			}
 
-		
+
 			/*
 			 * Original version of  writing the error messages to TextMate from jshint.tmbundle
 			 */
 			if (body.length > 0) {
 				fs.readFile(__dirname + '/output.html', 'utf8', function(e, html) {
-					sys.puts(html.replace('{body}', body));
+					util.puts(html.replace('{body}', body));
 					process.exit(205); //show_html
 				});
 			}

Support/output.html

@@ -1,58 +1,77 @@
 <html>
-  <head>
-    <style type="text/css">
-    body {
-      background-color: #cecccc;
-      padding: 0;
-      margin: 0;
-	  font-family: Monaco;
-    }
-    a { 
-      display: block;
-      text-decoration: none;
-      color: #444;
-      background: -webkit-gradient(linear, 0 100%, 0 0, from(#CACACA), to(#DCDCDC));
-      border-style: solid;
-      border-width: 1px 0;
-      border-color: #fff #000 #afafaf #000;
-      padding: 10px 20px;
-      text-shadow: 0 1px #fff;
-    }
-    a:hover {
-      background: -webkit-gradient(linear, 0 100%, 0 0, from(#8191B0), to(#B5C0D5));
-      color: #fff;
-      text-shadow: none;
-    }
-    .cssHeader {
-      padding: 10px 20px;
-      background: -webkit-gradient(linear, 0 100%, 0 0, from(#f9eba5), to(#fdf4c5));
-      border-bottom: 1px solid #999;
-      font-size: 13px;
-	  font-weight: bold;
-    }
+<head>
 
-	.header { 
+	<style type="text/css">
+	body {
+		background-color: #e8e8e8;
+		padding: 0;
+		margin: 0;
+		font-family: "Times New Roman";
+		font-size: 16px;
+	}
+	a {
+		display: block;
+		text-decoration: none;
+		color: #444;
+		background: -webkit-gradient(linear, 0 100%, 0 0, from(#CACACA), to(#DCDCDC));
+		border-style: solid;
+		border-width: 1px 0;
+		border-color: #fff #000 #afafaf #000;
+		padding: 10px 20px;
+		text-shadow: 0 1px #fff;
+	}
+	a:hover {
+		background: -webkit-gradient(linear, 0 100%, 0 0, from(#8191B0), to(#B5C0D5));
+		color: #fff;
+		text-shadow: none;
+	}
+	.error a {
+		background: -webkit-gradient(linear, 0 100%, 0 0, from(#512114), to(#A53627));
+		color: #fff;
+		text-shadow: 0 1px #300800;
+		border-top: #A54937;
+		border-bottom: #2C0700;
+	}
+	.error a:hover {
+		background: -webkit-gradient(linear, 0 100%, 0 0, from(#510D00), to(#A51909));
+	}
+	.cssHeader {
+		padding: 10px 20px;
+		background: -webkit-gradient(linear, 0 100%, 0 0, from(#f9eba5), to(#fdf4c5));
+		border-bottom: 1px solid #999;
+		font-size: 13px;
 		font-weight: bold;
-		font-size: 15px;
-		text-transform: capitalize;
 	}
-	
-	.message, .evidence {
-		padding-left: 10px;
+	span.line {
+		float: right;
+		font-size: 9px;
 	}
-	
-	.header.error {
-		color: #a80810;
+	span, .evidence {
+		display: block;
+		font-size: 12px;
+		font-family: Monaco;
+		margin: 5px 0;
 	}
-	.header.warning {
-		color: #0fa808;
+	em {
+		font-style: normal;
+		border-bottom: 2px solid red;
 	}
 	.evidence {
 		color: #0811a8;
 	}
-    </style>
-  </head>
-  <body onload="window.resizeTo(800,document.getElementById('output').offsetHeight+22)" onblur="window.close()">
-    <div id="output">{body}</div>
-  </body>
+	.error .evidence {
+		color: #8E8BFF;
+	}
+	.desc {
+		font-size: 0.8em;
+		padding: 0;
+		margin: 0;
+		font-style: italic;
+	}
+	</style>
+</head>
+
+<body onload="window.resizeTo(800,800)">
+	<div id="output">{body}</div>
+</body>
 </html>