cburgmerinlineresources
Inlines style sheets, images, fonts and scripts in HTML documents. Works in the browser.
See the API.
Install
$ npm install inlineresourcesand 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, unless techniques like CORS 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
- cdata/collapsify
- EE/grunt-inline-images
- popeindustries/inline-source
- LearnBoost/juice
- fb55/node-inline
- callumlocke/resource-embedder
- kevva/rework-inline
- andreypopp/xcss-inline-woff
- ... and many more
Development
For linting, tests and a browser build install Node.js and run
$ npm install && npm testCheck ./dist/ for the browserified builds.
To test against several browsers while editing, run grunt testWatch and point those browsers to http://localhost:9989/.
Where is it used?
- rasterizeHTML.js, Renders HTML into the browser's canvas
- ...
Author
Christoph Burgmer. Licensed under MIT. Reach out on Twitter.