Juice
Given HTML, juice will inline your CSS properties into the style
attribute.
How to use
var juice = ;;
/path/to/file.html
:
Test
style.css
Output:
Test
What is this useful for ?
- HTML emails. For a comprehensive list of supported selectors see here
- Embedding HTML in 3rd-party websites.
Projects using juice
- node-email-templates - Node.js module for rendering beautiful emails with ejs templates and email-friendly inline CSS using juice.
- swig-email-templates - Uses swig, which gives you template inheritance, and can generate a dummy context from a template.
Documentation
juice(filePath, [options], callback)
filePath
- html fileoptions
- (optional) object containing these properties:extraCss
- extra css to apply to the file. Defaults to""
.applyStyleTags
- whether to inline styles in<style></style>
Defaults totrue
.applyLinkTags
[Deprecated, use applyLinksToStyleTags] - whether to resolve<link rel="stylesheet">
tags and inline the resulting styles into documenthead
. Defaults totrue
.applyLinksToStyleTags
- whether to resolve<link rel="stylesheet">
tags and replace them withstyle
tags. This works withpreserveMediaQueries
unlike the deprecatedapplyLinkTags
. Defaults totrue
.removeStyleTags
- whether to remove the original<style></style>
tags after (possibly) inlining the css from them. Defaults totrue
.preserveMediaQueries
- preserves all media queries (and contained styles) within<style></style>
tags as a refinement whenremoveStyleTags
istrue
. Other styles are removed. Defaults tofalse
.applyWidthAttributes
- whether to use any CSS pixel widths to createwidth
attributes on elements set injuice.widthElements
removeLinkTags
- whether to remove the original<link rel="stylesheet">
tags after (possibly) inlining the css from them. Defaults totrue
.url
- how to resolve hrefs. Defaults to usingfilePath
. If you want to override, be sure yoururl
has the protocol at the beginning, e.g.http://
orfile://
.
callback(err, html)
err
-Error
object ornull
.html
- contains the html fromfilePath
, with potentially<style>
and<link rel="stylesheet">
tags removed, and css inlined.
juice.juiceContent(html, options, callback)
html
- raw html contentoptions
- same options as callingjuice
, except nowurl
is required.callback(err, html)
- same as callingjuice
juice.juiceDocument(document, options, callback)
Operates on a jsdom instance. Be sure to use the same jsdom version that juice
uses. Also be sure to clean up after you are done. You may have to
call document.parentWindow.close()
to free up memory.
document
- a jsdom instanceoptions
- seejuice.juiceContent
callback(err)
juice.inlineContent(html, css)
This takes html and css and returns new html with the provided css inlined.
It does not look at <style>
or <link rel="stylesheet">
elements at all.
juice.inlineDocument(document, css, options)
Given a jsdom instance and css, this modifies the jsdom instance so that the
provided css is inlined. It does not look at <style>
or
<link rel="stylesheet">
elements at all.
juice.ignoredPseudos
Array of ignored pseudo-selectors such as 'hover' and 'active'.
juice.widthElements
Array of HTML elements that can receive width
attributes.
3rd-party
- Uses the excellent JSDom for the underlying DOM representation.
- Uses cssom to parse out CSS selectors and Slick to tokenize them.
- Icon by UnheardSounds