https://github.com/posthtml/posthtml-inline-css

CSS Inliner
https://github.com/posthtml/posthtml-inline-css

Last synced: 10 months ago
JSON representation

CSS Inliner

• Host: GitHub
• URL: https://github.com/posthtml/posthtml-inline-css
• Owner: posthtml
• License: mit
• Created: 2015-11-20T16:59:43.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2020-10-25T18:16:54.000Z (over 5 years ago)
• Last Synced: 2024-10-29T21:06:06.072Z (over 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 25.4 KB
• Stars: 22
• Watchers: 4
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

          
# posthtml-inline-css [![npm version](https://badge.fury.io/js/posthtml-inline-css.svg)](http://badge.fury.io/js/posthtml-inline-css) [![Build Status](https://travis-ci.org/posthtml/posthtml-inline-css.svg?branch=master)](https://travis-ci.org/posthtml/posthtml-inline-css)

[PostHTML](https://github.com/posthtml/posthtml) plugin for inlining CSS to style attrs.

Many modern email clients nowadays support CSS in a ``, so you might not need to inline CSS.

See [that discussion](https://github.com/posthtml/posthtml-inline-css/issues/14).

## Usage

### Plain CSS

```js

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>

```

### &lt;style&gt;

```js

var posthtml = require('posthtml'),

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


posthtml([require('posthtml-inline-css')()])

    .process(html)

    .then(function (result) {

        console.log(result.html);

    });

// div { color: red }
Hello!

```


### PostCSS

```js

var posthtml = require('posthtml'),

    postcss = require('postcss'),

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

posthtml([require('posthtml-inline-css')(postcssObj)])

    .process('
Hello!
')

    .then(function (result) {

        console.log(result.html);

    });


// 
Hello!

```