css-inline

Blazing-fast WASM package for inlining CSS into HTML documents.
Features:
- Removing
style
tags after inlining; - Control if
style
tags should be processed; - Out-of-document CSS to inline;
The project supports CSS Syntax Level 3 implemented with Mozilla's Servo project components.
Usage
import { inline } from "css-inline";
var inlined = inline(
`
<html>
<head>
<title>Test</title>
<style>h1 { color:red; }</style>
</head>
<body>
<h1>Test</h1>
</body>
</html>
`,
{ remove_style_tags: true }
)
If you'd like to skip CSS inlining for an HTML tag, add data-css-inline="ignore"
attribute to it:
<head>
<title>Test</title>
<style>h1 { color:blue; }</style>
</head>
<body>
<h1 data-css-inline="ignore">Big Text</h1>
</body>
</html>
This attribute also allows you to skip link
and style
tags:
<head>
<title>Test</title>
<style data-css-inline="ignore">h1 { color:blue; }</style>
</head>
<body>
<h1>Big Text</h1>
</body>
</html>
Standards support & restrictions
css-inline
is built on top of cssparser and relies on its behavior for CSS parsing.
Notably:
- Only HTML 5, XHTML is not supported;
- Only CSS 3;
- Only UTF-8 for string representation. Other document encodings are not yet supported.