Need help getting Less 1.6.0 to work in hem 0.3.5

[Darrel Bonner]

Hi, I am trying to set up a Spine project with the latest libraries (shown below) and am having difficulty getting hem to properly build my less files. Using lessc 1.6.0 I am able to properly generate an application.css file from my index.less file so I know my less files are good. Excerpts from my config files are below.

css folder:

---------------------------------

bootstrap/less

font-awesome/less

index.less

stacks.less

---------------------------------

slug.json (built using spine.app 0.4.2:

---------------------------------

{

  "server": {

    "port"  : 9294

  },

  "routes": [

    { ""        : "./public" }

  ],

  "packages": {

    "appName": {

      "libs"    : [],

      "modules" : [

        "es5-shimify",

        "json2ify",

        "jqueryify",

        "spine",

        "spine/lib/local",

        "spine/lib/route",

        "spine/lib/manager",

        "spine/lib/relation"

      ],

      "paths"  : ["./app"],

      "target" : "./public/application.js"

    },

    "css": {

      "paths": "./css",

      "target": "./public/application.css"

    }

  }

}

---------------------------------

package.json

---------------------------------

{

  "name": "app",

  "version": "0.0.1",

  "dependencies": {

    "serveup": "~0.0.5",

    "hem": "~0.3.5",

    "es5-shimify": "~2.0.5",

    "json2ify": "~0.0.3",

    "jqueryify": "~2.0.3",

    "spine": "~1.2.2",

    "coffee-script": "~1.6.3",

    "haml-coffee": "~1.13.6",

    "less": "~1.6.0"

  }

}

---------------------------------

I took the following from working examples (ones I use at work) based on older version of spine, hem and less. I removed the '// Monkey patch importer of LESS to load files synchronously' portion that is in a number of projects as less.Parser.importer in less 1.6.0 uses different parameters and behavior.

If I put a console.log() after 'result = css' I see the generated css (same as lessc produced) but by the time it get's there hem has already moved on which results in no application.css file (since there is no content). Note: If I return '<some css>' instead of 'result' below the application.css file is being generated so I know that part is working.

Q: What changes do I need to make in order for the application.css file to be properly generated. btw; I have tried hem-less but ran into other issues so I prefer to tackle the issue directly.

slug.js (excerpt):

---------------------------------

// less compiler

hem.compilers.less = function (pathname) {

    var content, result;

    content = fs.readFileSync(pathname, 'utf8');

    result = '';

    less.render(content, {paths: [path.dirname(pathname)]}, function(err, css) {

        if (err) { throw err; }

        result = css;

    });

    return result;

};

require.extensions['.less'] = function(module, filename) {

    var source;

    source = JSON.stringify(hem.compilers.less(filename));

    return module._compile("module.exports = " + source, filename);

};

---------------------------------

Thanks,

Darrel

[Darrel Bonner]

I ended up just setting up a file watcher in my IDE (WebStorm) and configuring it to build the application.css while doing development and just use the hem server to compile the coffeescript and handle the proxying, etc.