gulp-inline-css

Inline your CSS properties into the style attribute in an html file. Useful for emails.

Inspired by the grunt plugin grunt-inline-css. Uses the juice library.

How It Works

This gulp plugin takes an html file and inlines the CSS properties into the style attribute.

/path/to/file.html:

<html>
<head>
  <style>
    p { color: red; }
  </style> 
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>Test</p>
</body>
</html>

style.css

p {
  text-decoration: underline;
}

Output:

<html>
<head>
</head>
<body>
  <p style="color: red; text-decoration: underline;">Test</p>
</body>
</html>

What is this useful for ?

HTML emails. For a comprehensive list of supported selectors see here
Embedding HTML in 3rd-party websites.

Install

Install with npm

npm install --save-dev gulp-inline-css

Usage

var gulp = require('gulp'),
    inlineCss = require('gulp-inline-css');
 
gulp.task('default', function() {
    return gulp.src('./*.html')
        .pipe(inlineCss())
        .pipe(gulp.dest('build/'));;
});

With options:

var gulp = require('gulp'),
    inlineCss = require('gulp-inline-css');
 
gulp.task('default', function() {
    return gulp.src('./*.html')
        .pipe(inlineCss({
            	applyStyleTags: true,
            	applyLinkTags: true,
            	removeStyleTags: true,
            	removeLinkTags: true
        }))
        .pipe(gulp.dest('build/'));;
});

Options are passed directly to juice.

API

inlineCss(options)

options.extraCss

Type: String
Default: ""

Extra css to apply to the file.

options.applyStyleTags

Type: Boolean
Default: true

Whether to inline styles in <style></style>.

options.applyLinkTags

Type: Boolean
Default: true

Whether to resolve <link rel="stylesheet"> tags and inline the resulting styles.

options.removeStyleTags

Type: Boolean
Default: true

Whether to remove the original <style></style> tags after (possibly) inlining the css from them.

options.removeLinkTags

Type: Boolean
Default: true

Whether to remove the original <link rel="stylesheet"> tags after (possibly) inlining the css from them.

options.url

Type: String
Default: filePath

How to resolve hrefs.

npm

gulp-inline-css

gulp-inline-css

How It Works

What is this useful for ?

Install

Usage

API

inlineCss(options)

options.extraCss

options.applyStyleTags

options.applyLinkTags

options.removeStyleTags

options.removeLinkTags

options.url

License

Keywords

Install

Version

License

Homepage

Repository

Last publish

Collaborators