All Projects → posthtml → posthtml-inline-css

posthtml / posthtml-inline-css

Licence: MIT license
CSS Inliner

Programming Languages

javascript
184084 projects - #8 most used programming language

posthtml-inline-css npm version Build Status

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

var posthtml = require('posthtml'),
    css = 'div { color: red }';

posthtml([require('posthtml-inline-css')(css)])
    .process('<div style="font-size: 14px">Hello!</div>')
    .then(function (result) {
        console.log(result.html);
    });

// <div style="font-size: 14px; color: red">Hello!</div>

<style>

var posthtml = require('posthtml'),
    html = '<style>div { color: red }</style><div>Hello!</div>';

posthtml([require('posthtml-inline-css')()])
    .process(html)
    .then(function (result) {
        console.log(result.html);
    });

// <style>div { color: red }</style><div style="color: red">Hello!</div>

PostCSS

var posthtml = require('posthtml'),
    postcss = require('postcss'),
    postcssObj = postcss(/* some PostCSS plugins */).process('div { color: white }');


posthtml([require('posthtml-inline-css')(postcssObj)])
    .process('<div style="font-size: 14px">Hello!</div>')
    .then(function (result) {
        console.log(result.html);
    });

// <div style="font-size: 14px; color: white">Hello!</div>
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].