inlineresources
Version:
Inlines style sheets, images, fonts and scripts in HTML documents. Works in the browser.
70 lines (47 loc) • 2.58 kB
Markdown
inlineresources
===============
<a href="https://www.npmjs.org/package/inlineresources">
<img src="https://badge.fury.io/js/inlineresources.svg"
align="right" alt="NPM version" height="18">
</a>
Inlines style sheets, images, fonts and scripts in HTML documents. Works in the browser.
See the [API](https://github.com/cburgmer/inlineresources/wiki/API).
Install
-------
$ npm install inlineresources
and require through browserify or webpack.
Alternatively use a standalone bundle via e.g. https://wzrd.in/standalone/inlineresources@latest.
Limitations
-----------
Resources referenced in the document (CSS, images, fonts and JS) can only be loaded if from the [same origin](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript), unless techniques like [CORS](http://enable-cors.org) are used.
Yet to be supported:
* Background images in inline style declarations (`<div style="...">`)
* Media queries defined on link elements (`<link rel="stylesheet" media="..." />`)
* Media queries defined on import rules (`@import url("...") screen and (orientation:landscape);`)
* Future responsive img solution (`<img srcset="...">`)
Similar projects for Node.js
----------------------------
* [jasonbellamy/asset-inliner](https://github.com/jasonbellamy/asset-inliner)
* [cdata/collapsify](https://github.com/cdata/collapsify)
* [EE/grunt-inline-images](https://github.com/EE/grunt-inline-images)
* [popeindustries/inline-source](https://github.com/popeindustries/inline-source)
* [LearnBoost/juice](https://github.com/LearnBoost/juice)
* [fb55/node-inline](https://github.com/fb55/node-inline)
* [callumlocke/resource-embedder](https://github.com/callumlocke/resource-embedder)
* [kevva/rework-inline](https://github.com/kevva/rework-inline)
* [andreypopp/xcss-inline-woff](https://github.com/andreypopp/xcss-inline-woff)
* ... and many more
Development
-----------
For linting, tests and a browser build install Node.js and run
$ npm install && npm test
Check `./dist/` for the browserified builds.
To test against several browsers while editing, run `grunt testWatch` and point those browsers to `http://localhost:9989/`.
[](https://travis-ci.org/cburgmer/inlineresources)
Where is it used?
-----------------
* [rasterizeHTML.js](https://github.com/cburgmer/rasterizeHTML.js), Renders HTML into the browser's canvas
* ...
Author
------
Christoph Burgmer. Licensed under MIT. Reach out [on Twitter](https://twitter.com/cburgmer).