Fix bug where urls in LESS were not rebased relative to the HTML filename.

lib/link-less.js

@@ -8,9 +8,16 @@ const Ru = require('@panosoft/ramda-utils');
 
 const forEachIndexed = R.addIndex(R.forEach);
 
-const render = R.curryN(2, co.wrap(function * (options, filename) {
-	options = R.merge(options || {}, { filename });
-	const contents = yield fs.readFile(filename, 'utf8');
+const render = R.curryN(3, co.wrap(function * (options, basedir, href) {
+	const relativePath = path.relative(basedir, path.dirname(href));
+	const rootpath = relativePath ? `${relativePath}/` : false;
+	options = R.merge(options || {}, {
+		async: true,
+		relativeUrls: true,
+		filename: href,
+		rootpath
+	});
+	const contents = yield fs.readFile(href, 'utf8');
 	return yield less.render(contents, options);
 }));
 /**
@@ -26,7 +33,7 @@ const render = R.curryN(2, co.wrap(function * (options, filename) {
  */
 const inlineLess = co.wrap(function * ($, filename, options) {
 	options = Ru.defaults({ less: {} }, options || {});
-	options = Ru.defaults({ relativeUrls: true }, options.less);
+	options = options.less;
 	const basedir = path.dirname(filename);
 	var files = [];
 	try {
@@ -36,7 +43,7 @@ const inlineLess = co.wrap(function * ($, filename, options) {
 		const getHref = element => path.resolve(basedir, $(element).attr('href'));
 		const hrefs = R.map(getHref, links);
 		files = R.concat(files, hrefs);
-		const outputs = yield R.map(render(options), hrefs);
+		const outputs = yield R.map(render(options, basedir), hrefs);
 		const imports = R.flatten(R.map(R.prop('imports'), outputs));
 		files = R.concat(files, imports);
 		const styles = R.map(output => $('<style>').html(output.css), outputs);

test/fixtures/basic.less

@@ -1 +1 @@
-div { color: blue; }
+div { background-image: url('file.txt'); }

test/index.js

@@ -336,6 +336,12 @@ describe('inline-html', () => {
 				return expect(inline.html(html)).to.eventually.match(/<style>[^]*<\/style>/)
 					.and.not.match(/@import/);
 			});
+			it('rebase urls relative to html filename', () => {
+				const filename = path.resolve(__dirname, 'index.html');
+				const href = 'fixtures/import.less';
+				const html = `<link rel="stylesheet/less" href="${href}"/>`;
+				return expect(inline.html(html, { filename })).to.eventually.match(/<style>[^]*<\/style>/);
+			});
 			it('throw error when link href invalid', () => co(function * () {
 				const filename = path.resolve(__dirname, 'index.html');
 				const href = 'missing.less';
@@ -352,7 +358,7 @@ describe('inline-html', () => {
 			}));
 			it('throw error when less import invalid', () => co(function * () {
 				const filename = path.resolve(__dirname, 'fixtures/index.html');
-				const lessBasename = 'invalidImport.less';
+				const lessBasename = 'invalid-import.less';
 				const lessFilename = path.resolve(path.dirname(filename), lessBasename);
 				const html = `<link rel="stylesheet/less" href="${lessBasename}">`;
 				try {
@@ -366,7 +372,7 @@ describe('inline-html', () => {
 			}));
 			it('throw error when less syntax invalid', () => co(function * () {
 				const filename = path.resolve(__dirname, 'fixtures/index.html');
-				const lessBasename = 'invalidSyntax.less';
+				const lessBasename = 'invalid-syntax.less';
 				const lessFilename = path.resolve(path.dirname(filename), lessBasename);
 				const html = `<link rel="stylesheet/less" href="${lessBasename}">`;
 				try {
@@ -380,7 +386,7 @@ describe('inline-html', () => {
 			}));
 			it('throw error when less url invalid', () => co(function * () {
 				const filename = path.resolve(__dirname, 'fixtures/index.html');
-				const lessBasename = 'invalidUrl.less';
+				const lessBasename = 'invalid-url.less';
 				const badUrl = path.resolve(path.dirname(filename), 'missing.png');
 				const html = `<link rel="stylesheet/less" href="${lessBasename}">`;
 				try {