What is juice?
juice is a popular open-source utility and library designed to inline CSS stylesheet rules directly into HTML elements as inline style attributes. It parses HTML documents alongside embedded <style> blocks or external CSS files and rewrites the HTML tree to apply styles directly to individual tags. This process is essential in web design workflows, particularly for HTML email development where standard external stylesheets are often stripped by email clients.
Key Features
- Automatic CSS Inlining: Parses stylesheet selectors and attaches corresponding properties directly into element
styleattributes. - HTML Email Compatibility: Solves cross-client rendering issues in email tools like Gmail, Outlook, and Apple Mail.
- Media Query Preservation: Retains
@mediaquery blocks and non-inlinable pseudo-selectors inside standard<style>tags for responsive email design. - Configurable Options: Allows developers to remove original
<style>tags, clean up redundant selectors, or resolve external URLs. - Flexible Integration: Works seamlessly as a Node.js library, build plugin (e.g., Gulp/Grunt/Webpack), or direct CLI utility.
Use Cases
- Email Template Build Pipelines: Automating the conversion of clean, modern CSS into email-safe inline HTML templates.
- Component Styling: Inlining design styles into isolated HTML snippets for third-party embeds or RSS feeds.
- Automated Workflow Tooling: Integrating style transformation directly into transactional email generation systems.
