css-inline
A crate for inlining CSS into HTML documents. It is built with Mozilla's Servo project components.
When you send HTML emails, you need to use "style" attributes instead of "style" tags. For example, this HTML:
<html>
<head>
<title>Test</title>
<style>h1 { color:blue; }</style>
</head>
<body>
<h1>Big Text</h1>
</body>
</html>
Will be turned into this:
<html>
<head><title>Test</title></head>
<body>
<h1 style="color:blue;">Big Text</h1>
</body>
</html>
To use it in your project add the following line to your dependencies section in the project's Cargo.toml file:
css-inline = "0.7"
Usage
use css_inline;
const HTML: &str = r#"<html>
<head>
<title>Test</title>
<style>h1 { color:blue; }</style>
</head>
<body>
<h1>Big Text</h1>
</body>
</html>"#;
fn main() -> Result<(), css_inline::InlineError> {
let inlined = css_inline::inline(HTML)?;
// Do something with inlined HTML, e.g. send an email
Ok(())
}
Features & Configuration
css-inline can be configured by using CSSInliner::options() that implements the Builder pattern:
use css_inline;
fn main() -> Result<(), css_inline::InlineError> {
let inliner = css_inline::CSSInliner::options()
.load_remote_stylesheets(false)
.build();
let inlined = inliner.inline(HTML);
// Do something with inlined HTML, e.g. send an email
Ok(())
}
inline_style_tags. Whether to inline CSS from "style" tags. Default:trueremove_style_tags. Remove "style" tags after inlining. Default:falsebase_url. Base URL to resolve relative URLs. Default:Noneload_remote_stylesheets. Whether remote stylesheets should be loaded or not. Default:trueextra_css. Additional CSS to inline. Default:None
Bindings
There are bindings for Python and WebAssembly in the bindings directory.
Command Line Interface
css-inline provides a command-line interface:
$ css-inline --help
css-inline inlines CSS into HTML documents.
USAGE:
css-inline [OPTIONS] [PATH ...]
command | css-inline [OPTIONS]
ARGS:
<PATH>...
An HTML document to process. In each specified document "css-inline" will look for
all relevant "style" and "link" tags, will load CSS from them and then inline it
to the HTML tags, according to the corresponding CSS selectors.
When multiple documents are specified, they will be processed in parallel, and each inlined
file will be saved with "inlined." prefix. E.g., for "example.html", there will be
"inlined.example.html".
OPTIONS:
--inline-style-tags
Whether to inline CSS from "style" tags. The default value is `true`. To disable inlining
from "style" tags use `--inline-style-tags=false`.
--remove-style-tags
Remove "style" tags after inlining.
--base-url
Used for loading external stylesheets via relative URLs.
--load-remote-stylesheets
Whether remote stylesheets should be loaded or not.
--extra-css
Additional CSS to inline.
Extra materials
If you want to know how this library was created & how it works internally, you could take a look at these articles:
Support
If you have anything to discuss regarding this library, please, join our gitter!
36 Dec 19, 2022
11 Jun 22, 2023
20 Aug 26, 2022
11 Aug 10, 2021
1.3k Dec 21, 2022
8 Mar 6, 2022
12 Dec 7, 2022
25 Nov 25, 2022
3 Dec 15, 2022
11 Oct 20, 2022
7 Dec 30, 2022
3 Sep 9, 2022
10 Nov 3, 2022
15 Jun 15, 2023
17 Jun 10, 2023
49 Nov 14, 2023
8 Sep 6, 2024
10 Aug 21, 2022
26 Dec 17, 2022
6.3k Jan 3, 2023