css-inline

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 library transforms HTML like this:

    
        <style>h1 { color:blue; }</style>
    
    
        <h1>Big Text</h1>
    

into:

    
    
        <h1 style="color:blue;">Big Text</h1>
    

• Uses reliable components from Mozilla's Servo project
• Inlines CSS from style and link tags
• Removes style and link tags
• Resolves external stylesheets (including local files)
• Works on Linux, Windows, and macOS
• Supports HTML5 & CSS3

Install

Install with npm:

npm install --save css-inline

Usage

import { inline } from "css-inline";

var inlined = inline(
  `
  
    
      <style>h1 { color:red }</style>
    
    
      <h1>Test</h1>
    
  
  `,
)
// Do something with the inlined HTML, e.g. send an email

Configuration

• inline_style_tags. Specifies whether to inline CSS from "style" tags. Default: true
• keep_style_tags. Specifies whether to keep "style" tags after inlining. Default: false
• keep_link_tags. Specifies whether to keep "link" tags after inlining. Default: false
• base_url. The base URL used to resolve relative URLs. If you'd like to load stylesheets from your filesystem, use the file:// scheme. Default: null
• load_remote_stylesheets. Specifies whether remote stylesheets should be loaded. Default: true
• extra_css. Extra CSS to be inlined. Default: null
• preallocate_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: 32

You can also skip CSS inlining for an HTML tag by adding the data-css-inline="ignore" attribute to it:

    <style>h1 { color:blue; }</style>


    
    <h1 data-css-inline="ignore">Big Text</h1>

The data-css-inline="ignore" attribute also allows you to skip link and style tags:

    
    <style data-css-inline="ignore">h1 { color:blue; }</style>


    <h1>Big Text</h1>

License

This project is licensed under the terms of the MIT license.