javascript - How to exend the Less compiler with a custom function leveraging a plugin

Question

Since version 2 of Less you can use plugins. You can also use these plugins to add custom function to Less, examples: https://github.com/less/less-plugin-advanced-color-functions/ and https://github.com/bassjobsen/less-plugin-cubehelix

Inspired on https://github.com/less/less.js/issues/2341 i want to add a custom function twotimesandten to less, so that:

@start: 10;
.test {
result: twotimesandten(@start);
}

compiles into:

.test {
result: 30;
}

After reading http://lesscss.org/usage/#plugins-for-plugin-authors, i wonder how to do this?

Answer 1

First write the plugin for usage in the browser. You create the plugin using the following code:

var TwoTimesAndTen = {
    install: function(less) {
        less.functions.functionRegistry.add('twotimesandten' ,function(input) { return new(less.tree.Anonymous)(input.value * 2 + 10);} );
    }
};
less = { 
    env: "development",
    plugins: [TwoTimesAndTen]
};
</script>  
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.1.0/less.min.js"></script>

Notice that you should write the name of your function lower-cased always.

To use the above code for the command line compiler you should create a file named less-plugin-twotimesandten/index.js. That file should contain the following code:

var TwoTimesAndTen = {
    install: function(less) {
        less.functions.functionRegistry.add('twotimesandten' ,function(input) { return new(less.tree.Anonymous)(input.value * 2 + 10);} );
    }
};
module.exports = TwoTimesAndTen;

Then you can run the following command in your console:

echo '@start: 10; .test { result:twotimesandten(@start); }' | lessc --plugin=less-plugin-twotimesandten/index.js -

The above will output:

.test {
  result: 30;
}

To install this plugin for global usage you should create a second file named less-plugin-twotimesandten/package.json. The package.json should contain at least the following lines of code:

{
    "name": "less-plugin-twotimesandten",
    "version": "0.0.1",
    "description": "twotimesandten plugin for less.js",
    "main": "index.js"
}

After saving the package.json file you can run the following command in your console:

npm install less-plugin-twotimesandten

Make sure you navigate outside your less-plugin-twotimesandten directory first. In the preceding command less-plugin-twotimesandten is the path to your plugin.

Now you can run the following command:

echo '@start: 10; .test { result:twotimesandten(@start); }' | lessc --twotimesandten -

To write a plugin that runs both client and server side you should read: http://caolanmcmahon.com/posts/writing_for_node_and_the_browser/ (feel free to contribute to https://github.com/less/less-meta/issues/5 too).

Rewrite the content of your less-plugin-twotimesandten/index.js as follows:

(function(exports){
    exports.install= function(less) {
     less.functions.functionRegistry.add('twotimesandten' ,function(input) { return new(less.tree.Anonymous)(input.value * 2 + 10);} );
      };
})(typeof exports === 'undefined'? this['TwoTimesAndTen']={}: exports); 

The above does not change command line usage. For brower usage you can now use the following code:

<script src="less-plugin-twotimesandten/index.js"></script>
<script>
less = { 
    env: "development",
    plugins: [TwoTimesAndTen]
};
</script>  
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.1.0/less.min.js"></script>