0.2.4

README.md

@@ -11,9 +11,11 @@ The following HTML elements and CSS data types are inlined:
 
 - Scripts - The source path is read and inlined.
 
-- Images - The source path is replaced with a datauri.
+- Linked CSS stylesheets - The stylesheet is read and inlined within a `<style>` element. Note that nested `@import`'s are also inlined.
 
-- Linked LESS stylesheets - The LESS is compiled and the result is inlined within a `<style>` element. Note that `@imports` are processed as well.
+- Linked LESS stylesheets - The LESS is compiled and the output is inlined within a `<style>` element. Note that `@import`'s are also inlined.
+
+- Images - The source path is replaced with a datauri.
 
 - CSS url data types - The reference path is replaced with a datauri. These can be used in linked stylesheets, style elements, and element style attributes.
 
@@ -32,7 +34,6 @@ Assuming ...
 - `main.less`
 
 	```css
-	@import (less) 'main.css';
 	div { background-image: url('path/to/file'); }
 	```
 
@@ -51,6 +52,7 @@ var inline = require('inline-html');
 co(function * () {
 	var html = `
 		<script src="main.js"></script>
+		<link rel="stylesheet" href="main.css"/>
 		<link rel="stylesheet/less" href="main.less"/>
 		<style> div { background-image: url('path/to/file'); } </style>
 		<div style="background-image: url('path/to/file');"></div>
@@ -59,13 +61,9 @@ co(function * () {
 	html = yield inline.html(html);
 	console.log(html);
 	/**
-		<script>
-			var a = 1;
-		</script>
-		<style>
-			@font-face { src: url('data:...'); }
-			div { background-image: url('data:...'); }
-		</style>
+		<script> var a = 1; </script>
+		<style> @font-face { src: url('data:...'); } </style>
+		<style> div { background-image: url('data:...'); } </style>
 		<style> div { background-image: url('data:...'); } </style>
 		<div style="background-image: url('data:...');"></div>
 		<img src="data:..."/>
@@ -87,7 +85,7 @@ npm install inline-html
 
 ---
 
-<a name="html"/>
+<a name="html"></a>
 ### inline.html ( html [, options] )
 
 Parses an HTML string and embeds referenced local assets into the HTML.
@@ -117,7 +115,7 @@ co(function * () {
 
 ---
 
-<a name="file"/>
+<a name="file"></a>
 ### inline.file ( filename [, options] )
 
 Reads an HTML file and embeds referenced local assets into the HTML.
@@ -146,7 +144,7 @@ co(function * () {
 
 ---
 
-<a name="results"/>
+<a name="results"></a>
 ### Results
 
 The `Promise` returned by these functions is optionally fulfilled with a `results` object that has the following properties:

lib/css-url.js

@@ -10,8 +10,6 @@ const url = require('url');
 
 const collapseWhitespace = str => string(str).collapseWhitespace().toString();
 const forEachIndexed = R.addIndex(R.forEach);
-const format = (path) => url.format(path);
-const parse = (path) => url.parse(path);
 const resolve = path.resolve;
 
 const augmentError = (error, filename, files) => {
@@ -24,13 +22,12 @@ const augmentError = (error, filename, files) => {
  * Returns url path without query string and hash if present.
  *
  * @param path
- *
  * @returns path
  */
 const cleanUrl = R.pipe(
-	parse,
+	url.parse,
 	R.pick(['protocol', 'host', 'pathname']),
-	format,
+	url.format,
 	decodeURI
 );
 /**
@@ -68,16 +65,14 @@ const inlineStyles = ($, filename) => {
 	try {
 		const styles = $('style')
 			.toArray();
-
 		const contents = R.map(style => {
 			const css = $(style).html();
 			const result = inlineUrl(filename, css);
 			files = R.concat(files, result.files);
 			return result.css;
 		}, styles);
-
-		forEachIndexed((style, index) => $(style).html(contents[index]), styles);
-
+		const replaceStyle = (style, index) => $(style).html(contents[index]);
+		forEachIndexed(replaceStyle, styles);
 		return { $, files };
 	}
 	catch (error) { throw augmentError(error, filename, files); }
@@ -95,7 +90,6 @@ const inlineStyleAttributes = ($, filename) => {
 		const elements = $('*')
 			.filter('[style]')
 			.toArray();
-
 		const styles = R.map(element => {
 			var style = $(element).attr('style');
 			const rule = wrap(style);
@@ -104,9 +98,8 @@ const inlineStyleAttributes = ($, filename) => {
 			style = R.pipe( collapseWhitespace, unwrap )(result.css);
 			return style;
 		}, elements);
-
-		forEachIndexed((element, index) => $(element).attr('style', styles[index]), elements);
-
+		const replaceElementStyle = (element, index) => $(element).attr('style', styles[index]);
+		forEachIndexed(replaceElementStyle, elements);
 		return { $, files };
 	}
 	catch (error) { throw augmentError(error, filename, files); }

lib/img.js

@@ -6,7 +6,6 @@ const path = require('path');
 const R = require('ramda');
 
 const forEachIndexed = R.addIndex(R.forEach);
-const resolve = R.curry((a,b) => path.resolve(a,b));
 
 /**
  * Inline sourced image files
@@ -17,11 +16,8 @@ const resolve = R.curry((a,b) => path.resolve(a,b));
  * 	Filename used to resolve relative sources being inlined
  */
 const inlineImg = co.wrap(function * ($, filename) {
-	var files;
 	const basedir = path.dirname(filename);
-	const getAttr = R.curry((attr, element) => $(element).attr(attr));
-	const setAttr = R.curry((attr, element, value) => $(element).attr(attr, value));
-	const getFilename = R.pipe(getAttr('src'), resolve(basedir));
+	var files;
 	try {
 		const images = $('img')
 			.filter((index, element) => {
@@ -29,13 +25,12 @@ const inlineImg = co.wrap(function * ($, filename) {
 				return isLocalPath(source) && !isTemplateExpression(source);
 			})
 			.toArray();
-
+		const getFilename = element => path.resolve(basedir, $(element).attr('src'));
 		const filenames = R.map(getFilename, images);
 		files = R.uniq(filenames);
 		const uris = yield R.map(datauri, filenames);
-
-		forEachIndexed((image, index) => setAttr('src', image, uris[index]), images);
-		
+		const replaceImageSource = (image, index) => $(image).attr('src', uris[index]);
+		forEachIndexed(replaceImageSource, images);
 		return { $, files };
 	}
 	catch (error) {

lib/index.js

@@ -4,6 +4,7 @@ const fs = require('mz/fs');
 const inlineCssUrl = require('./css-url');
 const inlineImg = require('./img');
 const inlineLess = require('./link-less');
+const inlineLinkCss = require('./link-css');
 const inlineScript = require('./script');
 const R = require('ramda');
 const Ru = require('@panosoft/ramda-utils');
@@ -19,7 +20,7 @@ var inline = {};
  */
 inline.html = co.wrap(function * (html, options) {
 	options = Ru.defaults({
-		filename: null,
+		filename: '.',
 		less: {},
 		verbose: false
 	}, options || {});
@@ -34,6 +35,10 @@ inline.html = co.wrap(function * (html, options) {
 		$ = result.$;
 		files = R.concat(files, result.files);
 
+		result = yield inlineLinkCss($, filename, options);
+		$ = result.$;
+		files = R.concat(files, result.files);
+
 		result = inlineCssUrl($, filename, options);
 		$ = result.$;
 		files = R.concat(files, result.files);

lib/link-css.js

@@ -0,0 +1,70 @@
+const co = require('co');
+const fs = require('mz/fs');
+const isLocalPath = require('is-local-path');
+const isTemplateExpression = require('./is-template-expression');
+const path = require('path');
+const postcss = require('postcss');
+const postcssImport = require('postcss-import');
+const postcssUrl = require('postcss-url');
+const R = require('ramda');
+
+const forEachIndexed = R.addIndex(R.forEach);
+const render = R.curryN(2, co.wrap(function * (filename, href) {
+  var imports;
+  const processor = postcss()
+    .use(postcssImport({ async: true, onImport: files => imports = files }))
+    .use(postcssUrl({ url: 'rebase' }));
+  try {
+    const css = yield fs.readFile(href, 'utf8');
+    const result = yield processor.process(css, { from: href, to: filename });
+    const output = {css: result.css, imports};
+    return output;
+  }
+  catch (error) {
+    // process uses error.file = href
+    // import uses error.fileName
+    // readFile uses nothing => use filename
+    error.filename = error.file || error.fileName || filename;
+    throw error;
+  }
+}));
+/**
+ * Inline liked CSS stylesheets by replacing link elements with
+ * style elements that contain the css file contents.
+ * @param {Object} $
+ * 	Parsed HTML source to inline
+ * @param {String} [filename='.']
+ *  Filename of the HTML document contained within $
+ * @return {Promise}
+ */
+const inlineLinkCss = co.wrap(function * ($, filename) {
+  // TODO consider: explicitly default filename = '.'?
+  // path.dirname(null || undefined) -> '.'
+  const basedir = path.dirname(filename);
+  var files = [];
+  try {
+    const links = $('link[rel="stylesheet"]')
+			.filter((index, link) => {
+				const href = $(link).attr('href');
+				return isLocalPath(href) && !isTemplateExpression(href);
+			})
+			.toArray();
+    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(filename), 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);
+		const replaceLink = (link, index) => $(link).replaceWith(styles[index]);
+		forEachIndexed(replaceLink, links);
+		files = R.uniq(files);
+		return { $, files };
+  }
+  catch (error) {
+    if (!error.filename) error.filename = filename;
+		error.files = R.uniq(files);
+		throw error;
+  }
+});
+module.exports = inlineLinkCss;

lib/link-less.js

@@ -1,17 +1,24 @@
 const co = require('co');
 const fs = require('mz/fs');
 const isLocalPath = require('is-local-path');
+const isTemplateExpression = require('./is-template-expression');
 const less = require('less');
 const path = require('path');
 const R = require('ramda');
 const Ru = require('@panosoft/ramda-utils');
 
 const forEachIndexed = R.addIndex(R.forEach);
-const resolve = R.curry((a,b) => path.resolve(a,b));
 
-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);
 }));
 /**
@@ -27,25 +34,25 @@ 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);
-	var files = [];
+	options = options.less;
 	const basedir = path.dirname(filename);
-	const getAttr = R.curry((attr, element) => $(element).attr(attr));
-	const getStylesheet = R.pipe(getAttr('href'), resolve(basedir));
+	var files = [];
 	try {
 		const links = $('link[rel="stylesheet/less"]')
-			.filter((index, link) => isLocalPath($(link).attr('href')))
+			.filter((index, link) => {
+				const href = $(link).attr('href');
+				return isLocalPath(href) && !isTemplateExpression(href);
+			})
 			.toArray();
-
-		const stylesheets = R.map(getStylesheet, links);
-		files = R.concat(files, stylesheets);
-		const outputs = yield R.map(render(options), stylesheets);
+		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, 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);
-
-		forEachIndexed((link, index) => $(link).replaceWith(styles[index]), links);
-
+		const replaceLink = (link, index) => $(link).replaceWith(styles[index]);
+		forEachIndexed(replaceLink, links);
 		files = R.uniq(files);
 		return { $, files };
 	}

package.json

@@ -1,8 +1,11 @@
 {
   "name": "inline-html",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Inline local assets referenced in an HTML document.",
   "repository": "panosoft/inline-html",
+  "engines": {
+    "node": ">=4.0.0"
+  },
   "main": "lib/index.js",
   "scripts": {
     "test": "mocha",
@@ -19,6 +22,7 @@
     "less": "^2.5.1",
     "mz": "^2.0.0",
     "postcss": "^5.0.12",
+    "postcss-import": "^7.1.3",
     "postcss-url": "^5.0.0",
     "ramda": "^0.18.0",
     "string": "^3.3.0"

test/fixtures/basic.css

@@ -1 +1,2 @@
+/* basic.css */
 div { color: blue; }

test/fixtures/basic.less

@@ -1 +1,2 @@
+/* basic.less */
 div { color: blue; }

test/fixtures/import.css

@@ -0,0 +1 @@
+@import 'basic.css';

test/fixtures/invalid-import.css

@@ -0,0 +1 @@
+@import 'missing.css';

test/fixtures/invalid-import.less

@@ -0,0 +1 @@
+@import 'missing.less';

test/fixtures/invalid-syntax.less

@@ -0,0 +1 @@
+div {

test/fixtures/invalid-url.css

@@ -0,0 +1 @@
+div { background-image: url('missing.png'); }

test/fixtures/invalid-url.less

@@ -0,0 +1 @@
+div { background-image: url('missing.png'); }

test/fixtures/invalidImport.less

@@ -1 +0,0 @@
-@import (less) 'missing.css';

test/fixtures/invalidUrl.less

@@ -1,3 +0,0 @@
-div {
-  background-image: url('missing.png');
-}

test/fixtures/nested-import.css

@@ -0,0 +1 @@
+@import 'import.css';

test/fixtures/nested-import.less

@@ -0,0 +1 @@
+@import 'import.less';

test/fixtures/url.css

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

test/fixtures/url.less

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

test/index.js

@@ -1,11 +1,11 @@
-var co = require('co');
-var datauri = require('datauri');
-var expect = require('chai')
+const co = require('co');
+const datauri = require('datauri');
+const expect = require('chai')
 	.use(require('chai-as-promised'))
 	.expect;
-var fs = require('fs');
-var inline = require('../lib');
-var path = require('path');
+const fs = require('fs');
+const inline = require('../lib');
+const path = require('path');
 
 describe('inline-html', () => {
 
@@ -13,19 +13,19 @@ describe('inline-html', () => {
 		it('exists', () => expect(inline).to.have.property('file').that.is.a('function'));
 
 		it('accept html filename', () => {
-			var filename = path.resolve(__dirname, './fixtures/file.txt');
-			var content = fs.readFileSync(filename, 'utf8');
+			const filename = path.resolve(__dirname, './fixtures/file.txt');
+			const content = fs.readFileSync(filename, 'utf8');
 			return expect(inline.file(filename)).to.eventually.equal(content);
 		});
 
 		it('options.filename: always reset to current filename and used for css url path resolution', () => {
-			var filename = path.resolve(__dirname, 'fixtures/css-url.html'); // file contains url path relative to itself
-			var options = { filename: __filename }; // sets filename relative to this test file
+			const filename = path.resolve(__dirname, 'fixtures/css-url.html'); // file contains url path relative to itself
+			const options = { filename: __filename }; // sets filename relative to this test file
 			return expect(inline.file(filename, options)).to.eventually.match(/"data:.*,.*"/);
 		});
 		it('options.filename:  always reset to current filename and used for img src path resolution', () => {
-			var filename = path.resolve(__dirname, 'fixtures/img.html'); // file contains src relative to itself
-			var options = { filename: __filename }; // sets filename relative to this test file
+			const filename = path.resolve(__dirname, 'fixtures/img.html'); // file contains src relative to itself
+			const options = { filename: __filename }; // sets filename relative to this test file
 			return expect(inline.file(filename, options)).to.eventually.match(/"data:.*,.*"/);
 		});
 
@@ -36,72 +36,72 @@ describe('inline-html', () => {
 		it('exists', () => expect(inline).to.have.property('html').that.is.a('function'));
 
 		it('accept html string', () => {
-			var html = 'HTML';
+			const html = 'HTML';
 			return expect(inline.html(html)).to.eventually.equal(html);
 		});
 		it('preserve self closing tags', () => {
-			var html = '<br/>';
+			const html = '<br/>';
 			return expect(inline.html(html)).to.eventually.equal(html);
 		});
 		it('preserve partials', () => {
-			var html = '{{> partial}}';
+			const html = '{{> partial}}';
 			return expect(inline.html(html)).to.eventually.equal(html);
 		});
 		it('preserve helpers', () => {
-			var html = '{{helper}}';
+			const html = '{{helper}}';
 			return expect(inline.html(html)).to.eventually.equal(html);
 		});
 
 		it('options.filename: default to cwd for css url path resolution', () => {
-			var url = 'test/fixtures/file.txt'; // Note: this is relative to cwd
-			var uri = datauri(url);
+			const url = 'test/fixtures/file.txt'; // Note: this is relative to cwd
+			const uri = datauri(url);
 
-			var html = (path) => `<style>div { background-image: url('${path}'); }</style>`;
+			const html = (path) => `<style>div { background-image: url('${path}'); }</style>`;
 			return expect(inline.html(html(url))).to.eventually.equal(html(uri));
 		});
 		it('options.filename: set basepath for css url path resolution', () => {
-			var filename = path.resolve(__dirname, 'fixtures/fake.html');
-			var dirname = path.dirname(filename);
+			const filename = path.resolve(__dirname, 'fixtures/fake.html');
+			const dirname = path.dirname(filename);
 
-			var url = 'file.txt'; // Note: path relative to filename's dirname
-			var uri = datauri(path.resolve(dirname, url));
+			const url = 'file.txt'; // Note: path relative to filename's dirname
+			const uri = datauri(path.resolve(dirname, url));
 
-			var html = (path) => `<style>div { background-image: url('${path}'); }</style>`;
-			var options = { filename: filename };
+			const html = (path) => `<style>div { background-image: url('${path}'); }</style>`;
+			const options = { filename: filename };
 			return expect(inline.html(html(url), options)).to.eventually.equal(html(uri));
 		});
 
 		it('options.filename: default to cwd for img src path resolution', () => {
-			var url = 'test/fixtures/file.txt'; // Note: path relative to cwd
-			var uri = datauri(url);
+			const url = 'test/fixtures/file.txt'; // Note: path relative to cwd
+			const uri = datauri(url);
 
-			var html = (path) => `<img src="${path}"/>`;
+			const html = (path) => `<img src="${path}"/>`;
 			return expect(inline.html(html(url))).to.eventually.equal(html(uri));
 		});
 		it('options.filename: set basepath for img src path resolution', () => {
-			var filename = path.resolve(__dirname, 'fixtures/fake.html');
-			var dirname = path.dirname(filename);
+			const filename = path.resolve(__dirname, 'fixtures/fake.html');
+			const dirname = path.dirname(filename);
 
-			var url = 'file.txt'; // Note: path relative to filename's dirname
-			var uri = datauri(path.resolve(dirname, url));
+			const url = 'file.txt'; // Note: path relative to filename's dirname
+			const uri = datauri(path.resolve(dirname, url));
 
-			var html = (path) => `<img src="${path}"/>`;
-			var options = { filename: filename };
+			const html = (path) => `<img src="${path}"/>`;
+			const options = { filename: filename };
 			return expect(inline.html(html(url), options)).to.eventually.equal(html(uri));
 		});
 
 		it('options.filename: included in results.files for img src if options.verbose true', () => {
-			var filename = path.resolve(__dirname, 'fixtures/file.txt');
-			var html = `<img src="${filename}"/>`;
-			var options = { verbose: true };
+			const filename = path.resolve(__dirname, 'fixtures/file.txt');
+			const html = `<img src="${filename}"/>`;
+			const options = { verbose: true };
 			return expect(inline.html(html, options)).to.eventually.have.property('files')
 				.that.is.an('array')
 				.that.contains(filename);
 		});
 		it('options.filename: included in results.files for css url path if options.verbose true', () => {
-			var filename = path.resolve(__dirname, 'fixtures/file.txt');
-			var html = `<style>div { background-image: url('${filename}'); }</style>`;
-			var options = { verbose: true };
+			const filename = path.resolve(__dirname, 'fixtures/file.txt');
+			const html = `<style>div { background-image: url('${filename}'); }</style>`;
+			const options = { verbose: true };
 			return expect(inline.html(html, options)).to.eventually.have.property('files')
 				.that.is.an('array')
 				.that.contains(filename);
@@ -109,60 +109,60 @@ describe('inline-html', () => {
 
 
 		it('options.verbose: return results object if true', () => {
-			var filename = path.resolve(__dirname, 'fixtures/file.txt');
-			var html = `<img src="${filename}"/>`;
-			var options = { verbose: true };
+			const filename = path.resolve(__dirname, 'fixtures/file.txt');
+			const html = `<img src="${filename}"/>`;
+			const options = { verbose: true };
 			return expect(inline.html(html, options)).to.eventually.be.an('object')
 				.that.contains.keys(['html', 'files']);
 		});
 		it('options.verbose: return html if false', () => {
-			var filename = path.resolve(__dirname, 'fixtures/file.txt');
-			var html = `<img src="${filename}"/>`;
-			var options = { verbose: false };
+			const filename = path.resolve(__dirname, 'fixtures/file.txt');
+			const html = `<img src="${filename}"/>`;
+			const options = { verbose: false };
 			return expect(inline.html(html, options)).to.eventually.be.a('string');
 		});
 		it('options.verbose: default false', () => {
-			var filename = path.resolve(__dirname, 'fixtures/file.txt');
-			var html = `<img src="${filename}"/>`;
+			const filename = path.resolve(__dirname, 'fixtures/file.txt');
+			const html = `<img src="${filename}"/>`;
 			return expect(inline.html(html)).to.eventually.be.a('string');
 		});
 
 
 		describe('css-url', () => {
 			it('inline local url in style element', () => {
-				var filename = path.resolve(__dirname, 'fixtures/file.txt');
-				var html = `<style>div {background-image: url("${filename}");}</style>`;
+				const filename = path.resolve(__dirname, 'fixtures/file.txt');
+				const html = `<style>div {background-image: url("${filename}");}</style>`;
 				return expect(inline.html(html)).to.eventually.match(/data:.*,.*/);
 			});
 			it('inline local url in style attribute', () => {
-				var filename = path.resolve(__dirname, 'fixtures/file.txt');
-				var html = `<div style="background-image: url('${filename}');"></div>`;
+				const filename = path.resolve(__dirname, 'fixtures/file.txt');
+				const html = `<div style="background-image: url('${filename}');"></div>`;
 				return expect(inline.html(html)).to.eventually.match(/data:.*,.*/);
 			});
 			it('ignore remote url', () => {
-				var html = `<style> div { background-image: url('http://test.com/file.txt?query=string#hash'); }</style>`;
+				const html = `<style> div { background-image: url('http://test.com/file.txt?query=string#hash'); }</style>`;
 				return expect(inline.html(html)).to.eventually.equal(html);
 			});
 			it('ignore template expression url', () => {
-				var html = `<style> div { background-image: url({{path}}); }</style>`;
+				const html = `<style> div { background-image: url({{path}}); }</style>`;
 				return expect(inline.html(html)).to.eventually.equal(html);
 			});
 			it('ignore url query strings and hashes', () => {
-				var filename = path.resolve(__dirname, 'fixtures/file.txt');
-				var url = `${filename}?query=string#hash`;
-				var uri = datauri(filename);
-				var html = (source) => `<style> div { background-image: url('${source}'); }</style>`;
+				const filename = path.resolve(__dirname, 'fixtures/file.txt');
+				const url = `${filename}?query=string#hash`;
+				const uri = datauri(filename);
+				const html = (source) => `<style> div { background-image: url('${source}'); }</style>`;
 				return expect(inline.html(html(url))).to.eventually.equal(html(uri));
 			});
 			it('handle url with spaces', () => {
-				var filename = path.resolve(__dirname, 'fixtures/file space.txt');
-				var uri = datauri(filename);
-				var html = (source) => `<style> div { background-image: url('${source}'); }</style>`;
+				const filename = path.resolve(__dirname, 'fixtures/file space.txt');
+				const uri = datauri(filename);
+				const html = (source) => `<style> div { background-image: url('${source}'); }</style>`;
 				return expect(inline.html(html(filename))).to.eventually.equal(html(uri));
 			});
 			it('throw when syntax invalid in style element', () => co(function * () {
-				var filename = path.resolve(__dirname, 'index.html');
-				var html = `<style>div {</style>`;
+				const filename = path.resolve(__dirname, 'index.html');
+				const html = `<style>div {</style>`;
 				try {
 					yield inline.html(html, {filename});
 					throw new Error('No error thrown');
@@ -173,8 +173,8 @@ describe('inline-html', () => {
 				}
 			}));
 			it('throw when syntax invalid in style attribute', () => co(function * () {
-				var filename = path.resolve(__dirname, 'index.html');
-				var html = `<div style="background url()"></div>`;
+				const filename = path.resolve(__dirname, 'index.html');
+				const html = `<div style="background url()"></div>`;
 				try {
 					yield inline.html(html, {filename});
 					throw new Error('No error thrown');
@@ -185,10 +185,10 @@ describe('inline-html', () => {
 				}
 			}));
 			it('throw when url invalid in style element', () => co(function * () {
-				var filename = path.resolve(__dirname, 'index.html');
-				var url = 'missing.png';
-				var resolvedUrl = path.resolve(path.dirname(filename), url);
-				var html = `<style>div { background-image: url('${url}'); }</style>`;
+				const filename = path.resolve(__dirname, 'index.html');
+				const url = 'missing.png';
+				const resolvedUrl = path.resolve(path.dirname(filename), url);
+				const html = `<style>div { background-image: url('${url}'); }</style>`;
 				try {
 					yield inline.html(html, {filename});
 					throw new Error('No error thrown');
@@ -199,10 +199,10 @@ describe('inline-html', () => {
 				}
 			}));
 		it('throw when url invalid in style attribute ', () => co(function * () {
-				var filename = path.resolve(__dirname, 'index.html');
-				var url = 'missing.png';
-				var resolvedUrl = path.resolve(path.dirname(filename), url);
-				var html = `<div style="background-image: url('${url}')"></div>`;
+				const filename = path.resolve(__dirname, 'index.html');
+				const url = 'missing.png';
+				const resolvedUrl = path.resolve(path.dirname(filename), url);
+				const html = `<div style="background-image: url('${url}')"></div>`;
 				try {
 					yield inline.html(html, {filename});
 					throw new Error('No error thrown');
@@ -213,12 +213,12 @@ describe('inline-html', () => {
 				}
 			}));
 			it('include all urls in error.files up until and including invalid url in style element', () => co(function * () {
-				var filename = path.resolve(__dirname, 'index.html');
-				var validUrl = 'fixtures/file.txt';
-				var invalidUrl = 'missing.png';
-				var resolvedInvalidUrl = path.resolve(path.dirname(filename), invalidUrl);
-				var resolvedValidUrl = path.resolve(path.dirname(filename), validUrl);
-				var html = `
+				const filename = path.resolve(__dirname, 'index.html');
+				const validUrl = 'fixtures/file.txt';
+				const invalidUrl = 'missing.png';
+				const resolvedInvalidUrl = path.resolve(path.dirname(filename), invalidUrl);
+				const resolvedValidUrl = path.resolve(path.dirname(filename), validUrl);
+				const html = `
 					<style>div {background-image: url('${validUrl}');}</style>
 					<style>div {background-image: url('${invalidUrl}');}</style>
 				`;
@@ -233,12 +233,12 @@ describe('inline-html', () => {
 				}
 			}));
 			it('include all urls in error.files up until and including invalid url in style attribute', () => co(function * () {
-				var filename = path.resolve(__dirname, 'index.html');
-				var validUrl = 'fixtures/file.txt';
-				var invalidUrl = 'missing.png';
-				var resolvedInvalidUrl = path.resolve(path.dirname(filename), invalidUrl);
-				var resolvedValidUrl = path.resolve(path.dirname(filename), validUrl);
-				var html = `
+				const filename = path.resolve(__dirname, 'index.html');
+				const validUrl = 'fixtures/file.txt';
+				const invalidUrl = 'missing.png';
+				const resolvedInvalidUrl = path.resolve(path.dirname(filename), invalidUrl);
+				const resolvedValidUrl = path.resolve(path.dirname(filename), validUrl);
+				const html = `
 					<div style="background-image: url('${validUrl}')"></div>
 					<div style="background-image: url('${invalidUrl}')"></div>
 				`;
@@ -253,12 +253,12 @@ describe('inline-html', () => {
 				}
 			}));
 			it('include all urls in error.files up until and including invalid url when style element valid and style attribute invalid', () => co(function * () {
-				var filename = path.resolve(__dirname, 'index.html');
-				var validUrl = 'fixtures/file.txt';
-				var invalidUrl = 'missing.png';
-				var resolvedInvalidUrl = path.resolve(path.dirname(filename), invalidUrl);
-				var resolvedValidUrl = path.resolve(path.dirname(filename), validUrl);
-				var html = `
+				const filename = path.resolve(__dirname, 'index.html');
+				const validUrl = 'fixtures/file.txt';
+				const invalidUrl = 'missing.png';
+				const resolvedInvalidUrl = path.resolve(path.dirname(filename), invalidUrl);
+				const resolvedValidUrl = path.resolve(path.dirname(filename), validUrl);
+				const html = `
 					<style>div {background-image: url("${validUrl}");}</style>
 					<div style="background-image: url('${invalidUrl}')"></div>
 				`;
@@ -275,24 +275,24 @@ describe('inline-html', () => {
 		});
 
 		describe('img', () => {
-			it('inline img src', () => {
-				var filename = path.resolve(__dirname, 'fixtures/file.txt');
-				var html = `<img src="${filename}"/>`;
+			it('inline local source', () => {
+				const filename = path.resolve(__dirname, 'fixtures/file.txt');
+				const html = `<img src="${filename}"/>`;
 				return expect(inline.html(html)).to.eventually.match(/data:.*,.*/);
 			});
-			it('ignore img src remote paths', () => {
-				var html = `<img src="http://test.com/file.txt?query=string#hash"/>`;
+			it('ignore remote source', () => {
+				const html = `<img src="http://test.com/file.txt?query=string#hash"/>`;
 				return expect(inline.html(html)).to.eventually.equal(html);
 			});
-			it('ignore img src template expression paths', () => {
-				var html = `<img src="{{path}}"/>`;
+			it('ignore template expression source', () => {
+				const html = `<img src="{{path}}"/>`;
 				return expect(inline.html(html)).to.eventually.equal(html);
 			});
 			it('throw when src invalid', () => co(function * () {
-				var filename = path.resolve(__dirname, 'index.html');
-				var source = 'missing.png';
-				var html = `<img src="${source}" >`;
-				var resolvedSource = path.resolve(path.dirname(filename), source);
+				const filename = path.resolve(__dirname, 'index.html');
+				const source = 'missing.png';
+				const html = `<img src="${source}" >`;
+				const resolvedSource = path.resolve(path.dirname(filename), source);
 				try {
 					yield inline.html(html, {filename});
 					throw new Error('No error thrown');
@@ -303,12 +303,12 @@ describe('inline-html', () => {
 				}
 			}));
 			it('include all sources in error.files up until and including invalid source', () => co(function * () {
-				var filename = path.resolve(__dirname, 'index.html');
-				var valid = 'fixtures/file.txt';
-				var invalid = 'missing.png';
-				var resolvedInvalid = path.resolve(path.dirname(filename), invalid);
-				var resolvedValid = path.resolve(path.dirname(filename), valid);
-				var html = `
+				const filename = path.resolve(__dirname, 'index.html');
+				const valid = 'fixtures/file.txt';
+				const invalid = 'missing.png';
+				const resolvedInvalid = path.resolve(path.dirname(filename), invalid);
+				const resolvedValid = path.resolve(path.dirname(filename), valid);
+				const html = `
 					<img src="${valid}">
 					<img src="${invalid}">
 				`;
@@ -324,23 +324,126 @@ describe('inline-html', () => {
 			}));
 		});
 
+		describe('link-css', () => {
+		  const filename = path.resolve(__dirname, 'index.html');
+		  const link = (href) => `<link rel="stylesheet" href="${href}"/>`;
+		  it('inline local href', () => co(function * () {
+		    const href = path.resolve(__dirname, 'fixtures/basic.css');
+		    const html = link(href);
+		    const result = yield inline.html(html);
+		    expect(result).to.match(/<style>[^]*basic.css[^]*<\/style>/);
+		  }));
+		  it('ignore remote href', () => co(function * () {
+		    const html = link('http://test.com/main.less');
+		    const result = yield inline.html(html);
+		    expect(result).to.equal(html);
+		  }));
+		  it('ignore template expression href', () => co(function * () {
+		    const html = link('{{href}}');
+		    const result = yield inline.html(html);
+		    expect(result).to.equal(html);
+		  }));
+		  it('inline local nested imports', () => co(function * () {
+		    const href = path.resolve(__dirname, 'fixtures/nested-import.css');
+		    const html = link(href);
+		    const result = yield inline.html(html);
+		    return expect(result).to.match(/<style>[^]*basic.css[^]*<\/style>/)
+		      .and.not.match(/@import/);
+		  }));
+		  it('rebase urls relative to html filename', () => co(function * () {
+		    const href = 'fixtures/url.css';
+		    const html = link(href);
+		    const result = yield inline.html(html, { filename });
+		    expect(result).to.match(/<style>[^]*url\('data:.*,.*'\)[^]*<\/style>/);
+		  }));
+		  it('throw error when href invalid', () => co(function * () {
+		    const invalid = 'fixtures/missing.css';
+		    const invalidResolved = path.resolve(path.dirname(filename), invalid);
+		    const html = link(invalid);
+		    try {
+		      yield inline.html(html, { filename });
+		      throw new Error('No error thrown');
+		    }
+		    catch (error) {
+		      expect(error).to.have.property('filename').that.equals(filename);
+		      expect(error).to.have.property('files').that.contains(invalidResolved);
+		    }
+		  }));
+		  it('throw error when import path invalid', () => co(function * () {
+		    const invalid = 'fixtures/invalid-import.css';
+		    const invalidResolved = path.resolve(path.dirname(filename), invalid);
+		    const html = link(invalid);
+		    try {
+		      yield inline.html(html, { filename });
+		      throw new Error('No error thrown');
+		    }
+		    catch (error) {
+		      expect(error).to.have.property('filename').that.equals(invalidResolved);
+		      expect(error).to.have.property('files').that.contains(invalidResolved);
+		    }
+		  }));
+		  it('throw error when css syntax invalid', () => co(function * () {
+		    const invalid = 'fixtures/invalid-syntax.css';
+		    const invalidResolved = path.resolve(path.dirname(filename), invalid);
+		    const html = link(invalid);
+		    try {
+		      yield inline.html(html, { filename });
+		      throw new Error('No error thrown');
+		    }
+		    catch (error) {
+		      expect(error).to.have.property('filename').that.equals(invalidResolved);
+		      expect(error).to.have.property('files').that.contains(invalidResolved);
+		    }
+		  }));
+		  it('include all local hrefs in error.files when error encountered', () => co(function * () {
+		    const valid = 'fixtures/basic.css';
+		    const invalid = 'fixtures/missing.css';
+		    const validResolved = path.resolve(path.dirname(filename), valid);
+		    const invalidResolved = path.resolve(path.dirname(filename), invalid);
+		    const html = `${link(invalid)}${link(valid)}`;
+		    try {
+		      yield inline.html(html, { filename });
+		      throw new Error('No error thrown');
+		    }
+		    catch (error) {
+		      expect(error).to.have.property('filename').that.equals(filename);
+		      expect(error).to.have.property('files').that.contains(validResolved);
+		      expect(error).to.have.property('files').that.contains(invalidResolved);
+		    }
+		  }));
+		});
+
 		describe('link-less', () => {
-			it('inline link less', () => {
-				var filename = path.resolve(__dirname, 'fixtures/basic.less');
-				var html = `<link rel="stylesheet/less" href="${filename}"/>`;
-				return expect(inline.html(html)).to.eventually.match(/<style>[^]*<\/style>/);
+			it('inline local href', () => {
+				const filename = path.resolve(__dirname, 'fixtures/basic.less');
+				const html = `<link rel="stylesheet/less" href="${filename}"/>`;
+				return expect(inline.html(html)).to.eventually.match(/<style>[^]*basic.less[^]*<\/style>/);
 			});
-			it('inline link less imports', () => {
-				var filename = path.resolve(__dirname, 'fixtures/import.less');
-				var html = `<link rel="stylesheet/less" href="${filename}"/>`;
-				return expect(inline.html(html)).to.eventually.match(/<style>[^]*<\/style>/)
+			it('ignore remote href', () => {
+				const html = `<link rel="stylesheet/less" href="http://test.com/main.less"/>`;
+				return expect(inline.html(html)).to.eventually.equal(html);
+			});
+			it('ignore template expression href', () => {
+				const html = `<link rel="stylesheet/less" href="{{href}}"/>`;
+				return expect(inline.html(html)).to.eventually.equal(html);
+			});
+			it('inline local nested imports', () => {
+				const filename = path.resolve(__dirname, 'fixtures/nested-import.less');
+				const html = `<link rel="stylesheet/less" href="${filename}"/>`;
+				return expect(inline.html(html)).to.eventually.match(/<style>[^]*basic.less[^]*basic.css[^]*<\/style>/)
 					.and.not.match(/@import/);
 			});
+			it('rebase urls relative to html filename', () => {
+				const filename = path.resolve(__dirname, 'index.html');
+				const href = 'fixtures/url.less';
+				const html = `<link rel="stylesheet/less" href="${href}"/>`;
+				return expect(inline.html(html, { filename })).to.eventually.match(/<style>[^]*url\('data:.*,.*'\)[^]*<\/style>/);
+			});
 			it('throw error when link href invalid', () => co(function * () {
-				var filename = path.resolve(__dirname, 'index.html');
-				var href = 'missing.less';
-				var resolvedHref = path.resolve(path.dirname(filename), href);
-				var html = `<link rel="stylesheet/less" href="${href}">`;
+				const filename = path.resolve(__dirname, 'index.html');
+				const href = 'missing.less';
+				const resolvedHref = path.resolve(path.dirname(filename), href);
+				const html = `<link rel="stylesheet/less" href="${href}">`;
 				try {
 					yield inline.html(html, {filename});
 					throw new Error('No error thrown');
@@ -351,10 +454,10 @@ describe('inline-html', () => {
 				}
 			}));
 			it('throw error when less import invalid', () => co(function * () {
-				var filename = path.resolve(__dirname, 'fixtures/index.html');
-				var lessBasename = 'invalidImport.less';
-				var lessFilename = path.resolve(path.dirname(filename), lessBasename);
-				var html = `<link rel="stylesheet/less" href="${lessBasename}">`;
+				const filename = path.resolve(__dirname, 'fixtures/index.html');
+				const lessBasename = 'invalid-import.less';
+				const lessFilename = path.resolve(path.dirname(filename), lessBasename);
+				const html = `<link rel="stylesheet/less" href="${lessBasename}">`;
 				try {
 					yield inline.html(html, {filename});
 					throw new Error('No error thrown');
@@ -365,10 +468,10 @@ describe('inline-html', () => {
 				}
 			}));
 			it('throw error when less syntax invalid', () => co(function * () {
-				var filename = path.resolve(__dirname, 'fixtures/index.html');
-				var lessBasename = 'invalidSyntax.less';
-				var lessFilename = path.resolve(path.dirname(filename), lessBasename);
-				var html = `<link rel="stylesheet/less" href="${lessBasename}">`;
+				const filename = path.resolve(__dirname, 'fixtures/index.html');
+				const lessBasename = 'invalid-syntax.less';
+				const lessFilename = path.resolve(path.dirname(filename), lessBasename);
+				const html = `<link rel="stylesheet/less" href="${lessBasename}">`;
 				try {
 					yield inline.html(html, {filename});
 					throw new Error('No error thrown');
@@ -378,44 +481,48 @@ describe('inline-html', () => {
 					expect(error).to.have.property('files').that.contains(lessFilename);
 				}
 			}));
-			it('throw error when less url invalid', () => co(function * () {
-				var filename = path.resolve(__dirname, 'fixtures/index.html');
-				var lessBasename = 'invalidUrl.less';
-				var badUrl = path.resolve(path.dirname(filename), 'missing.png');
-				var html = `<link rel="stylesheet/less" href="${lessBasename}">`;
+			it('include all local hrefs in error.files when error encountered', () => co(function * () {
+				const filename = path.resolve(__dirname, 'index.html');
+				const valid = 'fixtures/basic.css';
+				const invalid = 'fixtures/missing.css';
+				const validResolved = path.resolve(path.dirname(filename), valid);
+				const invalidResolved = path.resolve(path.dirname(filename), invalid);
+				const html = `
+					<link rel="stylesheet/less" href="${invalid}">
+					<link rel="stylesheet/less" href="${valid}">
+				`;
 				try {
 					yield inline.html(html, {filename});
 					throw new Error('No error thrown');
 				}
 				catch (error) {
-					// expect error.filename to be html file, not less file, since images
-					// aren't inlined until after the compiled less has been inlined into the html.
 					expect(error).to.have.property('filename').that.equals(filename);
-					expect(error).to.have.property('files').that.contains(badUrl);
+					expect(error).to.have.property('files').that.contains(validResolved);
+					expect(error).to.have.property('files').that.contains(invalidResolved);
 				}
 			}));
 		});
 
 		describe('script', () => {
 			it('inline local src', () => {
-				var source = path.resolve(__dirname, 'fixtures/file.txt');
-				var html = `<script src="${source}"></script>`;
-				var contents = fs.readFileSync(source, 'utf8');
+				const source = path.resolve(__dirname, 'fixtures/file.txt');
+				const html = `<script src="${source}"></script>`;
+				const contents = fs.readFileSync(source, 'utf8');
 				return expect(inline.html(html)).to.eventually.equal(`<script>${contents}</script>`);
 			});
 			it('ignore remote src', () => {
-				var html = `<script src="http://test.com/file.txt?query=string#hash"/>`;
+				const html = `<script src="http://test.com/file.txt?query=string#hash"/>`;
 				return expect(inline.html(html)).to.eventually.equal(html);
 			});
 			it('ignore template expression src', () => {
-				var html = `<script src="{{path}}"/>`;
+				const html = `<script src="{{path}}"/>`;
 				return expect(inline.html(html)).to.eventually.equal(html);
 			});
 			it('throw when source invalid', () => co(function * () {
-					var filename = path.resolve(__dirname, 'index.html');
-					var source = 'missing.js';
-					var html = `<script src="${source}"></script>`;
-					var resolvedSource = path.resolve(path.dirname(filename), source);
+					const filename = path.resolve(__dirname, 'index.html');
+					const source = 'missing.js';
+					const html = `<script src="${source}"></script>`;
+					const resolvedSource = path.resolve(path.dirname(filename), source);
 					try {
 						yield inline.html(html, {filename});
 						throw new Error('No error thrown');
@@ -428,12 +535,12 @@ describe('inline-html', () => {
 			);
 			it('include all sources in error.files up until and including invalid source', () => {
 				return co(function * () {
-					var filename = path.resolve(__dirname, 'index.html');
-					var valid = 'fixtures/file.txt';
-					var invalid = 'missing.js';
-					var resolvedInvalid = path.resolve(path.dirname(filename), invalid);
-					var resolvedValid = path.resolve(path.dirname(filename), valid);
-					var html = `
+					const filename = path.resolve(__dirname, 'index.html');
+					const valid = 'fixtures/file.txt';
+					const invalid = 'missing.js';
+					const resolvedInvalid = path.resolve(path.dirname(filename), invalid);
+					const resolvedValid = path.resolve(path.dirname(filename), valid);
+					const html = `
 						<script src="${valid}"></script>
 						<script src="${invalid}"></script>
 					`;