Custom Path Resolver Function Support

[knpwrs]

It would be great if LESS could be passed a custom path resolver function to be used for imports. Something like:

var parser = new(less.Parser)({
  pathResolver: function (path) {
    // return location of file to be imported
  }
});

It could be potentially beneficial to support async path resolution as well:

var parser = new(less.Parser)({
  pathResolver: function (path, done) {
    done(/*resolved path*/);
  }
});

This would be especially handy for client-side development as, if I'm not mistaken, it appears that the paths option for the LESS parser doesn't do anything on the client.

Is this something somebody could easily implement?

[lukeapage]

This is something we want to be possible in 2.0
I just need a couple of days of spare time to finish it off. Feel free to contribute - there is an open branch with work so far and a pull request with more details.

[knpwrs]

Is this what you are referring to? #1005

[chuckdumont]

I think that a custom resource resolver would be more useful (i.e. resolves the resource being imported rather than just the path). This would allow the resolver to potentially try loading the resource from a list of possible paths without the need to load the resource twice (once by the path resolver to determine which path to use, and then again by the compiler to get the resource). The compiler could provide helper functions for loading files to avoid re-implementing that functionality in the resolver.

[guybedford]

+1

[subesokun]

+1

[am11]

Hey guys, hopefully this will provide some useful pointers.

We have recently implemented a similar feature in node-sass called custom importer (sass/node-sass#530), which basically passes the custom function to libsass (via v8/libuv). Libsass calls us back whenever it encounters an import statement.

The signature we used are bit different.

Async:

var sass = require('node-sass');

sass.render({
  file: 'blah.scss',
  success: function(result) { console.log(result); },
  importer: function(url, prev, done) { return done(processIt(url, prev)); },
});

Sync:

var sass = require('node-sass');

var result = sass.renderSync({
  file: 'blah.scss',
  importer: function(url, prev) { return processIt(url, prev); },
});

(naturally the async variant can also just return, but sync can't have a callback)

It is available in the current beta release (https://github.com/sass/node-sass/releases/tag/v2.0.0-beta). The README highlights the usage details.

This was the simple version, covering the basic use-cases of feature.

Now, what else can happen in this arena? (this probably is not the super urgent requirement) Someone may wonder: does having prev suffice or should there be whole import chain (up to the prev mark) returned to the user? We haven't opted for that route yet. You may want to take at the related discussion that transpired here: sass/libsass#691.

This kind of ideas can grown crazy, so the simple version would do the job. Besides, the API consumers can always keep track of imports, given they have option like https://github.com/xzyfer/sass-graph/, which can provide info about the file in terms of graph nodes. After all it is the node.js world; plug, play and reuse stuff! :)

[knpwrs]

@am11 -- LESS 2.x actually now has plugins. Check out the less-plugin-npm-import project.

It would seem that the syntax they landed on is:

@import "npm://package/file";

So theoretically, plugins can do anything we want.