Bundle CSS Lint web UI #150
Labels
Comments
|
FYI - you can run CSS Lint using Rhino as well (no Node required). |
|
Yep, Rhino works just fine. E.g. I got this kind of bat file in my utils directory (which was added to the PATH variable):
However, it isn't very usable if you want to toy around with the code or if you want to write your own rules. I currently use this super crude thing for testing my own rules: <!DOCTYPE html>
<html>
<head>
<title>CSS Lint</title>
<meta charset="UTF-8"/>
</head>
<body>
<textarea id="in"></textarea>
<button type="button" id="go">go</button>
<div id="out"></div>
<script src="release/csslint.js"></script>
<script>
document.getElementById('go').addEventListener('click', function () {
var css, result, out,
ruleset, enable, i, table, message;
css = document.getElementById('in').value;
out = document.getElementById('out');
enable = [
'ids',
'import',
'st-modifier',
'st-capitalized-root'
];
ruleset = {};
for (i = enable.length; i--;){
ruleset[enable[i]] = true;
}
result = CSSLint.verify(css, ruleset);
console.log(result);
table = '<table>' +
'<tr><th>type</th><th>line</th><th>col</th><th>title</th><th>description</th></tr>';
for (i = 0; i < result.messages.length; i++) {
message = result.messages[i];
table += '<tr>';
table += '<td>' + message.type + '</td>';
table += '<td>' + message.line + '</td>';
table += '<td>' + message.col + '</td>';
table += '<td>' + message.rule.name + '</td>';
table += '<td>' + message.message + '<br/><code>' + message.evidence + '</code></td>';
table += '</tr>';
}
table += '</table>';
out.innerHTML = table;
}, false);
</script>
</body>
</html>Not very pretty, but it's good enough for now. Something like that would do the trick. Maybe it should look a little bit less awful though. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Please make this available so we can run this without npm. Browser extensions would be nice too! :)
The text was updated successfully, but these errors were encountered: