inlineresources

inlineresources

Inlines style sheets, images, fonts and scripts in HTML documents. Works in the browser.

See the 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, 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 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/.

Where is it used?

• rasterizeHTML.js, Renders HTML into the browser's canvas
• ...

Author

Christoph Burgmer. Licensed under MIT. Reach out on Twitter.