css-inline
Advanced tools
css-inline inlines CSS into HTML documents, using components from Mozilla's Servo project.
This process is essential for sending HTML emails as you need to use "style" attributes instead of "style" tags.
For instance, the library transforms HTML like this:
<html>
<head>
<title>Test</title>
<style>h1 { color:blue; }</style>
</head>
<body>
<h1>Big Text</h1>
</body>
</html>
into:
<html>
<head>
<title>Test</title>
</head>
<body>
<h1 style="color:blue;">Big Text</h1>
</body>
</html>
style and link tagsstyle and link tagsInstall with npm:
npm install --save css-inline
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>
`,
)
// Do something with the inlined HTML, e.g. send an email
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: nullload_remote_stylesheets. Specifies whether remote stylesheets should be loaded. Default: trueextra_css. Extra CSS to be inlined. Default: nullpreallocate_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:
<head>
<title>Test</title>
<style>h1 { color:blue; }</style>
</head>
<body>
<!-- The tag below won't receive additional styles -->
<h1 data-css-inline="ignore">Big Text</h1>
</body>
</html>
The data-css-inline="ignore" attribute also allows you to skip link and style tags:
<head>
<title>Test</title>
<!-- Styles below are ignored -->
<style data-css-inline="ignore">h1 { color:blue; }</style>
</head>
<body>
<h1>Big Text</h1>
</body>
css-inline is built on top of html5ever and cssparser and relies on their behavior for HTML & CSS parsing.
This project is licensed under the terms of the MIT license.
[0.10.0] - 2023-06-16
keep_link_tags configuration option.remove_style_tags with keep_style_tags.inline_style_tags configuration option.FAQs
High-performance library for inlining CSS into HTML 'style' attributes
The npm package css-inline receives a total of 22,261 weekly downloads. As such, css-inline popularity was classified as popular.
We found that css-inline demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Bybit's $1.46B hack by North Korea's Lazarus Group pushes 2025 crypto losses to $1.6B in just two months, already surpassing all of 2024's $1.49B total.
Security News
OpenSSF has published OSPS Baseline, an initiative designed to establish a minimum set of security-related best practices for open source software projects.
Security News
Michigan TypeScript founder Dimitri Mitropoulos implements WebAssembly runtime in TypeScript types, enabling Doom to run after processing 177 terabytes of type definitions.