Custom-output-path-aware relative-URLs

[am11]

Please change toCSS() so it takes custom output file path and make it produce the output with correct relative url()s.

Currently its producing urls relative to the source less file, whereas it should incorporate the intended location of css to be generated.

[lukeapage]

See existing options (http://lesscss.org/usage/#command-line-usage-rootpath) and then if it doesn't fit your criteria, explain more about what your situation is and what you want to happen.

e.g. imports or normal paths? give an example of whats in your less and what you want to see in your css.

[am11]

Hello, sorry for the late response. I was busy with other stuff.

In Web Essentials, we are calling less as a service to node-server: https://github.com/madskristensen/WebEssentials2013/blob/eea5cd4d82ab36c6fc7bab4e44fa123e11a3d723/EditorExtensions/Resources/server/services/srv-less.js#L52-L75.

Now, given the following LESS:

foo {
    + bar {
        color: lime;
        background-image: url('../7up-fido-dido.png');
    }
}

It generates:

foo + bar {
  color: lime;
  background-image: url(../7up-fido-dido.png);
}
/*# sourceMappingURL=Site.css.map */

Now, let's consider if filename: params.sourceFileName at line 28, points to c:\\project\\content\\less\\input.less and rootPath is set to path.basename(params.targetFileName) which points to c:\\project\\content\\less\\nested\\folder\\, the resultant CSS would be the same.

Also, if I add rootPath: path.basename(params.targetFileName) at line 57 (as a setting to toCSS) or line 28 (in less.Parser's settings), the result is still same.

However, the expected output in the latter case should be:

foo + bar {
  color: lime;
  background-image: url(../../../7up-fido-dido.png);
}
/*# sourceMappingURL=Site.css.map */

Is there any setting for this to generate URLs relative to target file (as opposed to input/source file)?

(For this matter, we need to carry out this post-processing step, using VS' CSS AST, which is a bit expensive op).

---

On a slightly different note, would be nice if the file and sources members of source-map JSON are also relative to each other to avoid this hack. We fixed the similar issue in libsass some time ago. The gist is:

• SourceComment in CSS file should point to sourcemap-filename relative to CSS file path.
• file in sourcemap JSON file should point to CSS file path relative to .map file path.
• Each member in sources array in sourcemap JSON should point to source .less files, relative to .map file path.

Thanks in anticipation.

[seven-phases-max]

... points to c:\project\content\less\input.less and rootPath is set to path.basename(params.targetFileName) which points to c:\project\content\less\nested\folder\ ,...

If I understand it right you'll get the desired result if you set relative path for rootPath instead of absolute path.basename(params.targetFileName).

[am11]

@seven-phases-max, unfortunately it doesn't work with:

rootPath: path.dirname(path.relative(params.sourceFileName, params.targetFileName))

or

rootPath: path.relative(params.sourceFileName, params.targetFileName)

or

rootPath: path.dirname(params.targetFileName)

both in toCSS({ /* here */ }) and / or new (less.Parser)({ /* here */ }).. Still giving me ../7up-fido-dido.png.

[seven-phases-max]

@am11

Hmm, it's interesting because specifying (for example) -rp="../../" for lessc or rootpath="../../" for client-side less.js both give the expected result. E.g. for:

x {
   y: url(../z.png);
}

both produce:

x {
   y: url(../../../z.png);
}

[seven-phases-max]

I've also tested the following minimal node script with Less 1.6.3 and 1.7.5:

var parser = new(require('less').Parser)({
  rootpath: "../../"
});

parser.parse('x {y: url("../z.png")}', function (e, tree) {
   console.log(tree.toCSS());
});

and it compiles to:

x {
  y: url("../../../z.png");
}

P.S. Ah, @am11 Sorry I did not notice it initially, it looks like the problem in your tests is just in rootPath - should be rootpath instead.

[am11]

Lol, yeah that was the issue. Thanks!

I had to use this:

rootpath: path.dirname(path.relative(path.dirname(params.targetFileName), params.sourceFileName)).replace(/\\/g, '/') + "/"

Looks bit ugly but, less expensive than the one we have! :)

[am11]

@seven-phases-max, regarding the source-map issue described above (after the horizontal-row), is there a workaround for that too?

[seven-phases-max]

@am11, Sorry no idea about source maps, I guess it would make sense to create a separate ticket for that.

[lukeapage]

On a slightly different note, would be nice if the file and sources members of source-map JSON are also relative to each other to avoid this hack. We fixed the similar issue in libsass some time ago. The gist is:

SourceComment in CSS file should point to sourcemap-filename relative to CSS file path.
file in sourcemap JSON file should point to CSS file path relative to .map file path.
Each member in sources array in sourcemap JSON should point to source .less files, relative to .map file path.

I've been fixing this on the v2 branch, but my fix is in lessc, so I think you do not need v2 to get it working.

for reference, that commit was c07531a

for calling less programmatically, just make sure the following are set correctly.

sourceMapFilename - this comes out as the filename in the css which points to the map
sourceMapOutputFilename - this comes out as the css filename in the file property of the map

The only complication is that sourceMapFilename (but not outputFilename) gets put through the following options

sourceMapBasepath - a path to remove from all urls in the sourcemap, and the path to the sourcemap
sourceMapRootpath - a path to add to all urls in the sourcemap and the path to the sourcemap

I think in v2 I am going to change it so that the sourcemap filename is not processed by the above options and they only effect the mapping of urls in the sourcemaps content.