Rewrite url paths based on rewrite rules

[adorsk]

I would like to add the ability to rewrite paths based on a set of rewrite rules.

For example, I would like to do the following:

lessText = 'body {background-image: url("path1");}';

less.rewriteRules = [
[/path1/, 'newPath1']
]

parser = new less.Parser();
parser.parse(lessText, function(err, tree){
  console.log(tree.toCSS());
})

This would yield:

body {
  background-image: url("newPath1")
}

Use Case for This Feature

The ability to rewrite paths would make it possible to write modular CSS with less, by making it possible to annotate modules through the use of unique URIs.

For example, say I have a module 'common' that includes these files:

common/
  buttons.less
  tooltips.less
  images/
    cancel.png
    ...
  ...

I want to write another module, 'moduleA', that can access these files. However, I don't know yet where the 'common' module will be located yet in relation to 'moduleA'. So what I do is I use a path identifier for 'common', like this:

moduleA/style.less:

@import url('module:common:buttons.less');

Then, in my less.rewritePaths function, I can map the identifier path to the actual path when I know it:

less.rewritePaths = function(path){
   return path.replace(/module:common:/, '/the/real/path/to/common');
}

[adorsk]

After writing the initial note for the pull request, I changed the rewrite logic to use a generic function, rather than a set of rewrite rules.

Also, it might make more sense to attach the 'rewritePaths' function to a specific tree, rather than the less global variable.

[lukeapage]

Am doing some extensive changes re: url re-writing (being able to choose to re-map to relative or not and also specify a rootpath).. have decided to look at this for 1.4.0 if there is still a need.

[lukeapage]

Am currently wondering if this would be better done as a user function..

Now we have 1.3.3 which has much improved control over url re-writing, I'm wondering if many people will need this feature. If they don't you could add a function to less.functions and then reference that in order to make specific path rewrites?

[adorsk]

Thanks for looking into this.

I'm not clear on where the rewrite function would be defined. (was it in the docs? sorry if I missed it there).

Do you mean I would do something like...

less.functions.rewriteUrl = function(){...}

...

.myStyles {
  background-image: rewriteUri('my:custom:uri')
}

If that's the case it might work out.

However, there could still be some arguments for making it possible to override the global url handling.

For example, I currently use a customized fork of less.js to 'bundle' a set of less modules. When I do this I rewrite all urls and paths, not just urls declared with a custom function. For example, if I import a css file via a normal @import url('...'), I also want to rewrite that normal 'url()'.

TL;DR: I still recommend being able to customize the global url path processing.

P.S.
Thanks for your work on less.js in general, it has been a tremendous help to me in my projects.

[lukeapage]

@adorsk ok, for your use-case it doesn't make sense to have a function.

I think you might have a point.

[lukeapage]

Sorry this PR is now too far out of date.

If you do need this functionality, I would suggest you implement a plugin that edits the url nodes - see less-plugin-inline-images which converts url( nodes into data-uri function calls.