Creating the Less compiler for compile-watch

compile-watch is the latest Atom package I’ve been working on, it is the successor to sass-watch and takes over all the functionality of sass-watch whilst adding a lot more.

The primary improvement is that it is able to compile any kind of file as long as there is a format defined for it. So as an example I’m going to detail how I added LESS support in this post.

Step 1 the test

The first and by far most important step is to add a test for your new format.

Since LESS will be compiled _in-process_ by Atom it will work the same as Coffee Script so the quickest solution is to copy the Coffee Script test and change coffee/js to less/css resulting in this:

At this point that test will fail obviously so now its time to add the new format.

Step 2 add less as a dependancy

Add "less" : "2.5.0" to package.json and run apm install. Less is now installed into node_modules and is ready to be used.

Step 3 writing the format

Create an empty file at lib/formats/less.coffee and open it.

Requires

At the top of the file we need to require LESS,the format class and fs.

Format Class

Next we need to define a format class which will look like this:

Register the format

Now at the bottom of the file the class needs to be registered as the compiler for less.

Step 4 run the test

Run the package specs and make sure that the LESS format works as it should and that nothing else has been broken by adding the LESS format.

Open a pull request

Open a pull request on the github repository I will merge it assuming everything looks right with it.

You can view the full commit here which has everything I added in.

Adam Laycock

IT Engineer and Developer working in education. I try to do everything in my power to create better systems for schools be it the windows domain or a plugin for their WordPress site.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *