inlineresources

inlineresources

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

See the API.

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

$ ./go

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.