inline-html

Inline local assets referenced in an HTML document.

Installation

npm install inline-html

Usage

Reads an HTML file, embeds the contents of local assets that are referenced within that file, and returns the inlined html string.

The following elements and data types are inlined:

• LESS stylesheets - The LESS is compiled and the result is inlined within a <style> element.
• CSS url data types - The reference path is replaced with a datauri. These can be used in linked stylesheets, style elements, and element style attributes.
• Images - The source path is replaced with a datauri.

Assuming we have the following files:

• index.html

  <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

  @import (inline) 'main.css';
  div { background-image: url('path/to/file'); }
  

• main.css

  @font-face { src: url('path/to/file'); }
  

We can use inline-html:

var inlineHtml = require('inline-html');

inlineHtml('index.html').then(function (html) {
	// ...
});

To create the following html string:

<style>
	@font-face { src: url('data:...'); }
	div { background-image: url('data:...'); }
</style>
<style>
	div { background-image: url('data:...'); }
</style>
<div style="background-image: url('data:...');"></div>
<img src="data:..."/>

API

• inlineHtml

---

### inlineHtml ( html [, options] )

Reads an HTML file and embeds referenced local assets into the HTML.

Returns a Promise that is fulfilled with an html string or an instance of Results depending on the value of options.verbose.

Arguments

• html - An HTML string or a filename of an HTML file to inline. Relative file paths are resolved relative to options.filename if a string or the filename's directory if a filename.
• options
  • filename - The filename used to resolve relative paths when html is a string. If html is a string and this option is not provided, relative paths will be resolved relative to the process's current working directory.
  • less - An object containing LESS options to pass to the less compiler. Defaults to {}.
  • verbose - A boolean that determines the promises fulfillment value. Supported values are:
    • true: An instance of Results.
    • false: An html string. (default)

__Results__

The Promise returned by this function is optionally fulfilled with a results object that has the following properties:

• html - The inlined html
• files - An array of filenames for the local assets that were inlined.