Parse LESS client side

Question

Can I parse LESS client side, and return the results?

I am currently using as recommended in documentation, which is to include less file, and minified less parser afterwards. I want to be able to return the raw css so I can save it as a css file.

I do not want to install node.js and the likes, I want a client side solution.

Cushing

for someone with your reputation mistaging is atrocious. – Godart

mistaging? What does that mean? – Cushing

@MK.: What do you mean? less is the appropriate tag. – Dustcloth

@MK: It would have taken you less time to retag than write that comment. – Aftmost

On my own computer, I don't mind installing node.js and the likes (I actually use a plugin for sublime editor), but when I am not at my computer, it is not convenient to install things. I want a method that I can use from a non-development computer (or maybe even an iPad). – Cushing

@Madmartigan I have no idea what he's talking about so how can I retag? I came here to see what does the less command have to do with the client side. – Godart

@Godart If you have no idea what he's talking about, how do you know it's mistagged? O.o – Aftmost

@Madmartigan because when the question has appropriate tags I can always get at least a vague idea what is it about? Like if there was a css tag, for example. – Godart

@MK if you hover your mouse over the less tag for a second, it will explain what the tag is about (Starts CSS preprocessor...). Hopefully this will remove confusion with the linux command less. It is unfortunate that there are two computer related things with the same name, but that's the way of the world. Does not cause as much problem as whole Java/Javascript naming thing, which I feel I should get a t-shirt made up to clarify as I am endlessly explaining the difference to people. .-) – Cushing

Answer 1

A look at the less.js source brings up the Parser object. Assuming that less.js is included in the page:

var data = "@colour: red; #example { background-color: @colour; }",
    parser = new less.Parser({});

parser.parse(data, function (error, root) { 
    // code that handles the parsed data here...
    // e.g.:
    console.log( root.toCSS() ); 
});

will output the following to the console:

#example {
  background-color: #ff0000;
}

The constructor for less.Parser actually takes series of settings, and I don't understand enough of the internals of LESS to say what might be good to pass (though they are all optional so passing none should just use the defaults).

The Parser.parse method takes two parameters: a string containing the LESS file, and a callback that handles the parsed data. The callback receives up to two parameters, an error object (error) and an object representing the parsed LESS (root). root isn't passed if there was a fatal error, and error will be null if there was no error.

Unfortunately, I can't find any better documentation on the attributes of the error parameter than the place they are set in the source here.

Chrysotile

Just what I was looking for, works a treat, thanks. I am a little surprised this is an undocumented feature of the client side script as it is such a fundamental and trivial functionality. This means I can easily use less as source, even when I am offline on my iPad, or working from other computer's with only access to browser based tools. Happy days. Thanks again .~) – Cushing

Turns out this method is documented (pretty much identical), but for server side. Happens to work fine on client side too. – Cushing

Link to parser code is dead. This is probably? the same thing: github.com/less/less.js/blob/master/lib/less/parser/parser.js – Tender

Answer 2

Here is a working example: https://jsfiddle.net/y0oss091/1/

less.render("p{color: #ff66ff}")
    .then(function(output) {
        console.log(output.css)
    },
  function(error){});

Less is loaded from a CDN.

There are many resources out there.
However, I am not sure that client-side use is easier than installing npm and node.

Sophronia

Answer 3

@dbaupp's answer was hugely helpful to me, but I didn't find the error handling to be how described in his answer.

I found the errors to be thrown when parsing less client side rather than being passed to the error parameter meaning you can't react to them within the parse callback.

// I too have no idea what to pass to less.Parser
// but none of them seemed very useful for this
// reading through the source
var parser = new less.Parser( {} ),
    toparse = '.foo {color: red;}';

try {
    parser.parse( function ( error, root ) {
        var css = root.toCSS();
        console.log( css );
    } );
} catch ( e ) {
    // if we hit a 404 when importing a less file
    // this is only thrown at the end of all the imports
    // rather than as soon as it find one broken @import
    if ( e.name === 'TypeError' && e.message === "Cannot call method 'toCSS' of undefined" ) {
        // handle typeerror here

    // if there's a parse error
    // assuming your original less file is just some @imports
    // this will also tell you which file contains the error
    } else if ( e.line ) {
        // the url of the imported file
        console.log( e.filename );

        // the line containing the error
        console.log( e.line );

        // this is a 3 item array containing the line with the error
        // +/- 1 line either side
        // e.extract[1] will be your error
        console.log( e.extract );

        // this is the error message
        console.log( e.message );
    } else {
        // it broke some other way
        // I haven't had this happen to me yet
        // so you'll have to figure it out for yourself ;)
    }
}

As an example of where this might be useful, my application is adding support for less to mediawiki, where I can't access anything server side, but can access the site's css and js files. I can parse the less myself and replace the existing css with the freshly parsed less meaning I'm the only one who needs js enabled for it to work :)

Subclavius