From 897d87436a2375e6b0f946f78799c5f0f1b596f5 Mon Sep 17 00:00:00 2001
From: Alexandre Gigliotti <alex@panosoft.com>
Date: Wed, 2 Dec 2015 10:56:10 -0800
Subject: [PATCH] Fix bug where urls in LESS were not rebased relative to the
 HTML filename.

---
 lib/link-less.js                                | 17 ++++++++++++-----
 test/fixtures/basic.less                        |  2 +-
 .../{invalidImport.less => invalid-import.less} |  0
 .../{invalidSyntax.less => invalid-syntax.less} |  0
 .../{invalidUrl.less => invalid-url.less}       |  0
 test/index.js                                   | 12 +++++++++---
 6 files changed, 22 insertions(+), 9 deletions(-)
 rename test/fixtures/{invalidImport.less => invalid-import.less} (100%)
 rename test/fixtures/{invalidSyntax.less => invalid-syntax.less} (100%)
 rename test/fixtures/{invalidUrl.less => invalid-url.less} (100%)

diff --git a/lib/link-less.js b/lib/link-less.js
index e258a57..3be6841 100644
--- a/lib/link-less.js
+++ b/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);
diff --git a/test/fixtures/basic.less b/test/fixtures/basic.less
index 76ed3ff..2948b3f 100644
--- a/test/fixtures/basic.less
+++ b/test/fixtures/basic.less
@@ -1 +1 @@
-div { color: blue; }
+div { background-image: url('file.txt'); }
diff --git a/test/fixtures/invalidImport.less b/test/fixtures/invalid-import.less
similarity index 100%
rename from test/fixtures/invalidImport.less
rename to test/fixtures/invalid-import.less
diff --git a/test/fixtures/invalidSyntax.less b/test/fixtures/invalid-syntax.less
similarity index 100%
rename from test/fixtures/invalidSyntax.less
rename to test/fixtures/invalid-syntax.less
diff --git a/test/fixtures/invalidUrl.less b/test/fixtures/invalid-url.less
similarity index 100%
rename from test/fixtures/invalidUrl.less
rename to test/fixtures/invalid-url.less
diff --git a/test/index.js b/test/index.js
index 44e6cc5..c9f54df 100644
--- a/test/index.js
+++ b/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 {