0.1.8

.gitignore

@@ -1,2 +1,4 @@
 node_modules
-test/test.html
+.idea
+*.log
+test/test.html

.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+notifications:
+  email:
+    on_success: change
+    on_failure: always

README.md

@@ -0,0 +1,106 @@
+# inline-html
+
+Inline local assets referenced in an HTML document.
+
+[![npm version](https://img.shields.io/npm/v/inline-html.svg)](https://www.npmjs.com/package/inline-html)
+[![npm license](https://img.shields.io/npm/l/inline-html.svg)](https://www.npmjs.com/package/inline-html)
+[![Travis](https://img.shields.io/travis/panosoft/inline-html.svg)](https://travis-ci.org/panosoft/inline-html)
+[![David](https://img.shields.io/david/panosoft/inline-html.svg)](https://david-dm.org/panosoft/inline-html)
+[![npm downloads](https://img.shields.io/npm/dm/inline-html.svg)](https://www.npmjs.com/package/inline-html)
+
+## Installation
+
+```sh
+npm install inline-html
+```
+
+## Usage
+
+Reads an HTML file, embeds the contents of local assets that are referenced within that file, and returns the inlined `html` string.
+
+The following elements and data types are inlined:
+
+- LESS stylesheets - The LESS is compiled and the result is inlined within a `<style>` element.
+- 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.
+- Images - The source path is replaced with a datauri.
+
+Assuming we have the following files:
+
+- `index.html`
+
+	```html
+	<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>
+	<img src="path/to/file"/>
+	```
+
+- `main.less`
+
+	```css
+	@import (inline) 'main.css';
+	div { background-image: url('path/to/file'); }
+	```
+
+- `main.css`
+
+	```css
+	@font-face { src: url('path/to/file'); }
+	```
+
+We can use `inline-html`:
+
+```js
+var inlineHtml = require('inline-html');
+
+inlineHtml('index.html').then(function (html) {
+	// ...
+});
+```
+
+To create the following `html` string:
+
+```html
+<style>
+	@font-face { src: url('data:...'); }
+	div { background-image: url('data:...'); }
+</style>
+<style>
+	div { background-image: url('data:...'); }
+</style>
+<div style="background-image: url('data:...');"></div>
+<img src="data:..."/>
+```
+
+## API
+
+- [`inlineHtml`](#inlineHtml)
+
+---
+
+<a name="inlineHtml"/>
+### inlineHtml ( html [, options] )
+
+Reads an HTML file and embeds referenced local assets into the HTML.
+
+Returns a `Promise` that is fulfilled with an `html` string or an instance of [`Results`](#Results) depending on the value of `options.verbose`.
+
+__Arguments__
+
+- `html` - An HTML string or a filename of an HTML file to inline. Relative file paths are resolved relative to `options.filename` if a string or the filename's directory if a filename.
+- `options`
+	- `filename` - The filename used to resolve relative paths when `html` is a string. If `html` is a string and this option is not provided, relative paths will be resolved relative to the process's current working directory.
+	- `less` - An object containing LESS options to pass to the less compiler. Defaults to `{}`.
+	- `verbose` - A boolean that determines the promises fulfillment value. Supported values are:
+		- `true`: An instance of [`Results`](#Results).
+		- `false`: An `html` string. (_default_)
+
+<a name="Results"/>
+__Results__
+
+The `Promise` returned by this function is optionally fulfilled with a `results` object that has the following properties:
+
+- `html` - The inlined html
+- `files` - An array of filenames for the local assets that were inlined.

lib/index.js

@@ -6,12 +6,25 @@ var inlineStyle = require('./inline-style');
 var inlineImg = require('./inline-img');
 var inlineLinkLess = require('./inline-link-less');
 
-var inline = co.wrap(function * (filename, options) {
+var inline = co.wrap(function * (html, options) {
 	options = _.defaults(options || {}, {
+		filename: null,
 		less: {},
 		verbose: false
 	});
-	var html = yield fs.readFile(filename, 'utf8');
+	var filename;
+	try {
+		filename = html;
+		html = yield fs.readFile(filename, 'utf8');
+	}
+	catch (error) {
+		if (error.code === 'ENOENT') {
+			filename = options.filename;
+		}
+		else {
+			throw error;
+		}
+	}
 	var files = [filename];
 
 	// Inline links

lib/inline-css-url.js

@@ -1,21 +1,43 @@
+var _ = require('lodash');
 var datauri = require('datauri');
 var isLocalPath = require('is-local-path');
 var path = require('path');
 var postcss = require('postcss');
-var url = require('postcss-url');
+var postcssUrl = require('postcss-url');
+var url = require('url');
 
+/**
+ * Returns url path without query string and hash if present.
+ *
+ * @param path
+ *
+ * @returns path
+ */
+var clean = function (path) {
+	path = url.parse(path);
+	path = _.pick(path, ['protocol', 'host', 'pathname']);
+	return url.format(path);
+};
+/**
+ * Convert local url data type paths to datauris.
+ *
+ * @param css
+ * @param filename
+ * @returns {{css: (css|any), files: Array}}
+ */
 var inline = function (css, filename) {
 	var files = [];
 	var basePath = path.dirname(filename);
 	var result = postcss()
-		.use(url({
-			url: function (url) {
-				if (isLocalPath(url)) {
-					url = path.resolve(basePath, url);
-					files.push(url);
-					url = datauri(url);
+		.use(postcssUrl({
+			url: function (urlPath) {
+				if (isLocalPath(urlPath)) {
+					urlPath = clean(urlPath);
+					urlPath = path.resolve(basePath, urlPath);
+					files.push(urlPath);
+					urlPath = datauri(urlPath);
 				}
-				return url;
+				return urlPath;
 			}
 		}))
 		.process(css);

lib/inline-img.js

@@ -18,7 +18,7 @@ var inline = function (html, filename) {
 		$(element).attr('src', src);
 	});
 	return {
-		html: $.html(),
+		html: $.xml(),
 		files: files
 	};
 };

lib/inline-link-less.js

@@ -57,7 +57,7 @@ var inline = co.wrap(function * (html, filename, options) {
 	}));
 
 	return {
-		html: $.html(),
+		html: $.xml(),
 		files: files
 	};
 });

lib/inline-style.js

@@ -36,9 +36,9 @@ var inline = function (html, filename) {
 	});
 
 	return {
-		html: $.html(),
+		html: $.xml(),
 		files: files
 	};
 };
 
-module.exports = inline;
+module.exports = inline;

package.json

@@ -1,14 +1,14 @@
 {
   "name": "inline-html",
-  "version": "0.1.1",
-  "description": "Inline an html file.",
+  "version": "0.1.8",
+  "description": "Inline local assets referenced in an HTML document.",
   "repository": "panosoft/inline-html",
   "main": "lib/index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "mocha --harmony_arrow_functions"
   },
   "author": "",
-  "license": "ISC",
+  "license": "MIT",
   "dependencies": {
     "cheerio": "^0.19.0",
     "co": "^4.6.0",
@@ -17,8 +17,13 @@
     "less": "^2.5.1",
     "lodash": "^3.10.0",
     "mz": "^2.0.0",
-    "postcss": "^4.1.16",
+    "postcss": "^5.0.0",
     "postcss-url": "^4.0.0",
     "string": "^3.3.0"
+  },
+  "devDependencies": {
+    "chai": "^3.2.0",
+    "chai-as-promised": "^5.1.0",
+    "mocha": "^2.2.5"
   }
 }

test/fixtures/assets/imported.css

@@ -1,8 +0,0 @@
-body {
-    border: solid 4px green;
-}
-#import {
-    background-image: url('./person.png');
-    background-size: contain;
-    background-repeat: no-repeat;
-}

test/fixtures/basic.css

@@ -0,0 +1 @@
+div { color: blue; }

test/fixtures/basic.less

@@ -0,0 +1 @@
+div { color: blue; }

test/fixtures/css-url.html

@@ -0,0 +1 @@
+<style>div { background-image: url("file.txt"); }</style>

test/fixtures/file.txt

@@ -0,0 +1 @@
+Test.

test/fixtures/img.html

@@ -0,0 +1 @@
+<img src="file.txt"/>

test/fixtures/import.less

@@ -0,0 +1,2 @@
+@import 'basic.less';
+@import (inline) 'basic.css';

test/fixtures/index.html

@@ -1,25 +0,0 @@
-<!doctype html>
-<html>
-<head>
-    <link rel="stylesheet/less" href="main.less"/>
-    <style>
-        div {
-            padding-left: 2em;
-        }
-        #style {
-            background-image: url('./assets/person.png');
-            background-size: contain;
-            background-repeat: no-repeat;
-        }
-    </style>
-</head>
-<body>
-    <div id="link">Link</div>
-    <div id="import">Import</div>
-    <div id="style">Style</div>
-    <div id="attribute" style="background-image: url('./assets/person.png'); background-size: contain; background-repeat: no-repeat;">Attribute</div>
-    <img height="32px" width="32px" src="./assets/person.png"/>Image
-    {{> partial}}
-    {{helper}}
-</body>
-</html>

test/fixtures/main.less

@@ -1,7 +0,0 @@
-@import (less) './assets/imported.css';
-
-#link {
-    background-image: url('assets/person.png');
-    background-size: contain;
-    background-repeat: no-repeat;
-}

test/index.js

@@ -1,13 +1,163 @@
 var inline = require('../lib');
-var path = require('path');
+var expect = require('chai')
+	.use(require('chai-as-promised'))
+	.expect;
+var datauri = require('datauri');
 var fs = require('fs');
+var path = require('path');
 
-var filepath = path.resolve(__dirname, './fixtures/index.html');
-var options = {verbose: true};
+describe('inlineHtml', function () {
 
-inline(filepath, options)
-	.then(function (html) {
-		console.log(html);
-		fs.writeFileSync('./test.html', html);
-	})
-	.catch(console.error);
+	it('html: filename', function () {
+		var filename = path.resolve(__dirname, './fixtures/file.txt');
+		var content = fs.readFileSync(filename, 'utf8');
+		return expect(inline(filename)).to.eventually.equal(content);
+	});
+	it('html: string', function () {
+		var html = 'HTML';
+		return expect(inline(html)).to.eventually.equal(html);
+	});
+
+
+	it('inline link less', function () {
+		var filename = path.resolve(__dirname, 'fixtures/basic.less');
+		var html = `<link rel="stylesheet/less" href="${filename}"/>`;
+		return expect(inline(html)).to.eventually.match(/<style>[^]*<\/style>/);
+	});
+	it('inline link less imports', function () {
+		var filename = path.resolve(__dirname, 'fixtures/import.less');
+		var html = `<link rel="stylesheet/less" href="${filename}"/>`;
+		return expect(inline(html)).to.eventually.match(/<style>[^]*<\/style>/)
+			.and.not.match(/@import/);
+	});
+	it('inline css url path in style element', function () {
+		var filename = path.resolve(__dirname, 'fixtures/file.txt');
+		var html = `<style>div {background-image: url("${filename}");}</style>`;
+		return expect(inline(html)).to.eventually.match(/data:.*,.*/);
+	});
+	it('inline css url path in element style attribute', function () {
+		var filename = path.resolve(__dirname, 'fixtures/file.txt');
+		var html = `<div style="background-image: url('${filename}');"></div>`;
+		return expect(inline(html)).to.eventually.match(/data:.*,.*/);
+	});
+	it('inline img src', function () {
+		var filename = path.resolve(__dirname, 'fixtures/file.txt');
+		var html = `<img src="${filename}"/>`;
+		return expect(inline(html)).to.eventually.match(/data:.*,.*/);
+	});
+
+
+	it('options.verbose: return results object if true', function () {
+		var filename = path.resolve(__dirname, 'fixtures/file.txt');
+		var html = `<img src="${filename}"/>`;
+		var options = { verbose: true };
+		return expect(inline(html, options)).to.eventually.be.an('object')
+			.that.contains.keys(['html', 'files']);
+	});
+	it('options.verbose: return html if false', function () {
+		var filename = path.resolve(__dirname, 'fixtures/file.txt');
+		var html = `<img src="${filename}"/>`;
+		var options = { verbose: false };
+		return expect(inline(html, options)).to.eventually.be.a('string');
+	});
+	it('options.verbose: default false', function () {
+		var filename = path.resolve(__dirname, 'fixtures/file.txt');
+		var html = `<img src="${filename}"/>`;
+		return expect(inline(html)).to.eventually.be.a('string');
+	});
+
+
+	it('options.filename: ignored for css url path resolution if html filename', function () {
+		var html = 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
+		return expect(inline(html, options)).to.eventually.match(/"data:.*,.*"/);
+	});
+	it('options.filename: ignored for img src path resolution if html filename', function () {
+		var html = path.resolve(__dirname, 'fixtures/img.html'); // file contains src relative to itself
+		var options = { filename: __filename }; // sets filename relative to this test file
+		return expect(inline(html, options)).to.eventually.match(/"data:.*,.*"/);
+	});
+	it('options.filename: set basepath for css url path resolution if html string', function () {
+		var filename = path.resolve(__dirname, 'fixtures/fake.html');
+		var dirname = path.dirname(filename);
+
+		var url = 'file.txt'; // Note: path relative to filename's dirname
+		var uri = datauri(path.resolve(dirname, url));
+
+		var html = (path) => `<style>div { background-image: url('${path}'); }</style>`;
+		var options = { filename: filename };
+		return expect(inline(html(url), options)).to.eventually.equal(html(uri));
+	});
+	it('options.filename: set basepath for img src path resolution if html string', function () {
+		var filename = path.resolve(__dirname, 'fixtures/fake.html');
+		var dirname = path.dirname(filename);
+
+		var url = 'file.txt'; // Note: path relative to filename's dirname
+		var uri = datauri(path.resolve(dirname, url));
+
+		var html = (path) => `<img src="${path}"/>`;
+		var options = { filename: filename };
+		return expect(inline(html(url), options)).to.eventually.equal(html(uri));
+	});
+	it('options.filename: default to cwd for css url path resolution if html string', function () {
+		var url = 'test/fixtures/file.txt'; // Note: this is relative to cwd
+		var uri = datauri(url);
+
+		var html = (path) => `<style>div { background-image: url('${path}'); }</style>`;
+		return expect(inline(html(url))).to.eventually.equal(html(uri));
+	});
+	it('options.filename: default to cwd for img src path resolution if html string', function () {
+		var url = 'test/fixtures/file.txt'; // Note: path relative to cwd
+		var uri = datauri(url);
+
+		var html = (path) => `<img src="${path}"/>`;
+		return expect(inline(html(url))).to.eventually.equal(html(uri));
+	});
+	it('options.filename: included in results.files for img src if html string and options.verbose true', function () {
+		var filename = path.resolve(__dirname, 'fixtures/file.txt');
+		var html = `<img src="${filename}"/>`;
+		var options = { verbose: true };
+		return expect(inline(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 html string and options.verbose true', function () {
+		var filename = path.resolve(__dirname, 'fixtures/file.txt');
+		var html = `<style>div { background-image: url('${filename}'); }</style>`;
+		var options = { verbose: true };
+		return expect(inline(html, options)).to.eventually.have.property('files')
+			.that.is.an('array')
+			.that.contains(filename);
+	});
+
+
+	it('preserve self closing tags', function () {
+		var html = '<br/>';
+		return expect(inline(html)).to.eventually.equal(html);
+	});
+	it('preserve partials', function () {
+		var html = '{{> partial}}';
+		return expect(inline(html)).to.eventually.equal(html);
+	});
+	it('preserve helpers', function () {
+		var html = '{{helper}}';
+		return expect(inline(html)).to.eventually.equal(html);
+	});
+
+	it('ignore css url remote paths', function () {
+		var html = `<style> div { background-image: url('http://test.com/file.txt?query=string#hash'); }</style>`;
+		return expect(inline(html)).to.eventually.equal(html);
+	});
+	it('ignore img src remote paths', function () {
+		var html = `<img src="http://test.com/file.txt?query=string#hash"/>`;
+		return expect(inline(html)).to.eventually.equal(html);
+	});
+	it('ignore query strings and hashes on local paths', function () {
+		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>`;
+		return expect(inline(html(url))).to.eventually.equal(html(uri));
+	});
+
+});

test/inline-css-url.js

@@ -1,7 +0,0 @@
-var inline = require('../lib/inline-css-url');
-var fs = require('fs');
-
-var filePath = './fixtures/assets/imported.css';
-var css = fs.readFileSync(filePath, 'utf8');
-var result = inline(css, filePath);
-console.log(result.css);

test/inline-link-less.js

@@ -1,10 +0,0 @@
-var inline = require('../lib/inline-link-less');
-var fs = require('fs');
-var path = require('path');
-
-var filepath = path.resolve(__dirname, './fixtures/index.html');
-var html = fs.readFileSync(filepath, 'utf8');
-
-inline(html, filepath, {})
-	.then(console.log)
-	.catch(console.error);