inline-css

To prevent extract-css from inlining styles or removing a <style></style> tag, add the data-embed attribute to the tag. This is useful for preserving CSS selectors that email clients might need for specific hacks.

<style data-embed>
  /* This style will not be inlined or removed */
  .email-hack {
    display: block !important;
  }
</style>

If you need to preserve specific CSS selectors (such as email client support hacks) within a <style> tag, add the data-embed attribute to that tag.

When data-embed is present, inline-css will skip inlining the styles within that tag and will not remove the <style> tag itself.

<style data-embed>
  /* This CSS will be preserved and not inlined */
  @media screen and (max-width: 600px) { ... }
</style>

To prevent the parser from incorrectly identifying code within template tags (like Handlebars or EJS) as HTML, use the codeBlocks option.

Important: codeBlocks is a dictionary. To avoid wiping out the default EJS and HBS configurations, you should assign your custom block to a new key rather than replacing the entire object.

// Correct way to add a custom code block
const options = {
  codeBlocks: {
    MY_TEMPLATE: { start: '[[', end: ']]' }
  }
};

To prevent style-data from inlining styles or removing a specific <style> tag, add the data-embed attribute to that tag. This is useful for preserving email client support hacks that require CSS selectors to remain in the HTML.

<style data-embed>
  /* This style will not be inlined and the tag will not be removed */
  .email-client-hack { color: red; }
</style>

Install the style-data package using npm to extract CSS content from <style> tags within HTML.

npm install --save style-data

Install the list-stylesheets package using npm to enable extracting stylesheet lists from HTML documents.

npm install --save list-stylesheets

Install the extract-css package using npm to extract CSS from HTML documents.

npm install --save extract-css

Install the remote-content package using npm to enable fetching remote content in your project.

npm install --save remote-content

Install the href-content package using npm to enable extracting content from link tags within an HTML document.

npm install --save href-content

To prevent inline-css from misinterpreting template syntax (like Handlebars {{ }} or EJS <% %>) as HTML or CSS, use the codeBlocks option. This tells the parser to ignore content within specified start and end delimiters.

Important: codeBlocks is a dictionary. To add your own custom block, append to the existing object rather than replacing it.

// Correct way to add a custom code block
const options = { url: '/path/' };
options.codeBlocks.myTemplate = { start: '[[', end: ']]' };

inlineCss(html, options);

Install the inline-css package using npm to begin inlining CSS properties into HTML style attributes.

npm install --save inline-css

Install the mediaquery-text package using npm to extract Media Query text from CSS sources.

npm install --save mediaquery-text