Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Bundle CSS Lint web UI #150

Open
askalot opened this Issue · 2 comments

3 participants

@askalot

Please make this available so we can run this without npm. Browser extensions would be nice too! :)

@nzakas
Owner

FYI - you can run CSS Lint using Rhino as well (no Node required).

@mahonnaise

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):

@java -jar <csslint dir>\lib\js.jar <csslint dir>\release\csslint-rhino.js %*

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
Something went wrong with that request. Please try again.