Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    gulp-inline-csspublic

    gulp-inline-css Build Status Coverage Status

    NPM

    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 inline-css module.

    What's new in 3.0?

    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.
    • Performance. Downloading external stylesheets delays the rendering of the page in the browser. Inlining CSS speeds up this process because the browser doesn't have to wait to download an external stylesheet to start rendering the page.

    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 inline-css.

    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. Must be a string of one character or more. Required.

    Relative urls in links will have this value prepended to them. So these links:

    • <a href="page-relative">Page</a>
    • <a href="/root-relative">Root</a> <- note leading /

    With this option:

    inlineCss(html, { url: 'http://example.com/mushroom'})
        .then(function(html) { console.log(html); });

    Will result in

    • <a href="http://example.com/mushroom/page-relative">Page</a>
    • <a href="http://example.com/root-relative">Root</a>

    If you don't need this feature, simply set the property to a short string eg {url: ' '} (one space) and everything will work.

    options.preserveMediaQueries

    Type: Boolean
    Default: false

    Preserves all media queries (and contained styles) within <style></style> tags as a refinement when removeStyleTags is true. Other styles are removed.

    options.applyWidthAttributes

    Type: Boolean
    Default: false

    Whether to use any CSS pixel widths to create width attributes on elements.

    options.applyTableAttributes

    Type: Boolean
    Default: false

    Whether to apply the border, cellpadding and cellspacing attributes to table elements.

    options.removeHtmlSelectors

    Type: Boolean
    Default: false

    Whether to remove the class and id attributes from the markup.

    options.codeBlocks

    Type: Object
    Default: { EJS: { start: '<%', end: '%>' }, HBS: { start: '{{', end: '}}' } }

    An object where each value has a start and end to specify fenced code blocks that should be ignored during parsing and inlining. For example, Handlebars (hbs) templates are HBS: {start: '{{', end: '}}'}. codeBlocks can fix problems where otherwise inline-css might interpret code like <= as HTML, when it is meant to be template language code. Note that codeBlocks is a dictionary which can contain many different code blocks, so don't do codeBlocks: {...} do codeBlocks.myBlock = {...}.

    Special markup

    data-embed

    When a data-embed attribute is present on a tag, inline-css will not inline the styles and will not remove the tags.

    This can be used to embed email client support hacks that rely on css selectors into your email templates.

    cheerio options

    Options to passed to cheerio.

    License

    MIT © Jonathan Kemp

    install

    npm i gulp-inline-css

    Downloadslast 7 days

    4,806

    version

    3.3.0

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar