blessify

browserify transform for require('something.less')

This came from being inspired but at the same time disappointed with lessify/node-lessify; it works well, but has some use cases where i needed to change it so i decided to create one that fits my needs. The goal is to be able to require less files from whatever browserify module. Let's take this example

- app  
  - modules
    - some-module
      - index.html
      - index.js  
      - style.less  
  - index.html  
  - index.js
  - global.less
- node_modules
- package.json

The Problem:

Your application will bundle with one or more modules and will include global.less either through a require in index.js or an @import in style.less.
You also want to be able to run every module in isolation so each module will also have to include global.less for compilation.
Lessify inserts style tags to the head of the HTML document but global.less gets included multiple times when you compile app/index.js which bloats the js bundle. This also leads for if you @import global.less from other less files, it won't be watched when you run watchify.

The Solution

I wrote this browserify transform that is extended with some exported properties:

• blessify.render: method that returns a promise fulfilled with the less output
• blessify.input: CSS files parsed from require('something.less') {src: path, input: css-text}
• blessify.imports: import paths for less rendering
• blessify.requires: non-distinct array of css files required from javascript
• blessify.jsFiles: parsed javascript files

The transform parses all the less files in a consistent way, and buffers them until the JS compilation is successful. I expose a render method that will render the less with no such caveats and returns a promise with the result of the compilation.

Usage

$ npm install blessify

var browserify = require('browserify')
  , blessify = require('blessify');

var wStream = fs.createWriteStream('path/to/bundle.js');
var b = browserify();
b.transform(blessify, options);
b.add('path/to/index.js');
b.bundle().pipe(wStream);

wStream.on('close', function(){
  blessify.render()
    .then(function(output){
       //write output.css to a bundle.css
       fs.writeFile('path/to/bundle.css', 'utf8', function(err){
          console.log('compilation successfull');
       });
    });
    
  //correct gathering for watching files:
  // required less files
  for(var i = 0, l = blessify.input.length; i < l; i++){
    addWatcher( blessify.input[i].src );
  }
  // css imports
  for(var i = 0, l = blessify.imports.length; i < l; i++){
    addWatcher( blessify.imports[i] );
  }
  //js files
  for(var i = 0, l = blessify.jsFiles.length; i < l; i++){
    addWatcher( blessify.jsFiles[i] );
  }
});