Inlines css into html source
npm install juice[![CI][github-ci-shield]][github-ci]
!Downloads
[![License][license-shield]][license]
Given HTML, Juice will inline your CSS properties into the style attribute.
Juice has a number of functions based on whether you want to process a file, HTML string, or a cheerio document, and whether you want Juice to automatically get remote stylesheets, scripts and image dataURIs to inline.
To inline HTML without getting remote resources, using default options:
``js
import juice from 'juice';
const result = juice("
"); will be:
`html
`Try out the web client version
What is this useful for?
- HTML emails. For CSS support in email clients see Can I Email.
- Embedding HTML in 3rd-party websites.
Documentation
Juice is exposed as a standard module, and from CLI with a smaller set of options.
$3
All Juice methods take an options object that can contain any of these properties, though not every method uses all of these:
| Option | Default value | Description |
|--------|-------|------------|
|
| true | Create attributes for styles in juice.styleToAttribute on elements set in juice.tableElements. |
| applyHeightAttributes | true | Use any CSS pixel heights to create height attributes on elements set in juice.heightElements. |
| applyStyleTags | true | Inline styles in The
attribute will be removed from the output HTML, but no inlining or style tag removal will take place:`html
`$3
You can use special CSS comments to prevent Juice from inlining entire CSS files, rules, or even just declarations.
#### Ignore entire file
Add a
comment on the first line in your CSS:`html
Hello World
`The entire CSS will be ignored (as in, not inlined).
With
, the whole