css_inline is a high-performance library for inlining CSS into HTML 'style' attributes.
This library is designed for scenarios such as preparing HTML emails or embedding HTML into third-party web pages.
For instance, the crate transforms HTML like this:
html
<html>
<head>
<style>h1 { color:blue; }</style>
</head>
<body>
<h1>Big Text</h1>
</body>
</html>
into:
html
<html>
<head></head>
<body>
<h1 style="color:blue;">Big Text</h1>
</body>
</html>
style and link tagsstyle and link tagsTo include it in your project, add the following line to the dependencies section in your project's Cargo.toml file:
toml
[dependencies]
css-inline = "0.10"
The Minimum Supported Rust Version is 1.60.
```rust const HTML: &str = r#"
fn main() -> Result<(), cssinline::InlineError> { let inlined = cssinline::inline(HTML)?; // Do something with inlined HTML, e.g. send an email Ok(()) } ```
css-inline can be configured by using CSSInliner::options() that implements the Builder pattern:
```rust const HTML: &str = "...";
fn main() -> Result<(), cssinline::InlineError> { let inliner = cssinline::CSSInliner::options() .loadremotestylesheets(false) .build(); let inlined = inliner.inline(HTML); // Do something with inlined HTML, e.g. send an email Ok(()) } ```
keep_style_tags. Specifies whether to keep "style" tags after inlining. Default: falsekeep_link_tags. Specifies whether to keep "link" tags after inlining. Default: falsebase_url. The base URL used to resolve relative URLs. If you'd like to load stylesheets from your filesystem, use the file:// scheme. Default: Noneload_remote_stylesheets. Specifies whether remote stylesheets should be loaded. Default: trueextra_css. Extra CSS to be inlined. Default: Nonepreallocate_node_capacity. Advanced. Preallocates capacity for HTML nodes during parsing. This can improve performance when you have an estimate of the number of nodes in your HTML document. Default: 32You can also skip CSS inlining for an HTML tag by adding the data-css-inline="ignore" attribute to it:
html
<head>
<style>h1 { color:blue; }</style>
</head>
<body>
<!-- The tag below won't receive additional styles -->
<h1 data-css-inline="ignore">Big Text</h1>
</body>
The data-css-inline="ignore" attribute also allows you to skip link and style tags:
html
<head>
<!-- Styles below are ignored -->
<style data-css-inline="ignore">h1 { color:blue; }</style>
</head>
<body>
<h1>Big Text</h1>
</body>
If you'd like to load stylesheets from your filesystem, use the file:// scheme:
```rust const HTML: &str = "...";
fn main() -> Result<(), cssinline::InlineError> { let baseurl = cssinline::Url::parse("file://styles/email/").expect("Invalid URL"); let inliner = cssinline::CSSInliner::options() .baseurl(Some(baseurl)) .build(); let inlined = inliner.inline(HTML); // Do something with inlined HTML, e.g. send an email Ok(()) } ```
css-inline is primarily a Rust library, but we also provide bindings for several other languages:
Install with cargo:
text
cargo install css-inline
The following command inlines CSS in multiple documents in parallel. Resulting files will be saved
as inlined.email1.html and inlined.email2.html:
text
css-inline email1.html email2.html
For full details of the options available, you can use the --help flag:
text
css-inline --help
If you're interested in learning how this library was created and how it works internally, check out these articles:
If you have any questions or discussions related to this library, please join our gitter!
This project is licensed under the terms of the MIT license.