css-inline

You can use specific data-css-inline attributes within your HTML to control the inlining process per element or tag:

• data-css-inline="ignore": Skips inlining for that specific tag, or skips the associated <link> or <style> tag.
• data-css-inline="keep": Ensures the <style> tag is not removed after inlining. This is useful for preserving @media queries for responsive emails.

<!-- Skip inlining for this specific element -->
<h1 data-css-inline="ignore">Big Text</h1>

<!-- Keep this style tag even if keep_style_tags is false -->
<style data-css-inline="keep">h1 { color:blue; }</style>

You can use specific data-css-inline attributes to control how the library treats certain elements or tags:

• data-css-inline="ignore": Skips inlining for the specific tag. Can also be used on <style> or <link> tags to prevent them from being processed.
• data-css-inline="keep": Prevents <style> tags from being removed after inlining. This is useful for preserving @media queries for responsive emails.

Note: If you use setKeepAtRules(true) in your configuration, @media queries will be preserved in <style> tags even if setKeepStyleTags is set to false.

<!-- Skip inlining for this specific element -->
<h1 data-css-inline="ignore">Big Text</h1>

<!-- Keep this style tag in the output -->
<style data-css-inline="keep">@media (max-width: 600px) { ... }</style>

You can use specific data-css-inline attributes on HTML tags to override global configuration:

• data-css-inline="ignore": Skips CSS inlining for that specific tag, or skips the associated link or style tag.
• data-css-inline="keep": Prevents a <style> tag from being removed, which is useful for preserving @media queries for responsive emails.

<!-- Skip inlining for this element -->
<h1 data-css-inline="ignore">Big Text</h1>

<!-- Keep this style tag even if keep_style_tags is false -->
<style data-css-inline="keep">@media (max-width: 600px) { h1 { font-size: 18px; } }</style>

You can control inlining behavior directly within your HTML using the data-css-inline attribute:

• Ignore an element: Add data-css-inline="ignore" to a tag to prevent it from receiving additional styles. This also works on <style> and <link> tags to skip them entirely.
• Keep a style tag: Add data-css-inline="keep" to a <style> tag to ensure it is not removed after inlining. This is useful for preserving @media queries for responsive emails.
• Keep at-rules: Alternatively, set the keep_at_rules=True option in CSSInliner to keep @media queries in separate <style> tags while still inlining standard properties.

<!-- Skip inlining for this specific tag -->
<h1 data-css-inline="ignore">Big Text</h1>

<!-- Keep this style tag even if keep_style_tags is False -->
<style data-css-inline="keep">h1 { color:blue; }</style>

To avoid excessive network requests when resolving remote stylesheets, you can enable an LRU cache. This requires the stylesheet-cache feature to be enabled in your Cargo.toml.

use std::num::NonZeroUsize;

#[cfg(feature = "stylesheet-cache")]
fn main() -> css_inline::Result<()> {
    let inliner = css_inline::CSSInliner::options()
        .cache(
            css_inline::StylesheetCache::new(
                NonZeroUsize::new(5).expect("Invalid cache size")
            )
        )
        .build();
    Ok(())
}

The C bindings are distributed as a header file (css_inline.h) and a dynamic library (libcss_inline.so).

To install, download the latest archive containing the [C] tag from the Releases page.

To resolve relative URLs in your CSS using local files, set the base_url option to a file:// scheme in the CSSInliner configuration.

require 'css_inline'

# styles/email is relative to the current directory
inliner = CSSInline::CSSInliner.new(base_url: "file://styles/email/")
inliner.inline("...")