mirror of
https://github.com/KevinMidboe/inline-html.git
synced 2025-12-08 20:29:06 +00:00
Compare commits
15 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
3aedd5fcc4 | ||
|
|
c7ca7bfc75 | ||
|
|
f28f0e718a | ||
|
|
ff5e4401f7 | ||
|
|
99eed58f96 | ||
|
|
dad1267607 | ||
|
|
f0b9b3cc1e | ||
|
|
f143065dbf | ||
|
|
4501132051 | ||
|
|
006d059e1b | ||
|
|
0a743f6b2e | ||
|
|
7bad6838e7 | ||
|
|
0bd64b1308 | ||
|
|
251431a110 | ||
|
|
e8545de30a |
@@ -1,3 +1,7 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- "node"
|
||||
- "iojs"
|
||||
notifications:
|
||||
email:
|
||||
on_success: change
|
||||
on_failure: always
|
||||
|
||||
@@ -81,7 +81,7 @@ To create the following `html` string:
|
||||
---
|
||||
|
||||
<a name="inlineHtml"/>
|
||||
### inlineHtml ( filename [, options] )
|
||||
### inlineHtml ( html [, options] )
|
||||
|
||||
Reads an HTML file and embeds referenced local assets into the HTML.
|
||||
|
||||
@@ -89,8 +89,9 @@ Returns a `Promise` that is fulfilled with an `html` string or an instance of [`
|
||||
|
||||
__Arguments__
|
||||
|
||||
- `filename` - The filename of the HTML file to be inlined. Relative file paths are resolved relative to the filename directory.
|
||||
- `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).
|
||||
|
||||
74
lib/index.js
74
lib/index.js
@@ -1,43 +1,63 @@
|
||||
var _ = require('lodash');
|
||||
var co = require('co');
|
||||
var cheerio = require('cheerio');
|
||||
var fs = require('mz/fs');
|
||||
var inlineStyle = require('./inline-style');
|
||||
var inlineImg = require('./inline-img');
|
||||
var inlineLinkLess = require('./inline-link-less');
|
||||
var inlineLess = require('./inline-less');
|
||||
var R = require('ramda');
|
||||
var Ru = require('@panosoft/ramda-utils');
|
||||
|
||||
var inline = co.wrap(function * (filename, options) {
|
||||
options = _.defaults(options || {}, {
|
||||
/**
|
||||
* Embed referenced local assets within and HTML file.
|
||||
*
|
||||
* @param {String} html
|
||||
* Filename or html string.
|
||||
* @param {Object} options
|
||||
*
|
||||
* @return {Promise}
|
||||
*/
|
||||
var inlineHtml = co.wrap(function * (html, options) {
|
||||
options = Ru.defaults({
|
||||
filename: null,
|
||||
less: {},
|
||||
verbose: false
|
||||
});
|
||||
var html = yield fs.readFile(filename, 'utf8');
|
||||
}, options || {});
|
||||
var filename;
|
||||
try {
|
||||
filename = html;
|
||||
html = yield fs.readFile(filename, 'utf8');
|
||||
}
|
||||
catch (error) {
|
||||
if (error.code === 'ENOENT') filename = options.filename;
|
||||
else throw error;
|
||||
}
|
||||
|
||||
// Embed assets
|
||||
var files = [filename];
|
||||
try {
|
||||
var lessResult = yield inlineLess(html, filename, options.less);
|
||||
html = lessResult.html;
|
||||
files = R.concat(files, lessResult.files);
|
||||
|
||||
// Inline links
|
||||
var lessResult = yield inlineLinkLess(html, filename, options.less);
|
||||
html = lessResult.html;
|
||||
files.push(lessResult.files);
|
||||
var styleResult = inlineStyle(html, filename);
|
||||
html = styleResult.html;
|
||||
files = R.concat(files, styleResult.files);
|
||||
|
||||
// TODO inline links: css
|
||||
|
||||
// TODO inline scripts
|
||||
// browserify js? => scriptify
|
||||
|
||||
// Inline paths -> datauris
|
||||
var styleResult = inlineStyle(html, filename); // Inline styles
|
||||
html = styleResult.html;
|
||||
files.push(styleResult.files);
|
||||
|
||||
var imgResult = inlineImg(html, filename); // Inline images
|
||||
html = imgResult.html;
|
||||
files.push(imgResult.files);
|
||||
var imgResult = inlineImg(html, filename);
|
||||
html = imgResult.html;
|
||||
files = R.concat(files, imgResult.files);
|
||||
}
|
||||
catch (error) {
|
||||
if (!error.filename) error.filename = filename;
|
||||
error.files = R.uniq(R.concat(files, error.files || []));
|
||||
throw error;
|
||||
}
|
||||
|
||||
files = R.uniq(files);
|
||||
var result = {
|
||||
html: html,
|
||||
files: _.unique(_.flatten(files, true))
|
||||
html,
|
||||
files
|
||||
};
|
||||
return (options.verbose ? result : result.html);
|
||||
});
|
||||
|
||||
module.exports = inline;
|
||||
module.exports = inlineHtml;
|
||||
|
||||
@@ -1,28 +1,61 @@
|
||||
var datauri = require('datauri');
|
||||
var isLocalPath = require('is-local-path');
|
||||
var isTemplateExpression = require('./is-template-expression');
|
||||
var path = require('path');
|
||||
var postcss = require('postcss');
|
||||
var url = require('postcss-url');
|
||||
var postcssUrl = require('postcss-url');
|
||||
var R = require('ramda');
|
||||
var url = require('url');
|
||||
|
||||
var inline = function (css, filename) {
|
||||
/**
|
||||
* Returns url path without query string and hash if present.
|
||||
*
|
||||
* @param path
|
||||
*
|
||||
* @returns path
|
||||
*/
|
||||
var clean = function (path) {
|
||||
path = url.parse(path);
|
||||
path = R.pick(['protocol', 'host', 'pathname'], path);
|
||||
path = url.format(path);
|
||||
path = decodeURI(path);
|
||||
return path;
|
||||
};
|
||||
/**
|
||||
* Convert local url data type paths to datauris.
|
||||
*
|
||||
* @param css
|
||||
* @param filename
|
||||
* @returns {{css: (css|any), files: Array}}
|
||||
*/
|
||||
var inlineUrl = 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) && !isTemplateExpression(urlPath)) {
|
||||
try {
|
||||
urlPath = clean(urlPath);
|
||||
urlPath = path.resolve(basePath, urlPath);
|
||||
files = R.append(urlPath, files);
|
||||
urlPath = datauri(urlPath);
|
||||
}
|
||||
catch (error) {
|
||||
error.filename = filename;
|
||||
error.files = R.uniq(files);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
return url;
|
||||
return urlPath;
|
||||
}
|
||||
}))
|
||||
.process(css);
|
||||
files = R.uniq(files);
|
||||
return {
|
||||
css: result.css,
|
||||
files: files
|
||||
files
|
||||
};
|
||||
};
|
||||
|
||||
module.exports = inline;
|
||||
module.exports = inlineUrl;
|
||||
|
||||
@@ -1,25 +1,36 @@
|
||||
var cheerio = require('cheerio');
|
||||
var datauri = require('datauri');
|
||||
var isLocalPath = require('is-local-path');
|
||||
var isTemplateExpression = require('./is-template-expression');
|
||||
var path = require('path');
|
||||
var R = require('ramda');
|
||||
|
||||
var inline = function (html, filename) {
|
||||
var files = [];
|
||||
var basedir = path.dirname(filename);
|
||||
var $ = cheerio.load(html, {decodeEntities: false});
|
||||
var images = $('img').filter(function (index, element) {
|
||||
return isLocalPath($(element).attr('src'));
|
||||
});
|
||||
images.each(function (index, element) {
|
||||
var src = $(element).attr('src');
|
||||
var filename = path.resolve(basedir, src);
|
||||
files.push(filename);
|
||||
src = datauri(filename);
|
||||
$(element).attr('src', src);
|
||||
var $images = $('img').filter((index, element) => {
|
||||
var path = $(element).attr('src');
|
||||
return isLocalPath(path) && !isTemplateExpression(path);
|
||||
});
|
||||
try {
|
||||
$images.each((index, element) => {
|
||||
var source = $(element).attr('src');
|
||||
var filename = path.resolve(basedir, source);
|
||||
files = R.append(filename, files);
|
||||
var uri = datauri(filename);
|
||||
$(element).attr('src', uri);
|
||||
});
|
||||
}
|
||||
catch (error) {
|
||||
error.filename = filename;
|
||||
error.files = R.uniq(files);
|
||||
throw error;
|
||||
}
|
||||
files = R.uniq(files);
|
||||
return {
|
||||
html: $.html(),
|
||||
files: files
|
||||
html: $.xml(),
|
||||
files
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
67
lib/inline-less.js
Normal file
67
lib/inline-less.js
Normal file
@@ -0,0 +1,67 @@
|
||||
var co = require('co');
|
||||
var cheerio = require('cheerio');
|
||||
var fs = require('mz/fs');
|
||||
var isLocalPath = require('is-local-path');
|
||||
var less = require('less');
|
||||
var path = require('path');
|
||||
var R = require('ramda');
|
||||
var Ru = require('@panosoft/ramda-utils');
|
||||
|
||||
var render = co.wrap(function * (filename, options) {
|
||||
options = R.merge(options || {}, { filename });
|
||||
var contents = yield fs.readFile(filename, 'utf8');
|
||||
return yield less.render(contents, options);
|
||||
});
|
||||
/**
|
||||
* @param {String} html
|
||||
* HTML source to inline
|
||||
* @param {String} filename
|
||||
* Filename to apply to the HTML source being inlined
|
||||
* @param {Object} options
|
||||
* LESS compiler options
|
||||
*/
|
||||
var inlineLess = co.wrap(function * (html, filename, options) {
|
||||
options = Ru.defaults({
|
||||
relativeUrls: true
|
||||
}, options || {});
|
||||
var basedir = path.dirname(filename);
|
||||
|
||||
// get links
|
||||
var $ = cheerio.load(html, {decodeEntities: false});
|
||||
var $links = $('link[rel="stylesheet/less"]')
|
||||
.filter((index, element) => isLocalPath($(element).attr('href')));
|
||||
|
||||
// render LESS stylesheets
|
||||
var files = [];
|
||||
var outputs = [];
|
||||
try {
|
||||
$links.each((index, element) => {
|
||||
var href = $(element).attr('href');
|
||||
var filename = path.resolve(basedir, href);
|
||||
files = R.append(filename, files);
|
||||
outputs = R.append(render(filename, options), outputs);
|
||||
});
|
||||
outputs = yield outputs;
|
||||
}
|
||||
catch (error) {
|
||||
if (!error.filename) error.filename = filename;
|
||||
error.files = R.uniq(files);
|
||||
throw error;
|
||||
}
|
||||
|
||||
// include imported filenames in files array
|
||||
files = R.concat(files, R.flatten(R.map(output => output.imports, outputs)));
|
||||
files = R.uniq(files);
|
||||
|
||||
// replace links
|
||||
$links.each((index, element) => {
|
||||
var style = $('<style>').html(outputs[index].css);
|
||||
$(element).replaceWith(style);
|
||||
});
|
||||
|
||||
return {
|
||||
html: $.xml(),
|
||||
files
|
||||
};
|
||||
});
|
||||
module.exports = inlineLess;
|
||||
@@ -1,64 +0,0 @@
|
||||
var _ = require('lodash');
|
||||
var co = require('co');
|
||||
var cheerio = require('cheerio');
|
||||
var fs = require('mz/fs');
|
||||
var isLocalPath = require('is-local-path');
|
||||
var less = require('less');
|
||||
var path = require('path');
|
||||
var url = require('url');
|
||||
|
||||
var render = co.wrap(function * (filename, options) {
|
||||
options = _.assign(options || {}, {
|
||||
filename: filename
|
||||
});
|
||||
var contents = yield fs.readFile(filename, 'utf8');
|
||||
return yield less.render(contents, options);
|
||||
});
|
||||
/**
|
||||
* @params html
|
||||
* HTML to inline
|
||||
* @params options
|
||||
* LESS compiler options
|
||||
*/
|
||||
var inline = co.wrap(function * (html, filename, options) {
|
||||
var files = [];
|
||||
var basedir = path.dirname(filename);
|
||||
options = _.defaults(options || {}, {
|
||||
relativeUrls: true
|
||||
});
|
||||
|
||||
// TODO Import less links
|
||||
// get links
|
||||
var $ = cheerio.load(html, {decodeEntities: false});
|
||||
var links = $('link[rel="stylesheet/less"]')
|
||||
.filter(function (index, element) {
|
||||
return isLocalPath($(element).attr('href'));
|
||||
});
|
||||
|
||||
// render stylesheets
|
||||
var outputs = [];
|
||||
links.each(function (index, element) {
|
||||
var href = $(element).attr('href');
|
||||
var filename = path.resolve(basedir, href);
|
||||
files.push(filename);
|
||||
outputs.push(render(filename, options));
|
||||
});
|
||||
outputs = yield outputs;
|
||||
|
||||
// replace links
|
||||
links.each(function (index, element) {
|
||||
var style = $('<style>').html(outputs[index].css);
|
||||
$(element).replaceWith(style);
|
||||
});
|
||||
|
||||
// create list of imported files from all outputs, unique listing
|
||||
files.push(_.map(outputs, function (output) {
|
||||
return output.imports;
|
||||
}));
|
||||
|
||||
return {
|
||||
html: $.html(),
|
||||
files: files
|
||||
};
|
||||
});
|
||||
module.exports = inline;
|
||||
@@ -1,5 +1,6 @@
|
||||
var cheerio = require('cheerio');
|
||||
var inlineUrl = require('./inline-css-url');
|
||||
var R = require('ramda');
|
||||
var string = require('string');
|
||||
|
||||
var prefix = 'element {';
|
||||
@@ -11,34 +12,43 @@ var unwrap = function (value) {
|
||||
var regexp = new RegExp('^' + prefix + '\\s*(.*)\\s*' + suffix + '$');
|
||||
return value.replace(regexp, '$1');
|
||||
};
|
||||
var inline = function (html, filename) {
|
||||
var inlineStyle = function (html, filename) {
|
||||
var files = [];
|
||||
var $ = cheerio.load(html, {decodeEntities: false});
|
||||
// style elements
|
||||
var styles = $('style');
|
||||
styles.each(function (index, element) {
|
||||
var css = $(element).html();
|
||||
var result = inlineUrl(css, filename);
|
||||
files.push(result.files);
|
||||
$(element).html(result.css);
|
||||
});
|
||||
|
||||
// style attributes
|
||||
var attributes = $('*').filter('[style]');
|
||||
attributes.each(function (index, element) {
|
||||
var css = $(element).attr('style');
|
||||
css = wrap(css);
|
||||
var result = inlineUrl(css, filename);
|
||||
files.push(result.files);
|
||||
css = string(result.css).collapseWhitespace().toString();
|
||||
css = unwrap(css);
|
||||
$(element).attr('style', css);
|
||||
});
|
||||
try {
|
||||
// style elements
|
||||
var $styles = $('style');
|
||||
$styles.each((index, element) => {
|
||||
var css = $(element).html();
|
||||
var result = inlineUrl(css, filename);
|
||||
files = R.concat(files, result.files);
|
||||
$(element).html(result.css);
|
||||
});
|
||||
|
||||
// style attributes
|
||||
var $attributes = $('*').filter('[style]');
|
||||
$attributes.each((index, element) => {
|
||||
var css = $(element).attr('style');
|
||||
css = wrap(css);
|
||||
var result = inlineUrl(css, filename);
|
||||
files = R.concat(files, result.files);
|
||||
css = string(result.css).collapseWhitespace().toString();
|
||||
css = unwrap(css);
|
||||
$(element).attr('style', css);
|
||||
});
|
||||
}
|
||||
catch (error) {
|
||||
if (!error.filename) error.filename = filename;
|
||||
error.files = R.uniq(R.concat(files, error.files || []));
|
||||
throw error;
|
||||
}
|
||||
|
||||
files = R.uniq(files);
|
||||
return {
|
||||
html: $.html(),
|
||||
files: files
|
||||
html: $.xml(),
|
||||
files
|
||||
};
|
||||
};
|
||||
|
||||
module.exports = inline;
|
||||
module.exports = inlineStyle;
|
||||
|
||||
14
lib/is-template-expression.js
Normal file
14
lib/is-template-expression.js
Normal file
@@ -0,0 +1,14 @@
|
||||
/**
|
||||
* Tests whether a path is a mustache template expression.
|
||||
*
|
||||
* Note: would be best if this was file extension specific
|
||||
* (i.e. *.hbs => test for `{{ }}` )
|
||||
*
|
||||
* @param {String} path
|
||||
* @return {Boolean}
|
||||
*/
|
||||
var isTemplateExpression = function (path) {
|
||||
return /^{{.*}}$/.test(path);
|
||||
};
|
||||
|
||||
module.exports = isTemplateExpression;
|
||||
16
package.json
16
package.json
@@ -1,24 +1,30 @@
|
||||
{
|
||||
"name": "inline-html",
|
||||
"version": "0.1.6",
|
||||
"version": "0.1.11",
|
||||
"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": "MIT",
|
||||
"dependencies": {
|
||||
"@panosoft/ramda-utils": "^0.1.12",
|
||||
"cheerio": "^0.19.0",
|
||||
"co": "^4.6.0",
|
||||
"datauri": "^0.7.1",
|
||||
"is-local-path": "^0.1.0",
|
||||
"less": "^2.5.1",
|
||||
"lodash": "^3.10.0",
|
||||
"mz": "^2.0.0",
|
||||
"postcss": "^4.1.16",
|
||||
"postcss-url": "^4.0.0",
|
||||
"postcss": "^5.0.0",
|
||||
"postcss-url": "^5.0.0",
|
||||
"ramda": "^0.17.1",
|
||||
"string": "^3.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"chai": "^3.2.0",
|
||||
"chai-as-promised": "^5.1.0",
|
||||
"mocha": "^2.2.5"
|
||||
}
|
||||
}
|
||||
|
||||
8
test/fixtures/assets/imported.css
vendored
8
test/fixtures/assets/imported.css
vendored
@@ -1,8 +0,0 @@
|
||||
body {
|
||||
border: solid 4px green;
|
||||
}
|
||||
#import {
|
||||
background-image: url('./person.png');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
BIN
test/fixtures/assets/person.png
vendored
BIN
test/fixtures/assets/person.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 KiB |
1
test/fixtures/basic.css
vendored
Normal file
1
test/fixtures/basic.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
div { color: blue; }
|
||||
1
test/fixtures/basic.less
vendored
Normal file
1
test/fixtures/basic.less
vendored
Normal file
@@ -0,0 +1 @@
|
||||
div { color: blue; }
|
||||
1
test/fixtures/css-url.html
vendored
Normal file
1
test/fixtures/css-url.html
vendored
Normal file
@@ -0,0 +1 @@
|
||||
<style>div { background-image: url("file.txt"); }</style>
|
||||
7
test/fixtures/errors/lessImport/index.html
vendored
Normal file
7
test/fixtures/errors/lessImport/index.html
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet/less" href="main.less" />
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
1
test/fixtures/errors/lessImport/main.less
vendored
Normal file
1
test/fixtures/errors/lessImport/main.less
vendored
Normal file
@@ -0,0 +1 @@
|
||||
@import (less) 'missing.css';
|
||||
9
test/fixtures/errors/lessSyntax/index.html
vendored
Normal file
9
test/fixtures/errors/lessSyntax/index.html
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet/less" href="main.less" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1
test/fixtures/errors/lessSyntax/main.less
vendored
Normal file
1
test/fixtures/errors/lessSyntax/main.less
vendored
Normal file
@@ -0,0 +1 @@
|
||||
div {
|
||||
9
test/fixtures/errors/lessUrl/index.html
vendored
Normal file
9
test/fixtures/errors/lessUrl/index.html
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet/less" href="main.less" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
3
test/fixtures/errors/lessUrl/main.less
vendored
Normal file
3
test/fixtures/errors/lessUrl/main.less
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
div {
|
||||
background-image: url('missing.png');
|
||||
}
|
||||
1
test/fixtures/file space.txt
vendored
Normal file
1
test/fixtures/file space.txt
vendored
Normal file
@@ -0,0 +1 @@
|
||||
Test.
|
||||
1
test/fixtures/file.txt
vendored
Normal file
1
test/fixtures/file.txt
vendored
Normal file
@@ -0,0 +1 @@
|
||||
Test.
|
||||
1
test/fixtures/img.html
vendored
Normal file
1
test/fixtures/img.html
vendored
Normal file
@@ -0,0 +1 @@
|
||||
<img src="file.txt"/>
|
||||
2
test/fixtures/import.less
vendored
Normal file
2
test/fixtures/import.less
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
@import 'basic.less';
|
||||
@import (inline) 'basic.css';
|
||||
25
test/fixtures/index.html
vendored
25
test/fixtures/index.html
vendored
@@ -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>
|
||||
7
test/fixtures/main.less
vendored
7
test/fixtures/main.less
vendored
@@ -1,7 +0,0 @@
|
||||
@import (less) './assets/imported.css';
|
||||
|
||||
#link {
|
||||
background-image: url('assets/person.png');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
324
test/index.js
324
test/index.js
@@ -1,13 +1,319 @@
|
||||
var co = require('co');
|
||||
var datauri = require('datauri');
|
||||
var expect = require('chai')
|
||||
.use(require('chai-as-promised'))
|
||||
.expect;
|
||||
var fs = require('fs');
|
||||
var inline = require('../lib');
|
||||
var path = require('path');
|
||||
var fs = require('fs');
|
||||
|
||||
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 css url template expression paths', function () {
|
||||
var html = `<style> div { background-image: url({{path}}); }</style>`;
|
||||
return expect(inline(html)).to.eventually.equal(html);
|
||||
});
|
||||
it('ignore img src template expression paths', function () {
|
||||
var html = `<img src="{{path}}"/>`;
|
||||
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));
|
||||
});
|
||||
it('handle assets with a space in their filename', function () {
|
||||
var filename = path.resolve(__dirname, 'fixtures/file space.txt');
|
||||
var uri = datauri(filename);
|
||||
var html = (source) => `<style> div { background-image: url('${source}'); }</style>`;
|
||||
return expect(inline(html(filename))).to.eventually.equal(html(uri));
|
||||
});
|
||||
|
||||
// Error handling
|
||||
// inline-img
|
||||
it('throw error when html image source invalid', () => {
|
||||
return 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);
|
||||
try {
|
||||
yield inline(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(resolvedSource);
|
||||
}
|
||||
});
|
||||
});
|
||||
// inline-style
|
||||
it('throw error when html style attribute syntax invalid', () => {
|
||||
return co(function * () {
|
||||
var filename = path.resolve(__dirname, 'index.html');
|
||||
var html = `<div style="background url()"></div>`;
|
||||
try {
|
||||
yield inline(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(filename);
|
||||
}
|
||||
});
|
||||
});
|
||||
it('throw error when html style attribute url invalid', () => {
|
||||
return 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>`;
|
||||
try {
|
||||
yield inline(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(resolvedUrl);
|
||||
}
|
||||
});
|
||||
});
|
||||
it('throw error when html style syntax invalid', () => {
|
||||
return co(function * () {
|
||||
var filename = path.resolve(__dirname, 'index.html');
|
||||
var html = `<style>div {</style>`;
|
||||
try {
|
||||
yield inline(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(filename);
|
||||
}
|
||||
});
|
||||
});
|
||||
it('throw error when html style url invalid', () => {
|
||||
return 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>`;
|
||||
try {
|
||||
yield inline(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(resolvedUrl);
|
||||
}
|
||||
});
|
||||
});
|
||||
// inline-link-less
|
||||
it('throw error when link href invalid', () => {
|
||||
return 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}">`;
|
||||
try {
|
||||
yield inline(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(resolvedHref);
|
||||
}
|
||||
});
|
||||
});
|
||||
it('throw error when less import invalid', () => {
|
||||
return co(function * () {
|
||||
var filename = path.resolve(__dirname, 'fixtures/errors/lessImport/index.html');
|
||||
var lessFilename = path.resolve(path.dirname(filename), 'main.less');
|
||||
try {
|
||||
yield inline(filename);
|
||||
throw new Error('No error thrown');
|
||||
}
|
||||
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');
|
||||
var lessFilename = path.resolve(path.dirname(filename), 'main.less');
|
||||
try {
|
||||
yield inline(filename);
|
||||
throw new Error('No error thrown');
|
||||
}
|
||||
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 url invalid', () => {
|
||||
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');
|
||||
try {
|
||||
yield inline(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);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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);
|
||||
@@ -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);
|
||||
Reference in New Issue
Block a user