posthtml-inline-css

PostHTML plugin for inlining CSS to style attrs.

Many modern email clients nowadays support CSS in a <style>, so you might not need to inline CSS. See that discussion.

Usage

Plain CSS

import posthtml from 'posthtml';
import inlineCSS from 'posthtml-inline-css';

const css = 'div { color: red }';
const result = await posthtml([inlineCSS(css)]).process('<div style="font-size: 14px">Hello!</div>');

console.log(result.html);
// <div style="font-size: 14px; color: red">Hello!</div>

<style>

import posthtml from 'posthtml';
import inlineCSS from 'posthtml-inline-css';

const html = '<style>div { color: red }</style><div>Hello!</div>';

const result = await posthtml([inlineCSS()]).process(html);

console.log(result.html);
// <style>div { color: red }</style><div style="color: red">Hello!</div>

PostCSS

import postcss from 'postcss';
import posthtml from 'posthtml';
import inlineCSS from 'posthtml-inline-css';

const postcssObj = await postcss(/* some PostCSS plugins */).process('div { color: white }');

const result = await posthtml([inlineCSS(postcssObj)]).process('<div style="font-size: 14px">Hello!</div>');

console.log(result.html);
// <div style="font-size: 14px; color: white">Hello!</div>