juice

Use these attributes in your HTML to override Juice behavior for specific elements:

• data-embed: Add to a <style> tag to prevent Juice from inlining its CSS and removing the tag. Useful for email client hacks.
• data-juice-duplicates: Add to an element to override inlineDuplicateProperties. Use data-juice-duplicates (or "true") to enable duplicates, or data-juice-duplicates="false" to collapse to highest specificity.
• data-juice-important: Add to an element to override preserveImportant. Use data-juice-important (or "true") to preserve !important, or data-juice-important="false" to strip it.

<!-- keeps both background-color declarations, even if the option is off -->
<div class="header" data-juice-duplicates></div>

<!-- collapses to the highest-specificity declaration, even if the option is on -->
<div class="header" data-juice-duplicates="false"></div>

<style data-embed>
  u + .body .your-class-name {
    /* CSS here targets Gmail */
  }
</style>

All Juice methods accept an optional options object to control the inlining process. Common configuration properties include:

• applyAttributesTableElements (default: true): Creates attributes for styles in juice.styleToAttribute on elements in juice.tableElements.
• applyHeightAttributes (default: true): Uses CSS pixel heights to create height attributes on elements in juice.heightElements.
• applyStyleTags (default: true): Inlines styles found in <style> tags.
• applyWidthAttributes (default: true): Uses CSS pixel widths to create width attributes on elements in juice.widthElements.
• decodeStyleAttributes (default: false): Decodes the value of style attributes.
• extraCss (default: ""): Additional CSS to apply to the file.
• inlineDuplicateProperties (default: false): If true, inlines all declarations with identical properties instead of only the highest specificity one.
• insertPreservedExtraCss (default: true): Determines if preserved @media, @font-face, or keyframes from extraCss are inserted into the document. Can be a string (CSS/jQuery/cheerio selector) to specify where the <style> tag is appended.
• inlinePseudoElements (default: false): Inserts ::before and ::after as <span> elements (modifies DOM).
• preserveFontFaces (default: true): Preserves @font-face when removeStyleTags is true.
• preserveImportant (default: false): Preserves !important in CSS values.
• preserveMediaQueries (default: true): Preserves media queries when removeStyleTags is true.
• preserveKeyFrames (default: true): Preserves keyframes when removeStyleTags is true.
• preservePseudos (default: true): Preserves rules containing pseudo selectors defined in ignoredPseudos when removeStyleTags is true.
• preservedSelectors (default: []): Array of CSS selectors (substring match) to preserve inside <style> tags when removeStyleTags or removeInlinedSelectors is true.
• removeInlinedSelectors (default: false): Removes CSS rules from <style> tags after inlining (requires removeStyleTags: false).
• removeStyleTags (default: true): Removes original <style> tags after inlining. Overrides removeInlinedSelectors.
• resolveCSSVariables (default: true): Resolves CSS variables.
• webResources (default: {}): Options passed to web-resource-inliner for remote resource fetching.
• xmlMode (default: false): Outputs XML/XHTML with all tags closed (requires valid XML/XHTML input).

Juice provides several methods for inlining CSS depending on your input type and environment:

• juice(html, [options]): Returns a string of HTML with inlined CSS. Does not fetch remote resources.
• juice.juiceResources(html, options, callback): Fetches remote resources and returns inlined HTML via a callback callback(err, html).
• juice.juiceFile(filePath, options, callback): Inlines CSS from a local file and fetches remote resources. Returns via callback(err, html).
• juice.juiceDocument($, [options]): Performs in-place inlining on a cheerio instance. Returns the same instance. Does not fetch remote resources.
• juice.inlineContent(html, css, [options]): Takes HTML and CSS strings and returns new HTML with the provided CSS inlined. Ignores <style> or <link> tags.
• juice.inlineDocument($, css, [options]): Modifies a cheerio instance with the provided CSS string. Ignores <style> or <link> tags.

You can modify the following global settings to change default behavior:

• juice.codeBlocks: Object defining fenced code blocks to ignore (e.g., EJS, HBS). Use juice.codeBlocks.NAME = { start: '...', end: '...' } to add new ones.
• juice.ignoredPseudos: Array of pseudo-selectors to ignore (default: ['hover', 'active', 'focus', 'visited', 'link']).
• juice.widthElements: Array of HTML elements that can receive width attributes (default: ['TABLE', 'TD', 'TH', 'IMG']).
• juice.heightElements: Array of HTML elements that can receive height attributes (default: ['TABLE', 'TD', 'TH', 'IMG']).
• juice.styleToAttribute: Object mapping CSS properties to HTML attributes (e.g., {'background-color': 'bgcolor'}).
• juice.tableElements: Array of table elements that can receive attributes from styleToAttribute (default: ['TABLE', 'TH', 'TR', 'TD', 'CAPTION', 'COLGROUP', 'COL', 'THEAD', 'TBODY', 'TFOOT']).
• juice.nonVisualElements: Elements that will not have styles inlined (default: ['HEAD', 'TITLE', 'BASE', 'LINK', 'STYLE', 'META', 'SCRIPT', 'NOSCRIPT']).
• juiceClient.excludedProperties: Array of CSS properties that won't be inlined.