KevinMidboe/inline-html
1
0
Fork 0
mirror of https://github.com/KevinMidboe/inline-html.git synced 2025-10-29 17:40:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Change api to separate html file and string processing.

Browse Source
This commit is contained in:
Alexandre Gigliotti
2015-10-13 13:59:25 -07:00
parent 2c981a6038
commit bd793daae4
9 changed files with 407 additions and 381 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
README.md
View File

@@ -8,39 +8,24 @@ Inline local assets referenced in an HTML document.
[![David](https://img.shields.io/david/panosoft/inline-html.svg)](https://david-dm.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) [![npm downloads](https://img.shields.io/npm/dm/inline-html.svg)](https://www.npmjs.com/package/inline-html)
## Installation This library parses HTML, embeds the contents of local assets that are referenced within that HTML, and returns a new inlined HTML string.
```sh The following HTML elements and CSS data types are inlined:
npm install inline-html
``` - Images - The source path is replaced with a datauri.
- Linked LESS stylesheets - The LESS is compiled and the result is inlined within a `<style>` element. Note that `@imports` are processed as well.
- 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.
## Usage ## Usage
Reads an HTML file, embeds the contents of local assets that are referenced within that file, and returns the inlined `html` string. Assuming ...
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` - `main.less`
```css ```css
@import (inline) 'main.css'; @import (less) 'main.css';
div { background-image: url('path/to/file'); } div { background-image: url('path/to/file'); }
``` ```
@@ -50,57 +35,110 @@ Assuming we have the following files:
@font-face { src: url('path/to/file'); } @font-face { src: url('path/to/file'); }
``` ```
We can use `inline-html`: Then ...
```js ```js
var inlineHtml = require('inline-html'); var co = require('co');
var inline = require('inline-html');
inlineHtml('index.html').then(function (html) { co(function * () {
// ... var 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"/>
`;
html = yield inline.html(html);
console.log(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:..."/>
*/
}); });
``` ```
To create the following `html` string: ## Installation
```html ```sh
<style> npm install inline-html
@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 ## API
- [`inlineHtml`](#inlineHtml) - [`inline.html`](#html)
- [`inline.file`](#file)
- [`Results`](#results)
--- ---
<a name="inlineHtml"/> <a name="html"/>
### inlineHtml ( html [, options] ) ### inline.html ( html [, options] )
Reads an HTML file and embeds referenced local assets into the HTML. Parses an HTML string 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`. Returns a `Promise` that is fulfilled with an `html` string or an instance of [`Results`](#results) depending on the value of `options.verbose`.
__Arguments__ __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. - `html` - An HTML string to inline.
- `options` - `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. - `filename` - The filename used to resolve relative paths. If 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 `{}`. - `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: - `verbose` - A boolean that determines the promises fulfillment value. Supported values are:
- `true`: An instance of [`Results`](#Results). - `true`: An instance of [`Results`](#results).
- `false`: An `html` string. (_default_) - `false`: An `html` string. (_Default_)
<a name="Results"/> __Example__
__Results__
The `Promise` returned by this function is optionally fulfilled with a `results` object that has the following properties: ```js
co(function * () {
var html = yield inline.html(`<img src="test.png">`);
console.log(html); // <img src="data:...">
});
```
---
<a name="file"/>
### inline.file ( filename [, 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` - A filename of an HTML file to inline. Relative file paths are resolved relative to the filename's directory.
- `options`
- `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_)
__Example__
```js
co(function * () {
html = yield inline.file(`index.html`);
console.log(html); // <img src="data:...">
});
```
---
<a name="results"/>
### Results
The `Promise` returned by these functions is optionally fulfilled with a `results` object that has the following properties:
- `html` - The inlined html - `html` - The inlined html
- `files` - An array of filenames for the local assets that were inlined. - `files` - An array of filenames for the local assets that were inlined.

25
lib/index.js
View File

@@ -6,30 +6,22 @@ var inlineLess = require('./inline-less');
var R = require('ramda'); var R = require('ramda');
var Ru = require('@panosoft/ramda-utils'); var Ru = require('@panosoft/ramda-utils');
var inlineHtml = {};
/** /**
* Embed referenced local assets within and HTML file. * Embed referenced local assets within and HTML file.
* *
* @param {String} html * @param {String} html
* Filename or html string.
* @param {Object} options * @param {Object} options
* *
* @return {Promise} * @return {Promise}
*/ */
var inlineHtml = co.wrap(function * (html, options) { inlineHtml.html = co.wrap(function * (html, options) {
options = Ru.defaults({ options = Ru.defaults({
filename: null, filename: null,
less: {}, less: {},
verbose: false verbose: false
}, options || {}); }, options || {});
var filename; var filename = options.filename;
try {
filename = html;
html = yield fs.readFile(filename, 'utf8');
}
catch (error) {
if (error.code === 'ENOENT') filename = options.filename;
else throw error;
}
// Embed assets // Embed assets
var files = [filename]; var files = [filename];
@@ -53,11 +45,14 @@ var inlineHtml = co.wrap(function * (html, options) {
} }
files = R.uniq(files); files = R.uniq(files);
var result = { var result = { html, files };
html,
files
};
return (options.verbose ? result : result.html); return (options.verbose ? result : result.html);
}); });
inlineHtml.file = co.wrap(function * (filename, options) {
var html = yield fs.readFile(filename, 'utf8');
options = R.merge(options || {}, {filename});
return yield inlineHtml.html(html, options);
});
module.exports = inlineHtml; module.exports = inlineHtml;

7
test/fixtures/errors/lessImport/index.html vendored
View File

@@ -1,7 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet/less" href="main.less" />
</head>
<body></body>
</html>

9
test/fixtures/errors/lessSyntax/index.html vendored
View File

@@ -1,9 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet/less" href="main.less" />
</head>
<body>
</body>
</html>

9
test/fixtures/errors/lessUrl/index.html vendored
View File

@@ -1,9 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet/less" href="main.less" />
</head>
<body>
</body>
</html>

0
test/fixtures/errors/lessImport/main.less → test/fixtures/invalidImport.less vendored
View File

0
test/fixtures/errors/lessSyntax/main.less → test/fixtures/invalidSyntax.less vendored
View File

0
test/fixtures/errors/lessUrl/main.less → test/fixtures/invalidUrl.less vendored
View File

596
test/index.js
View File

@@ -7,313 +7,331 @@ var fs = require('fs');
var inline = require('../lib'); var inline = require('../lib');
var path = require('path'); var path = require('path');
describe('inlineHtml', function () { describe('inline-html', () => {
it('html: filename', function () { describe('file()', () => {
var filename = path.resolve(__dirname, './fixtures/file.txt'); it('exists', () => expect(inline).to.have.property('file').that.is.a('function'));
var content = fs.readFileSync(filename, 'utf8');
return expect(inline(filename)).to.eventually.equal(content); it('accept html filename', () => {
}); var filename = path.resolve(__dirname, './fixtures/file.txt');
it('html: string', function () { var content = fs.readFileSync(filename, 'utf8');
var html = 'HTML'; return expect(inline.file(filename)).to.eventually.equal(content);
return expect(inline(html)).to.eventually.equal(html); });
it('options.filename: ignored 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
return expect(inline.file(filename, options)).to.eventually.match(/"data:.*,.*"/);
});
it('options.filename: ignored 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
return expect(inline.file(filename, options)).to.eventually.match(/"data:.*,.*"/);
});
it('throw error when file not found', () => expect(inline.file('missing.html')).to.eventually.be.rejected);
}); });
describe('html()', () => {
it('exists', () => expect(inline).to.have.property('html').that.is.a('function'));
it('inline link less', function () { it('accept html string', () => {
var filename = path.resolve(__dirname, 'fixtures/basic.less'); var html = 'HTML';
var html = `<link rel="stylesheet/less" href="${filename}"/>`; return expect(inline.html(html)).to.eventually.equal(html);
return expect(inline(html)).to.eventually.match(/<style>[^]*<\/style>/); });
});
it('inline link less imports', function () { it('inline link less', () => {
var filename = path.resolve(__dirname, 'fixtures/import.less'); var filename = path.resolve(__dirname, 'fixtures/basic.less');
var html = `<link rel="stylesheet/less" href="${filename}"/>`; var html = `<link rel="stylesheet/less" href="${filename}"/>`;
return expect(inline(html)).to.eventually.match(/<style>[^]*<\/style>/) return expect(inline.html(html)).to.eventually.match(/<style>[^]*<\/style>/);
.and.not.match(/@import/); });
}); it('inline link less imports', () => {
it('inline css url path in style element', function () { var filename = path.resolve(__dirname, 'fixtures/import.less');
var filename = path.resolve(__dirname, 'fixtures/file.txt'); var html = `<link rel="stylesheet/less" href="${filename}"/>`;
var html = `<style>div {background-image: url("${filename}");}</style>`; return expect(inline.html(html)).to.eventually.match(/<style>[^]*<\/style>/)
return expect(inline(html)).to.eventually.match(/data:.*,.*/); .and.not.match(/@import/);
}); });
it('inline css url path in element style attribute', function () { it('inline css url path in style element', () => {
var filename = path.resolve(__dirname, 'fixtures/file.txt'); var filename = path.resolve(__dirname, 'fixtures/file.txt');
var html = `<div style="background-image: url('${filename}');"></div>`; var html = `<style>div {background-image: url("${filename}");}</style>`;
return expect(inline(html)).to.eventually.match(/data:.*,.*/); return expect(inline.html(html)).to.eventually.match(/data:.*,.*/);
}); });
it('inline img src', function () { it('inline css url path in element style attribute', () => {
var filename = path.resolve(__dirname, 'fixtures/file.txt'); var filename = path.resolve(__dirname, 'fixtures/file.txt');
var html = `<img src="${filename}"/>`; var html = `<div style="background-image: url('${filename}');"></div>`;
return expect(inline(html)).to.eventually.match(/data:.*,.*/); return expect(inline.html(html)).to.eventually.match(/data:.*,.*/);
}); });
it('inline img src', () => {
var filename = path.resolve(__dirname, 'fixtures/file.txt');
var html = `<img src="${filename}"/>`;
return expect(inline.html(html)).to.eventually.match(/data:.*,.*/);
});
it('options.verbose: return results object if true', function () { it('options.verbose: return results object if true', () => {
var filename = path.resolve(__dirname, 'fixtures/file.txt'); var filename = path.resolve(__dirname, 'fixtures/file.txt');
var html = `<img src="${filename}"/>`; var html = `<img src="${filename}"/>`;
var options = { verbose: true }; var options = { verbose: true };
return expect(inline(html, options)).to.eventually.be.an('object') return expect(inline.html(html, options)).to.eventually.be.an('object')
.that.contains.keys(['html', 'files']); .that.contains.keys(['html', 'files']);
}); });
it('options.verbose: return html if false', function () { it('options.verbose: return html if false', () => {
var filename = path.resolve(__dirname, 'fixtures/file.txt'); var filename = path.resolve(__dirname, 'fixtures/file.txt');
var html = `<img src="${filename}"/>`; var html = `<img src="${filename}"/>`;
var options = { verbose: false }; var options = { verbose: false };
return expect(inline(html, options)).to.eventually.be.a('string'); return expect(inline.html(html, options)).to.eventually.be.a('string');
}); });
it('options.verbose: default false', function () { it('options.verbose: default false', () => {
var filename = path.resolve(__dirname, 'fixtures/file.txt'); var filename = path.resolve(__dirname, 'fixtures/file.txt');
var html = `<img src="${filename}"/>`; var html = `<img src="${filename}"/>`;
return expect(inline(html)).to.eventually.be.a('string'); return expect(inline.html(html)).to.eventually.be.a('string');
}); });
it('options.filename: ignored for css url path resolution if html filename', function () { it('options.filename: set basepath for css url path resolution', () => {
var html = path.resolve(__dirname, 'fixtures/css-url.html'); // file contains url path relative to itself var filename = path.resolve(__dirname, 'fixtures/fake.html');
var options = { filename: __filename }; // sets filename relative to this test file var dirname = path.dirname(filename);
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 url = 'file.txt'; // Note: path relative to filename's dirname
var uri = datauri(path.resolve(dirname, url)); var uri = datauri(path.resolve(dirname, url));
var html = (path) => `<style>div { background-image: url('${path}'); }</style>`; var html = (path) => `<style>div { background-image: url('${path}'); }</style>`;
var options = { filename: filename }; var options = { filename: filename };
return expect(inline(html(url), options)).to.eventually.equal(html(uri)); return expect(inline.html(html(url), options)).to.eventually.equal(html(uri));
}); });
it('options.filename: set basepath for img src path resolution if html string', function () { it('options.filename: set basepath for img src path resolution', () => {
var filename = path.resolve(__dirname, 'fixtures/fake.html'); var filename = path.resolve(__dirname, 'fixtures/fake.html');
var dirname = path.dirname(filename); var dirname = path.dirname(filename);
var url = 'file.txt'; // Note: path relative to filename's dirname var url = 'file.txt'; // Note: path relative to filename's dirname
var uri = datauri(path.resolve(dirname, url)); var uri = datauri(path.resolve(dirname, url));
var html = (path) => `<img src="${path}"/>`; var html = (path) => `<img src="${path}"/>`;
var options = { filename: filename }; var options = { filename: filename };
return expect(inline(html(url), options)).to.eventually.equal(html(uri)); return expect(inline.html(html(url), options)).to.eventually.equal(html(uri));
}); });
it('options.filename: default to cwd for css url path resolution if html string', function () { it('options.filename: default to cwd for css url path resolution', () => {
var url = 'test/fixtures/file.txt'; // Note: this is relative to cwd var url = 'test/fixtures/file.txt'; // Note: this is relative to cwd
var uri = datauri(url); var uri = datauri(url);
var html = (path) => `<style>div { background-image: url('${path}'); }</style>`; var html = (path) => `<style>div { background-image: url('${path}'); }</style>`;
return expect(inline(html(url))).to.eventually.equal(html(uri)); return expect(inline.html(html(url))).to.eventually.equal(html(uri));
}); });
it('options.filename: default to cwd for img src path resolution if html string', function () { it('options.filename: default to cwd for img src path resolution', () => {
var url = 'test/fixtures/file.txt'; // Note: path relative to cwd var url = 'test/fixtures/file.txt'; // Note: path relative to cwd
var uri = datauri(url); var uri = datauri(url);
var html = (path) => `<img src="${path}"/>`; var html = (path) => `<img src="${path}"/>`;
return expect(inline(html(url))).to.eventually.equal(html(uri)); return expect(inline.html(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 () { it('options.filename: included in results.files for img src if options.verbose true', () => {
var filename = path.resolve(__dirname, 'fixtures/file.txt'); var filename = path.resolve(__dirname, 'fixtures/file.txt');
var html = `<img src="${filename}"/>`; var html = `<img src="${filename}"/>`;
var options = { verbose: true }; var options = { verbose: true };
return expect(inline(html, options)).to.eventually.have.property('files') return expect(inline.html(html, options)).to.eventually.have.property('files')
.that.is.an('array') .that.is.an('array')
.that.contains(filename); .that.contains(filename);
}); });
it('options.filename: included in results.files for css url path if html string and options.verbose true', function () { it('options.filename: included in results.files for css url path if options.verbose true', () => {
var filename = path.resolve(__dirname, 'fixtures/file.txt'); var filename = path.resolve(__dirname, 'fixtures/file.txt');
var html = `<style>div { background-image: url('${filename}'); }</style>`; var html = `<style>div { background-image: url('${filename}'); }</style>`;
var options = { verbose: true }; var options = { verbose: true };
return expect(inline(html, options)).to.eventually.have.property('files') return expect(inline.html(html, options)).to.eventually.have.property('files')
.that.is.an('array') .that.is.an('array')
.that.contains(filename); .that.contains(filename);
}); });
it('preserve self closing tags', function () { it('preserve self closing tags', () => {
var html = '<br/>'; var html = '<br/>';
return expect(inline(html)).to.eventually.equal(html); return expect(inline.html(html)).to.eventually.equal(html);
}); });
it('preserve partials', function () { it('preserve partials', () => {
var html = '{{> partial}}'; var html = '{{> partial}}';
return expect(inline(html)).to.eventually.equal(html); return expect(inline.html(html)).to.eventually.equal(html);
}); });
it('preserve helpers', function () { it('preserve helpers', () => {
var html = '{{helper}}'; var html = '{{helper}}';
return expect(inline(html)).to.eventually.equal(html); return expect(inline.html(html)).to.eventually.equal(html);
}); });
it('ignore css url remote paths', function () { it('ignore css url remote paths', () => {
var html = `<style> div { background-image: url('http://test.com/file.txt?query=string#hash'); }</style>`; var html = `<style> div { background-image: url('http://test.com/file.txt?query=string#hash'); }</style>`;
return expect(inline(html)).to.eventually.equal(html); return expect(inline.html(html)).to.eventually.equal(html);
}); });
it('ignore img src remote paths', function () { it('ignore img src remote paths', () => {
var html = `<img src="http://test.com/file.txt?query=string#hash"/>`; var html = `<img src="http://test.com/file.txt?query=string#hash"/>`;
return expect(inline(html)).to.eventually.equal(html); return expect(inline.html(html)).to.eventually.equal(html);
}); });
it('ignore css url template expression paths', function () { it('ignore css url template expression paths', () => {
var html = `<style> div { background-image: url({{path}}); }</style>`; var html = `<style> div { background-image: url({{path}}); }</style>`;
return expect(inline(html)).to.eventually.equal(html); return expect(inline.html(html)).to.eventually.equal(html);
}); });
it('ignore img src template expression paths', function () { it('ignore img src template expression paths', () => {
var html = `<img src="{{path}}"/>`; var html = `<img src="{{path}}"/>`;
return expect(inline(html)).to.eventually.equal(html); return expect(inline.html(html)).to.eventually.equal(html);
}); });
it('ignore query strings and hashes on local paths', function () { it('ignore query strings and hashes on local paths', () => {
var filename = path.resolve(__dirname, 'fixtures/file.txt'); var filename = path.resolve(__dirname, 'fixtures/file.txt');
var url = `${filename}?query=string#hash`; var url = `${filename}?query=string#hash`;
var uri = datauri(filename); var uri = datauri(filename);
var html = (source) => `<style> div { background-image: url('${source}'); }</style>`; var html = (source) => `<style> div { background-image: url('${source}'); }</style>`;
return expect(inline(html(url))).to.eventually.equal(html(uri)); return expect(inline.html(html(url))).to.eventually.equal(html(uri));
}); });
it('handle assets with a space in their filename', function () { it('handle assets with a space in their filename', () => {
var filename = path.resolve(__dirname, 'fixtures/file space.txt'); var filename = path.resolve(__dirname, 'fixtures/file space.txt');
var uri = datauri(filename); var uri = datauri(filename);
var html = (source) => `<style> div { background-image: url('${source}'); }</style>`; var html = (source) => `<style> div { background-image: url('${source}'); }</style>`;
return expect(inline(html(filename))).to.eventually.equal(html(uri)); return expect(inline.html(html(filename))).to.eventually.equal(html(uri));
}); });
// Error handling // Error handling
// inline-img // inline-img
it('throw error when html image source invalid', () => { it('throw error when html image source invalid', () => {
return co(function * () { return co(function * () {
var filename = path.resolve(__dirname, 'index.html'); var filename = path.resolve(__dirname, 'index.html');
var source = 'missing.png'; var source = 'missing.png';
var html = `<img src="${source}" >`; var html = `<img src="${source}" >`;
var resolvedSource = path.resolve(path.dirname(filename), source); var resolvedSource = path.resolve(path.dirname(filename), source);
try { try {
yield inline(html, {filename}); yield inline.html(html, {filename});
throw new Error('No error thrown'); throw new Error('No error thrown');
} }
catch (error) { catch (error) {
expect(error).to.have.property('filename').that.equals(filename); expect(error).to.have.property('filename').that.equals(filename);
expect(error).to.have.property('files').that.contains(resolvedSource); expect(error).to.have.property('files').that.contains(resolvedSource);
} }
}); });
}); });
// inline-style // inline-style
it('throw error when html style attribute syntax invalid', () => { it('throw error when html style attribute syntax invalid', () => {
return co(function * () { return co(function * () {
var filename = path.resolve(__dirname, 'index.html'); var filename = path.resolve(__dirname, 'index.html');
var html = `<div style="background url()"></div>`; var html = `<div style="background url()"></div>`;
try { try {
yield inline(html, {filename}); yield inline.html(html, {filename});
throw new Error('No error thrown'); throw new Error('No error thrown');
} }
catch (error) { catch (error) {
expect(error).to.have.property('filename').that.equals(filename); expect(error).to.have.property('filename').that.equals(filename);
expect(error).to.have.property('files').that.contains(filename); expect(error).to.have.property('files').that.contains(filename);
} }
}); });
}); });
it('throw error when html style attribute url invalid', () => { it('throw error when html style attribute url invalid', () => {
return co(function * () { return co(function * () {
var filename = path.resolve(__dirname, 'index.html'); var filename = path.resolve(__dirname, 'index.html');
var url = 'missing.png'; var url = 'missing.png';
var resolvedUrl = path.resolve(path.dirname(filename), url); var resolvedUrl = path.resolve(path.dirname(filename), url);
var html = `<div style="background-image: url('${url}')"></div>`; var html = `<div style="background-image: url('${url}')"></div>`;
try { try {
yield inline(html, {filename}); yield inline.html(html, {filename});
throw new Error('No error thrown'); throw new Error('No error thrown');
} }
catch (error) { catch (error) {
expect(error).to.have.property('filename').that.equals(filename); expect(error).to.have.property('filename').that.equals(filename);
expect(error).to.have.property('files').that.contains(resolvedUrl); expect(error).to.have.property('files').that.contains(resolvedUrl);
} }
}); });
}); });
it('throw error when html style syntax invalid', () => { it('throw error when html style syntax invalid', () => {
return co(function * () { return co(function * () {
var filename = path.resolve(__dirname, 'index.html'); var filename = path.resolve(__dirname, 'index.html');
var html = `<style>div {</style>`; var html = `<style>div {</style>`;
try { try {
yield inline(html, {filename}); yield inline.html(html, {filename});
throw new Error('No error thrown'); throw new Error('No error thrown');
} }
catch (error) { catch (error) {
expect(error).to.have.property('filename').that.equals(filename); expect(error).to.have.property('filename').that.equals(filename);
expect(error).to.have.property('files').that.contains(filename); expect(error).to.have.property('files').that.contains(filename);
} }
}); });
}); });
it('throw error when html style url invalid', () => { it('throw error when html style url invalid', () => {
return co(function * () { return co(function * () {
var filename = path.resolve(__dirname, 'index.html'); var filename = path.resolve(__dirname, 'index.html');
var url = 'missing.png'; var url = 'missing.png';
var resolvedUrl = path.resolve(path.dirname(filename), url); var resolvedUrl = path.resolve(path.dirname(filename), url);
var html = `<style>div { background-image: url('${url}'); }</style>`; var html = `<style>div { background-image: url('${url}'); }</style>`;
try { try {
yield inline(html, {filename}); yield inline.html(html, {filename});
throw new Error('No error thrown'); throw new Error('No error thrown');
} }
catch (error) { catch (error) {
expect(error).to.have.property('filename').that.equals(filename); expect(error).to.have.property('filename').that.equals(filename);
expect(error).to.have.property('files').that.contains(resolvedUrl); expect(error).to.have.property('files').that.contains(resolvedUrl);
} }
}); });
}); });
// inline-link-less // inline-link-less
it('throw error when link href invalid', () => { it('throw error when link href invalid', () => {
return co(function * () { return co(function * () {
var filename = path.resolve(__dirname, 'index.html'); var filename = path.resolve(__dirname, 'index.html');
var href = 'missing.less'; var href = 'missing.less';
var resolvedHref = path.resolve(path.dirname(filename), href); var resolvedHref = path.resolve(path.dirname(filename), href);
var html = `<link rel="stylesheet/less" href="${href}">`; var html = `<link rel="stylesheet/less" href="${href}">`;
try { try {
yield inline(html, {filename}); yield inline.html(html, {filename});
throw new Error('No error thrown'); throw new Error('No error thrown');
} }
catch (error) { catch (error) {
expect(error).to.have.property('filename').that.equals(filename); expect(error).to.have.property('filename').that.equals(filename);
expect(error).to.have.property('files').that.contains(resolvedHref); expect(error).to.have.property('files').that.contains(resolvedHref);
} }
}); });
}); });
it('throw error when less import invalid', () => { it('throw error when less import invalid', () => {
return co(function * () { return co(function * () {
var filename = path.resolve(__dirname, 'fixtures/errors/lessImport/index.html'); var filename = path.resolve(__dirname, 'fixtures/index.html');
var lessFilename = path.resolve(path.dirname(filename), 'main.less'); var lessBasename = 'invalidImport.less';
try { var lessFilename = path.resolve(path.dirname(filename), lessBasename);
yield inline(filename); var html = `<link rel="stylesheet/less" href="${lessBasename}">`;
throw new Error('No error thrown'); try {
} yield inline.html(html, {filename});
catch (error) { throw new Error('No error thrown');
expect(error).to.have.property('filename').that.equals(lessFilename); }
expect(error).to.have.property('files').that.contains(lessFilename); catch (error) {
} expect(error).to.have.property('filename').that.equals(lessFilename);
}); expect(error).to.have.property('files').that.contains(lessFilename);
}); }
it('throw error when less syntax invalid', () => { });
return co(function * () { });
var filename = path.resolve(__dirname, 'fixtures/errors/lessSyntax/index.html'); it('throw error when less syntax invalid', () => {
var lessFilename = path.resolve(path.dirname(filename), 'main.less'); return co(function * () {
try { var filename = path.resolve(__dirname, 'fixtures/index.html');
yield inline(filename); var lessBasename = 'invalidSyntax.less';
throw new Error('No error thrown'); var lessFilename = path.resolve(path.dirname(filename), lessBasename);
} var html = `<link rel="stylesheet/less" href="${lessBasename}">`;
catch (error) { try {
expect(error).to.have.property('filename').that.equals(lessFilename); yield inline.html(html, {filename});
expect(error).to.have.property('files').that.contains(lessFilename); throw new Error('No error thrown');
} }
}); catch (error) {
}); expect(error).to.have.property('filename').that.equals(lessFilename);
it('throw error when less url invalid', () => { expect(error).to.have.property('files').that.contains(lessFilename);
return co(function * () { }
var filename = path.resolve(__dirname, 'fixtures/errors/lessUrl/index.html'); });
var lessFilename = path.resolve(path.dirname(filename), 'main.less'); });
var badUrl = path.resolve(path.dirname(filename), 'missing.png'); it('throw error when less url invalid', () => {
try { return co(function * () {
yield inline(filename); var filename = path.resolve(__dirname, 'fixtures/index.html');
throw new Error('No error thrown'); var lessBasename = 'invalidUrl.less';
} var lessFilename = path.resolve(path.dirname(filename), lessBasename);
catch (error) { var badUrl = path.resolve(path.dirname(filename), 'missing.png');
// expect error.filename to be html file, not less file, since images var html = `<link rel="stylesheet/less" href="${lessBasename}">`;
// aren't inlined until after the compiled less has been inlined into the html. try {
expect(error).to.have.property('filename').that.equals(filename); yield inline.html(html, {filename});
expect(error).to.have.property('files').that.contains(badUrl); 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);
}
});
}); });
}); });
}); });