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

Refactor.

Browse Source
This commit is contained in:
Alexandre Gigliotti
2015-12-01 09:50:47 -08:00
parent 3881565a28
commit b3d479224e
4 changed files with 157 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
lib/css-url.js
View File

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

13
lib/img.js
View File

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

18
lib/link-less.js
View File

@@ -7,7 +7,6 @@ const R = require('ramda');
const Ru = require('@panosoft/ramda-utils'); const Ru = require('@panosoft/ramda-utils');
const forEachIndexed = R.addIndex(R.forEach); 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) { const render = R.curryN(2, co.wrap(function * (options, filename) {
options = R.merge(options || {}, { filename }); options = R.merge(options || {}, { filename });
@@ -28,24 +27,21 @@ const render = R.curryN(2, co.wrap(function * (options, filename) {
const inlineLess = co.wrap(function * ($, filename, options) { const inlineLess = co.wrap(function * ($, filename, options) {
options = Ru.defaults({ less: {} }, options || {}); options = Ru.defaults({ less: {} }, options || {});
options = Ru.defaults({ relativeUrls: true }, options.less); options = Ru.defaults({ relativeUrls: true }, options.less);
var files = [];
const basedir = path.dirname(filename); const basedir = path.dirname(filename);
const getAttr = R.curry((attr, element) => $(element).attr(attr)); var files = [];
const getStylesheet = R.pipe(getAttr('href'), resolve(basedir));
try { try {
const links = $('link[rel="stylesheet/less"]') const links = $('link[rel="stylesheet/less"]')
.filter((index, link) => isLocalPath($(link).attr('href'))) .filter((index, link) => isLocalPath($(link).attr('href')))
.toArray(); .toArray();
const getHref = element => path.resolve(basedir, $(element).attr('href'));
const stylesheets = R.map(getStylesheet, links); const hrefs = R.map(getHref, links);
files = R.concat(files, stylesheets); files = R.concat(files, hrefs);
const outputs = yield R.map(render(options), stylesheets); const outputs = yield R.map(render(options), hrefs);
const imports = R.flatten(R.map(R.prop('imports'), outputs)); const imports = R.flatten(R.map(R.prop('imports'), outputs));
files = R.concat(files, imports); files = R.concat(files, imports);
const styles = R.map(output => $('<style>').html(output.css), outputs); const styles = R.map(output => $('<style>').html(output.css), outputs);
const replaceLink = (link, index) => $(link).replaceWith(styles[index]);
forEachIndexed((link, index) => $(link).replaceWith(styles[index]), links); forEachIndexed(replaceLink, links);
files = R.uniq(files); files = R.uniq(files);
return { $, files }; return { $, files };
} }

280
test/index.js
View File

@@ -1,11 +1,11 @@
var co = require('co'); const co = require('co');
var datauri = require('datauri'); const datauri = require('datauri');
var expect = require('chai') const expect = require('chai')
.use(require('chai-as-promised')) .use(require('chai-as-promised'))
.expect; .expect;
var fs = require('fs'); const fs = require('fs');
var inline = require('../lib'); const inline = require('../lib');
var path = require('path'); const path = require('path');
describe('inline-html', () => { describe('inline-html', () => {
@@ -13,19 +13,19 @@ describe('inline-html', () => {
it('exists', () => expect(inline).to.have.property('file').that.is.a('function')); it('exists', () => expect(inline).to.have.property('file').that.is.a('function'));
it('accept html filename', () => { it('accept html filename', () => {
var filename = path.resolve(__dirname, './fixtures/file.txt'); const filename = path.resolve(__dirname, './fixtures/file.txt');
var content = fs.readFileSync(filename, 'utf8'); const content = fs.readFileSync(filename, 'utf8');
return expect(inline.file(filename)).to.eventually.equal(content); return expect(inline.file(filename)).to.eventually.equal(content);
}); });
it('options.filename: always reset to current filename and used for css url path resolution', () => { 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 const 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 options = { filename: __filename }; // sets filename relative to this test file
return expect(inline.file(filename, options)).to.eventually.match(/"data:.*,.*"/); 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', () => { 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 const 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 options = { filename: __filename }; // sets filename relative to this test file
return expect(inline.file(filename, options)).to.eventually.match(/"data:.*,.*"/); 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('exists', () => expect(inline).to.have.property('html').that.is.a('function'));
it('accept html string', () => { it('accept html string', () => {
var html = 'HTML'; const html = 'HTML';
return expect(inline.html(html)).to.eventually.equal(html); return expect(inline.html(html)).to.eventually.equal(html);
}); });
it('preserve self closing tags', () => { it('preserve self closing tags', () => {
var html = '<br/>'; const html = '<br/>';
return expect(inline.html(html)).to.eventually.equal(html); return expect(inline.html(html)).to.eventually.equal(html);
}); });
it('preserve partials', () => { it('preserve partials', () => {
var html = '{{> partial}}'; const html = '{{> partial}}';
return expect(inline.html(html)).to.eventually.equal(html); return expect(inline.html(html)).to.eventually.equal(html);
}); });
it('preserve helpers', () => { it('preserve helpers', () => {
var html = '{{helper}}'; const html = '{{helper}}';
return expect(inline.html(html)).to.eventually.equal(html); return expect(inline.html(html)).to.eventually.equal(html);
}); });
it('options.filename: default to cwd for css url path resolution', () => { it('options.filename: default to cwd for css url path resolution', () => {
var url = 'test/fixtures/file.txt'; // Note: this is relative to cwd const url = 'test/fixtures/file.txt'; // Note: this is relative to cwd
var uri = datauri(url); 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)); return expect(inline.html(html(url))).to.eventually.equal(html(uri));
}); });
it('options.filename: set basepath for css url path resolution', () => { it('options.filename: set basepath for css url path resolution', () => {
var filename = path.resolve(__dirname, 'fixtures/fake.html'); const filename = path.resolve(__dirname, 'fixtures/fake.html');
var dirname = path.dirname(filename); const dirname = path.dirname(filename);
var url = 'file.txt'; // Note: path relative to filename's dirname const url = 'file.txt'; // Note: path relative to filename's dirname
var uri = datauri(path.resolve(dirname, url)); const uri = datauri(path.resolve(dirname, url));
var html = (path) => `<style>div { background-image: url('${path}'); }</style>`; const html = (path) => `<style>div { background-image: url('${path}'); }</style>`;
var options = { filename: filename }; const options = { filename: filename };
return expect(inline.html(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 img src path resolution', () => { it('options.filename: default to cwd for img src path resolution', () => {
var url = 'test/fixtures/file.txt'; // Note: path relative to cwd const url = 'test/fixtures/file.txt'; // Note: path relative to cwd
var uri = datauri(url); 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)); return expect(inline.html(html(url))).to.eventually.equal(html(uri));
}); });
it('options.filename: set basepath for img src path resolution', () => { it('options.filename: set basepath for img src path resolution', () => {
var filename = path.resolve(__dirname, 'fixtures/fake.html'); const filename = path.resolve(__dirname, 'fixtures/fake.html');
var dirname = path.dirname(filename); const dirname = path.dirname(filename);
var url = 'file.txt'; // Note: path relative to filename's dirname const url = 'file.txt'; // Note: path relative to filename's dirname
var uri = datauri(path.resolve(dirname, url)); const uri = datauri(path.resolve(dirname, url));
var html = (path) => `<img src="${path}"/>`; const html = (path) => `<img src="${path}"/>`;
var options = { filename: filename }; const options = { filename: filename };
return expect(inline.html(html(url), options)).to.eventually.equal(html(uri)); 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', () => { it('options.filename: included in results.files for img src if options.verbose true', () => {
var filename = path.resolve(__dirname, 'fixtures/file.txt'); const filename = path.resolve(__dirname, 'fixtures/file.txt');
var html = `<img src="${filename}"/>`; const html = `<img src="${filename}"/>`;
var options = { verbose: true }; const options = { verbose: true };
return expect(inline.html(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 options.verbose true', () => { it('options.filename: included in results.files for css url path if options.verbose true', () => {
var filename = path.resolve(__dirname, 'fixtures/file.txt'); const filename = path.resolve(__dirname, 'fixtures/file.txt');
var html = `<style>div { background-image: url('${filename}'); }</style>`; const html = `<style>div { background-image: url('${filename}'); }</style>`;
var options = { verbose: true }; const options = { verbose: true };
return expect(inline.html(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);
@@ -109,60 +109,60 @@ describe('inline-html', () => {
it('options.verbose: return results object if true', () => { it('options.verbose: return results object if true', () => {
var filename = path.resolve(__dirname, 'fixtures/file.txt'); const filename = path.resolve(__dirname, 'fixtures/file.txt');
var html = `<img src="${filename}"/>`; const html = `<img src="${filename}"/>`;
var options = { verbose: true }; const options = { verbose: true };
return expect(inline.html(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', () => { it('options.verbose: return html if false', () => {
var filename = path.resolve(__dirname, 'fixtures/file.txt'); const filename = path.resolve(__dirname, 'fixtures/file.txt');
var html = `<img src="${filename}"/>`; const html = `<img src="${filename}"/>`;
var options = { verbose: false }; const options = { verbose: false };
return expect(inline.html(html, options)).to.eventually.be.a('string'); return expect(inline.html(html, options)).to.eventually.be.a('string');
}); });
it('options.verbose: default false', () => { it('options.verbose: default false', () => {
var filename = path.resolve(__dirname, 'fixtures/file.txt'); const filename = path.resolve(__dirname, 'fixtures/file.txt');
var html = `<img src="${filename}"/>`; const html = `<img src="${filename}"/>`;
return expect(inline.html(html)).to.eventually.be.a('string'); return expect(inline.html(html)).to.eventually.be.a('string');
}); });
describe('css-url', () => { describe('css-url', () => {
it('inline local url in style element', () => { it('inline local url in style element', () => {
var filename = path.resolve(__dirname, 'fixtures/file.txt'); const filename = path.resolve(__dirname, 'fixtures/file.txt');
var html = `<style>div {background-image: url("${filename}");}</style>`; const html = `<style>div {background-image: url("${filename}");}</style>`;
return expect(inline.html(html)).to.eventually.match(/data:.*,.*/); return expect(inline.html(html)).to.eventually.match(/data:.*,.*/);
}); });
it('inline local url in style attribute', () => { it('inline local url in style attribute', () => {
var filename = path.resolve(__dirname, 'fixtures/file.txt'); const filename = path.resolve(__dirname, 'fixtures/file.txt');
var html = `<div style="background-image: url('${filename}');"></div>`; const html = `<div style="background-image: url('${filename}');"></div>`;
return expect(inline.html(html)).to.eventually.match(/data:.*,.*/); return expect(inline.html(html)).to.eventually.match(/data:.*,.*/);
}); });
it('ignore remote url', () => { 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); return expect(inline.html(html)).to.eventually.equal(html);
}); });
it('ignore template expression url', () => { 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); return expect(inline.html(html)).to.eventually.equal(html);
}); });
it('ignore url query strings and hashes', () => { it('ignore url query strings and hashes', () => {
var filename = path.resolve(__dirname, 'fixtures/file.txt'); const filename = path.resolve(__dirname, 'fixtures/file.txt');
var url = `${filename}?query=string#hash`; const url = `${filename}?query=string#hash`;
var uri = datauri(filename); const uri = datauri(filename);
var html = (source) => `<style> div { background-image: url('${source}'); }</style>`; const html = (source) => `<style> div { background-image: url('${source}'); }</style>`;
return expect(inline.html(html(url))).to.eventually.equal(html(uri)); return expect(inline.html(html(url))).to.eventually.equal(html(uri));
}); });
it('handle url with spaces', () => { it('handle url with spaces', () => {
var filename = path.resolve(__dirname, 'fixtures/file space.txt'); const filename = path.resolve(__dirname, 'fixtures/file space.txt');
var uri = datauri(filename); const uri = datauri(filename);
var html = (source) => `<style> div { background-image: url('${source}'); }</style>`; const html = (source) => `<style> div { background-image: url('${source}'); }</style>`;
return expect(inline.html(html(filename))).to.eventually.equal(html(uri)); return expect(inline.html(html(filename))).to.eventually.equal(html(uri));
}); });
it('throw when syntax invalid in style element', () => co(function * () { it('throw when syntax invalid in style element', () => co(function * () {
var filename = path.resolve(__dirname, 'index.html'); const filename = path.resolve(__dirname, 'index.html');
var html = `<style>div {</style>`; const html = `<style>div {</style>`;
try { try {
yield inline.html(html, {filename}); yield inline.html(html, {filename});
throw new Error('No error thrown'); throw new Error('No error thrown');
@@ -173,8 +173,8 @@ describe('inline-html', () => {
} }
})); }));
it('throw when syntax invalid in style attribute', () => co(function * () { it('throw when syntax invalid in style attribute', () => co(function * () {
var filename = path.resolve(__dirname, 'index.html'); const filename = path.resolve(__dirname, 'index.html');
var html = `<div style="background url()"></div>`; const html = `<div style="background url()"></div>`;
try { try {
yield inline.html(html, {filename}); yield inline.html(html, {filename});
throw new Error('No error thrown'); throw new Error('No error thrown');
@@ -185,10 +185,10 @@ describe('inline-html', () => {
} }
})); }));
it('throw when url invalid in style element', () => co(function * () { it('throw when url invalid in style element', () => co(function * () {
var filename = path.resolve(__dirname, 'index.html'); const filename = path.resolve(__dirname, 'index.html');
var url = 'missing.png'; const url = 'missing.png';
var resolvedUrl = path.resolve(path.dirname(filename), url); const resolvedUrl = path.resolve(path.dirname(filename), url);
var html = `<style>div { background-image: url('${url}'); }</style>`; const html = `<style>div { background-image: url('${url}'); }</style>`;
try { try {
yield inline.html(html, {filename}); yield inline.html(html, {filename});
throw new Error('No error thrown'); throw new Error('No error thrown');
@@ -199,10 +199,10 @@ describe('inline-html', () => {
} }
})); }));
it('throw when url invalid in style attribute ', () => co(function * () { it('throw when url invalid in style attribute ', () => co(function * () {
var filename = path.resolve(__dirname, 'index.html'); const filename = path.resolve(__dirname, 'index.html');
var url = 'missing.png'; const url = 'missing.png';
var resolvedUrl = path.resolve(path.dirname(filename), url); const resolvedUrl = path.resolve(path.dirname(filename), url);
var html = `<div style="background-image: url('${url}')"></div>`; const html = `<div style="background-image: url('${url}')"></div>`;
try { try {
yield inline.html(html, {filename}); yield inline.html(html, {filename});
throw new Error('No error thrown'); 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 * () { 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'); const filename = path.resolve(__dirname, 'index.html');
var validUrl = 'fixtures/file.txt'; const validUrl = 'fixtures/file.txt';
var invalidUrl = 'missing.png'; const invalidUrl = 'missing.png';
var resolvedInvalidUrl = path.resolve(path.dirname(filename), invalidUrl); const resolvedInvalidUrl = path.resolve(path.dirname(filename), invalidUrl);
var resolvedValidUrl = path.resolve(path.dirname(filename), validUrl); const resolvedValidUrl = path.resolve(path.dirname(filename), validUrl);
var html = ` const html = `
<style>div {background-image: url('${validUrl}');}</style> <style>div {background-image: url('${validUrl}');}</style>
<style>div {background-image: url('${invalidUrl}');}</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 * () { 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'); const filename = path.resolve(__dirname, 'index.html');
var validUrl = 'fixtures/file.txt'; const validUrl = 'fixtures/file.txt';
var invalidUrl = 'missing.png'; const invalidUrl = 'missing.png';
var resolvedInvalidUrl = path.resolve(path.dirname(filename), invalidUrl); const resolvedInvalidUrl = path.resolve(path.dirname(filename), invalidUrl);
var resolvedValidUrl = path.resolve(path.dirname(filename), validUrl); const resolvedValidUrl = path.resolve(path.dirname(filename), validUrl);
var html = ` const html = `
<div style="background-image: url('${validUrl}')"></div> <div style="background-image: url('${validUrl}')"></div>
<div style="background-image: url('${invalidUrl}')"></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 * () { 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'); const filename = path.resolve(__dirname, 'index.html');
var validUrl = 'fixtures/file.txt'; const validUrl = 'fixtures/file.txt';
var invalidUrl = 'missing.png'; const invalidUrl = 'missing.png';
var resolvedInvalidUrl = path.resolve(path.dirname(filename), invalidUrl); const resolvedInvalidUrl = path.resolve(path.dirname(filename), invalidUrl);
var resolvedValidUrl = path.resolve(path.dirname(filename), validUrl); const resolvedValidUrl = path.resolve(path.dirname(filename), validUrl);
var html = ` const html = `
<style>div {background-image: url("${validUrl}");}</style> <style>div {background-image: url("${validUrl}");}</style>
<div style="background-image: url('${invalidUrl}')"></div> <div style="background-image: url('${invalidUrl}')"></div>
`; `;
@@ -276,23 +276,23 @@ describe('inline-html', () => {
describe('img', () => { describe('img', () => {
it('inline img src', () => { it('inline img src', () => {
var filename = path.resolve(__dirname, 'fixtures/file.txt'); const filename = path.resolve(__dirname, 'fixtures/file.txt');
var html = `<img src="${filename}"/>`; const html = `<img src="${filename}"/>`;
return expect(inline.html(html)).to.eventually.match(/data:.*,.*/); return expect(inline.html(html)).to.eventually.match(/data:.*,.*/);
}); });
it('ignore img src remote paths', () => { it('ignore img src remote paths', () => {
var html = `<img src="http://test.com/file.txt?query=string#hash"/>`; const html = `<img src="http://test.com/file.txt?query=string#hash"/>`;
return expect(inline.html(html)).to.eventually.equal(html); return expect(inline.html(html)).to.eventually.equal(html);
}); });
it('ignore img src template expression paths', () => { it('ignore img src template expression paths', () => {
var html = `<img src="{{path}}"/>`; const html = `<img src="{{path}}"/>`;
return expect(inline.html(html)).to.eventually.equal(html); return expect(inline.html(html)).to.eventually.equal(html);
}); });
it('throw when src invalid', () => co(function * () { it('throw when src invalid', () => co(function * () {
var filename = path.resolve(__dirname, 'index.html'); const filename = path.resolve(__dirname, 'index.html');
var source = 'missing.png'; const source = 'missing.png';
var html = `<img src="${source}" >`; const html = `<img src="${source}" >`;
var resolvedSource = path.resolve(path.dirname(filename), source); const resolvedSource = path.resolve(path.dirname(filename), source);
try { try {
yield inline.html(html, {filename}); yield inline.html(html, {filename});
throw new Error('No error thrown'); 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 * () { it('include all sources in error.files up until and including invalid source', () => co(function * () {
var filename = path.resolve(__dirname, 'index.html'); const filename = path.resolve(__dirname, 'index.html');
var valid = 'fixtures/file.txt'; const valid = 'fixtures/file.txt';
var invalid = 'missing.png'; const invalid = 'missing.png';
var resolvedInvalid = path.resolve(path.dirname(filename), invalid); const resolvedInvalid = path.resolve(path.dirname(filename), invalid);
var resolvedValid = path.resolve(path.dirname(filename), valid); const resolvedValid = path.resolve(path.dirname(filename), valid);
var html = ` const html = `
<img src="${valid}"> <img src="${valid}">
<img src="${invalid}"> <img src="${invalid}">
`; `;
@@ -326,21 +326,21 @@ describe('inline-html', () => {
describe('link-less', () => { describe('link-less', () => {
it('inline link less', () => { it('inline link less', () => {
var filename = path.resolve(__dirname, 'fixtures/basic.less'); const filename = path.resolve(__dirname, 'fixtures/basic.less');
var html = `<link rel="stylesheet/less" href="${filename}"/>`; const html = `<link rel="stylesheet/less" href="${filename}"/>`;
return expect(inline.html(html)).to.eventually.match(/<style>[^]*<\/style>/); return expect(inline.html(html)).to.eventually.match(/<style>[^]*<\/style>/);
}); });
it('inline link less imports', () => { it('inline link less imports', () => {
var filename = path.resolve(__dirname, 'fixtures/import.less'); const filename = path.resolve(__dirname, 'fixtures/import.less');
var html = `<link rel="stylesheet/less" href="${filename}"/>`; const html = `<link rel="stylesheet/less" href="${filename}"/>`;
return expect(inline.html(html)).to.eventually.match(/<style>[^]*<\/style>/) return expect(inline.html(html)).to.eventually.match(/<style>[^]*<\/style>/)
.and.not.match(/@import/); .and.not.match(/@import/);
}); });
it('throw error when link href invalid', () => co(function * () { it('throw error when link href invalid', () => co(function * () {
var filename = path.resolve(__dirname, 'index.html'); const filename = path.resolve(__dirname, 'index.html');
var href = 'missing.less'; const href = 'missing.less';
var resolvedHref = path.resolve(path.dirname(filename), href); const resolvedHref = path.resolve(path.dirname(filename), href);
var html = `<link rel="stylesheet/less" href="${href}">`; const html = `<link rel="stylesheet/less" href="${href}">`;
try { try {
yield inline.html(html, {filename}); yield inline.html(html, {filename});
throw new Error('No error thrown'); throw new Error('No error thrown');
@@ -351,10 +351,10 @@ describe('inline-html', () => {
} }
})); }));
it('throw error when less import invalid', () => co(function * () { it('throw error when less import invalid', () => co(function * () {
var filename = path.resolve(__dirname, 'fixtures/index.html'); const filename = path.resolve(__dirname, 'fixtures/index.html');
var lessBasename = 'invalidImport.less'; const lessBasename = 'invalidImport.less';
var lessFilename = path.resolve(path.dirname(filename), lessBasename); const lessFilename = path.resolve(path.dirname(filename), lessBasename);
var html = `<link rel="stylesheet/less" href="${lessBasename}">`; const html = `<link rel="stylesheet/less" href="${lessBasename}">`;
try { try {
yield inline.html(html, {filename}); yield inline.html(html, {filename});
throw new Error('No error thrown'); throw new Error('No error thrown');
@@ -365,10 +365,10 @@ describe('inline-html', () => {
} }
})); }));
it('throw error when less syntax invalid', () => co(function * () { it('throw error when less syntax invalid', () => co(function * () {
var filename = path.resolve(__dirname, 'fixtures/index.html'); const filename = path.resolve(__dirname, 'fixtures/index.html');
var lessBasename = 'invalidSyntax.less'; const lessBasename = 'invalidSyntax.less';
var lessFilename = path.resolve(path.dirname(filename), lessBasename); const lessFilename = path.resolve(path.dirname(filename), lessBasename);
var html = `<link rel="stylesheet/less" href="${lessBasename}">`; const html = `<link rel="stylesheet/less" href="${lessBasename}">`;
try { try {
yield inline.html(html, {filename}); yield inline.html(html, {filename});
throw new Error('No error thrown'); throw new Error('No error thrown');
@@ -379,10 +379,10 @@ describe('inline-html', () => {
} }
})); }));
it('throw error when less url invalid', () => co(function * () { it('throw error when less url invalid', () => co(function * () {
var filename = path.resolve(__dirname, 'fixtures/index.html'); const filename = path.resolve(__dirname, 'fixtures/index.html');
var lessBasename = 'invalidUrl.less'; const lessBasename = 'invalidUrl.less';
var badUrl = path.resolve(path.dirname(filename), 'missing.png'); const badUrl = path.resolve(path.dirname(filename), 'missing.png');
var html = `<link rel="stylesheet/less" href="${lessBasename}">`; const html = `<link rel="stylesheet/less" href="${lessBasename}">`;
try { try {
yield inline.html(html, {filename}); yield inline.html(html, {filename});
throw new Error('No error thrown'); throw new Error('No error thrown');
@@ -398,24 +398,24 @@ describe('inline-html', () => {
describe('script', () => { describe('script', () => {
it('inline local src', () => { it('inline local src', () => {
var source = path.resolve(__dirname, 'fixtures/file.txt'); const source = path.resolve(__dirname, 'fixtures/file.txt');
var html = `<script src="${source}"></script>`; const html = `<script src="${source}"></script>`;
var contents = fs.readFileSync(source, 'utf8'); const contents = fs.readFileSync(source, 'utf8');
return expect(inline.html(html)).to.eventually.equal(`<script>${contents}</script>`); return expect(inline.html(html)).to.eventually.equal(`<script>${contents}</script>`);
}); });
it('ignore remote src', () => { 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); return expect(inline.html(html)).to.eventually.equal(html);
}); });
it('ignore template expression src', () => { it('ignore template expression src', () => {
var html = `<script src="{{path}}"/>`; const html = `<script src="{{path}}"/>`;
return expect(inline.html(html)).to.eventually.equal(html); return expect(inline.html(html)).to.eventually.equal(html);
}); });
it('throw when source invalid', () => co(function * () { it('throw when source invalid', () => co(function * () {
var filename = path.resolve(__dirname, 'index.html'); const filename = path.resolve(__dirname, 'index.html');
var source = 'missing.js'; const source = 'missing.js';
var html = `<script src="${source}"></script>`; const html = `<script src="${source}"></script>`;
var resolvedSource = path.resolve(path.dirname(filename), source); const resolvedSource = path.resolve(path.dirname(filename), source);
try { try {
yield inline.html(html, {filename}); yield inline.html(html, {filename});
throw new Error('No error thrown'); throw new Error('No error thrown');
@@ -428,12 +428,12 @@ describe('inline-html', () => {
); );
it('include all sources in error.files up until and including invalid source', () => { it('include all sources in error.files up until and including invalid source', () => {
return co(function * () { return co(function * () {
var filename = path.resolve(__dirname, 'index.html'); const filename = path.resolve(__dirname, 'index.html');
var valid = 'fixtures/file.txt'; const valid = 'fixtures/file.txt';
var invalid = 'missing.js'; const invalid = 'missing.js';
var resolvedInvalid = path.resolve(path.dirname(filename), invalid); const resolvedInvalid = path.resolve(path.dirname(filename), invalid);
var resolvedValid = path.resolve(path.dirname(filename), valid); const resolvedValid = path.resolve(path.dirname(filename), valid);
var html = ` const html = `
<script src="${valid}"></script> <script src="${valid}"></script>
<script src="${invalid}"></script> <script src="${invalid}"></script>
`; `;