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.

Answer 1

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.

Answer 2

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

Answer 3

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.