# inline-html

> Inline local assets referenced in an HTML document.

Latest version **1.2.0** (published 2021-03-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install inline-html
pnpm add inline-html
yarn add inline-html
bun add inline-html
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2021-03-24 |
| First published | 2015-07-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=4.0.0 |
| Dependencies | 11 |
| Unpacked size | 43.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Maintainers | panosoft |

## Links

- npm: https://www.npmjs.com/package/inline-html
- Repository: https://github.com/panosoft/inline-html
- Homepage: https://github.com/panosoft/inline-html#readme
- Issues: https://github.com/panosoft/inline-html/issues
- npm.io page: https://npm.io/package/inline-html

## Dependencies (11)

- [co](https://npm.io/package/co.md) ^4.6.0
- [mz](https://npm.io/package/mz.md) ^2.0.0
- [less](https://npm.io/package/less.md) ^4.1.1
- [ramda](https://npm.io/package/ramda.md) ^0.18.0
- [cheerio](https://npm.io/package/cheerio.md) ^0.22.0
- [datauri](https://npm.io/package/datauri.md) ^3.0.0
- [postcss](https://npm.io/package/postcss.md) ^8.2.7
- [postcss-url](https://npm.io/package/postcss-url.md) ^10.1.1
- [is-local-path](https://npm.io/package/is-local-path.md) ^0.1.0
- [postcss-import](https://npm.io/package/postcss-import.md) ^14.0.0
- [@panosoft/ramda-utils](https://npm.io/package/@panosoft/ramda-utils.md) ^0.2.0

## Recent versions

- 1.2.0 (latest) — 2021-03-24
- 0.2.4 — 2015-12-17
- 0.2.3 — 2015-12-04
- 0.2.2 — 2015-12-01
- 0.2.1 — 2015-10-15
- 0.2.0 — 2015-10-14
- 0.1.11 — 2015-10-07
- 0.1.10 — 2015-09-25
- 0.1.9 — 2015-08-26
- 0.1.8 — 2015-08-26
- 0.1.7 — 2015-08-26
- 0.1.6 — 2015-08-17
- 0.1.5 — 2015-08-10
- 0.1.4 — 2015-08-05
- 0.1.2 — 2015-08-05
- … 3 more at https://npm.io/package/inline-html/versions

## README

# inline-html

Inline local assets referenced in an HTML document.

[![npm version](https://img.shields.io/npm/v/inline-html.svg)](https://www.npmjs.com/package/inline-html)
[![Travis](https://img.shields.io/travis/panosoft/inline-html.svg)](https://travis-ci.org/panosoft/inline-html)

This library parses HTML, embeds the contents of local assets that are referenced within that HTML, and returns a new inlined HTML string.

The following HTML elements and CSS data types are inlined:

- Scripts - The source path is read and inlined.

- Linked CSS stylesheets - The stylesheet is read and inlined within a `<style>` element. Note that nested `@import`'s are also inlined.

- Linked LESS stylesheets - The LESS is compiled and the output is inlined within a `<style>` element. Note that `@import`'s are also inlined.

- Images - The source path is replaced with a datauri.

- 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.

Also, `inline-html` calls can be statically evaluated and included in Browserify bundles using the [`html-inlinify`](https://github.com/panosoft/html-inlinify) transform.

## Usage

Assuming ...

- `main.js`

	```js
	var a = 1;
	```

- `main.less`

	```css
	div { background-image: url('path/to/file'); }
	```

- `main.css`

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

Then ...

```js
var co = require('co');
var inline = require('inline-html');

co(function * () {
	var html = `
		<script src="main.js"></script>
		<link rel="stylesheet" href="main.css"/>
		<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);
	/**
		<script> var a = 1; </script>
		<style> @font-face { src: url('data:...'); } </style>
		<style> div { background-image: url('data:...'); } </style>
		<style> div { background-image: url('data:...'); } </style>
		<div style="background-image: url('data:...');"></div>
		<img src="data:..."/>
	 */
});
```

## Installation

```sh
npm install inline-html
```

## API

- [`inline.html`](#html)
- [`inline.file`](#file)
- [`Results`](#results)

---

<a name="html"></a>
### inline.html ( html [, options] )

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`.

__Arguments__

- `html` - An HTML string to inline.


- `options`
	- `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 `{}`.
	- `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 * () {
	var html = yield inline.html(`<img src="test.png">`);
	console.log(html); // <img src="data:...">
});
```

---

<a name="file"></a>
### 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"></a>
### Results

The `Promise` returned by these functions 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.

---
_Source: https://npm.io/package/inline-html · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._