jgallen23 / grunt-inline-css

Grunt task for turning an html file with linked css to inline css. Great for emails.

grunt-inline-css

Takes an html file with css link or separate css files and turns inline. Great for emails. It leverages the amazing juice library.

Getting Started

This plugin requires Grunt >=0.4.0

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-inline-css --save-dev

One the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-inline-css');

The "inlinecss" task

Overview

In your project's Gruntfile, add a section named inlinecss to the data object passed into grunt.initConfig().

grunt.initConfig({
    inlinecss: {
        main: {
            options: {
            },
            files: {
                'out.html': 'in.html'
            }
        }
    }
})

You can see available options here

The "inlinecontent" task

Overview

In your project's Gruntfile, add a section named inlinecontent to the data object passed into grunt.initConfig().

grunt.initConfig({
    inlinecontent: {
        main: {
            {
                src: 'examples/in.html',
                css: ['examples/file.css'],
                dest: 'tmp/out.html',
            },
        }
    }
})

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

grunt-inline-css's Issues

Incredibly difficult to get this functioning in Windows

This package does not install easily on Windows, and this should perhaps be noted in README.md.

The grunt-inline-css\node_modules\juice\node_modules\jsdom\node_modules\contextify package fails because node-gyp fails, and that fails without a correct install of Python and some multi-gigabyte Visual Studio 2010 installation. It's insane. Mainstream node packages should not have such crazy requirements. jsdom no longer supports node.js so hopefully juice will find another alternative at some stage.

Update juice dependency?

Any chance you could update the juice dependency?

The older version of juice that gets pulled in mangles php in my html. I believe this has been fixed in a newer version.

Thanks.

Install fails

Installation failing with npm on my computer
the prompt tells me to say :
this fails on my system : node-gyp rebuild

Just doesn't work for me. Any ideas?

This is going to be a really vague issue, so I apologize in advance. The thing is, even the simplest possible test case fails for me: using in.html and file.css located in your example folder with an inlinecss task identical to the one provided in your README.

Thing is, I can tell that the task is running and it doesn't report any errors. Grunt reports:

Running "inlinecss:main" (inlinecss) task
File "out.html" created.

And the <style> block and <link> are properly removed from out.html, but there is no CSS inlined. I've also tried various other test cases using more custom code. No dice.

I have no idea how to even troubleshoot this further. Could I possibly be missing an npm dependency somewhere? Any help on tracking down the problem would be greatly appreciated, and if I can provide any more info I'll gladly do so.

Stripping doctype.

Like the title says. I have a plain html page and by using grunt inlinecss the doctype gets removed. Took me way to long to realise what was happening. Weird rendering issues all over the place.

How to ignore <script> tags?

Hi,

Is there a way to ignore a <script src="..."> tag?
I search through the options of Juice, but didn't find it.

Thank you for the support.

Grunt File options do not affect dependent module options

eg: for base:64 images in web-resources-inliner options; images: bool or numeric; defaults to 8.

Setting images to false in my gruntFile.js doesn't affect the output file, Images are still embedded as base:64. (unless I edit the options in that module)

Bug: Doctype being removed.

The doctype seems to get removed. Since I don't see any options for this I assume this is a bug.

option to turn off special chars conversion

Hello!
Is there an option right now to turn off the special chars conversion? Example '&' does not become '& amp;' after inlining the css. This might be an feature request for cheerio, but not sure.

Disable base64 ?

Is it possible to disable replacing src path with base64 for img tag ?

src html file in subdir breaks css fetching

Hi,
It seems that the root of the project (where the Gruntfile is) is always used as root for the href in the tags:

structure
root/
root/src
root/src/index.html (has link href="css/style.css")
root/src/css/style.css

grunt-inline-css parses the link href and searches for: root/css/style.css

init
this happens both with static and dynamic files array:

files: [{'build/index.html': 'src/index.html'}]

OR

files: [{
  expand: true,
  cwd: 'src/',
  src: '*.html',
  dest: 'build'
}]

Is it possible for you to set the html file as "root" for parsing the link href?

HTML Entity decoding

I'm not sure if this is an issue for this project or juice, but I've run into a problem where running the inlinecss task converts some html encoded entities such as [&emdash;, &trad;] to their decoded counterparts [—, ™]

This is a juice issue detailed here: Automattic/juice#43

Closing this issue.

Can't get the module to install.

Any help would be appreciated.

Is there a way to process a whole folder of files, without explicitly stating each one?

Ideally, we would be able to set a directory of files for GIC to parse and specify a target directory to dump them.

Is this possible?

looking for help on this project

As you can probably tell, I've neglected this repo. I'm looking for somebody to help me update this repo. Anybody interested in helping me out?

Looking to update the integrated juice library for a bug fix

See Automattic/juice#64 for an issue with duplicate !important declarations

Can we update grunt-inline-css with the same fix?

Inline CSS removes doctype declaration

When I inline css the doctype that is present in the source html file is removed in the output. Please can you change this behaviour or provide an option that allows for the retention on the doctype declaration.

inliner is turning jpegs into base64

Hi, everytime i use the inline css using grunt it keeps converting some of the images into base64. Any idea why, or how I can stop this from happening?

Target directory / file type instead of file

It looks like the only way to get this grunt plugin to work is to manually map the file path. Is there a way to target a directory rather than explicitly defining which files need to be inlined?

Thanks for a great plugin!

files: { '_output/*.html': '_input/*.html' }

instead of
files: { '_output/index.html': '_input/index.html' }

Fatal error: Cannot read property 'removeChild' of null

Running "inlinecss:main" (inlinecss) task
Fatal error: Cannot read property 'removeChild' of null

This is the error I see when I run grunt on my project folder. The inliner is the only task to run but I cannot get passed this... any ideas?

Feature Request - ignore

It would be nice if we could put an attribute like data-ignore-inline in a style tag or link tag and have grunt-inline-css ignore the linked file or style block.

<style type="text/css" data-ignore-inline="1">
... This is not parsed ...
</style>

missing npm dependency?

I guess https://npmjs.org/package/mootools-slick-parser and something that grunt-inline-css depends on uses it?

Automattic/juice#31

Charset in .css breaking the task

I don't know if this is something from Juice, but if I have a charset in my .css the task just stops.

My .css starts with this:

@charset 'UTF-8';

html {
  font-size: 62.5%;
}
.....

Then when I run the task:

The terminal freezes after that.

documentation on npm is not up-to-date

the example doesn't work because src and dest are not defined in grunt init config

<link> not working

I've been using the lib for some time, and with the new version (0.1.4) whenever I add a , the and <style> are stripped but not processed. But if I only have a <style>, it's processed just fine.

Thanks in advance.

v1.0.0

Pushed new version with v1.0.0. Changes are:

• Fix: #40: requires a peer of grunt@~0.4.0
• Enhancement: Upgraded to Juice 3.0.2 which fixes LOTS of user issues including inlining of code and version 0.12.0 compatability.
• Fix: the grunt task hangs if the file does not exist

Also, new changes will be semantically versioned.

npm version not updated

Noticed that the latest release for this project is 2.0.0 as described in package.json, but npm is not up to date. Any chance at synching this so we don't need to directly reference the commit number? Thanks.

Does not install using Node.js Tools for Visual Studio

As the title suggests when using the NPM manager the grunt-inline-css package fails to install.Below is the console block that seems to show the error.

npm http 200 https://registry.npmjs.org/domhandler/-/domhandler-2.2.0.tgz
npm ERR! [email protected] install: node-gyp rebuild
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is most likely a problem with the contextify package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node-gyp rebuild
npm ERR! You can get their info via:
npm ERR! npm owner ls contextify
npm ERR! There is likely additional logging output above.

npm ERR! System Windows_NT 6.1.7601
npm ERR! command "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "update" "grunt-inline-css" "--save"
npm ERR! cwd D:\Projects\ModernMail\ModernMail
npm ERR! node -v v0.10.25
npm ERR! npm -v 1.3.24
npm ERR! code ELIFECYCLE
npm http GET https://registry.npmjs.org/core-util-is

Options do not work

When setting task options as per JUICE documentation, nothing works.

For it to work had to change line 20 of tasks/inline_css.js

from

var options = this.data.options;

to

var options = this.options();

requires a peer of grunt@~0.4.0

[email protected] requires a peer of grunt@~0.4.0 but none was installed. was the error when using [email protected]

unable to prevent removing duplicate css

Hi,

Is there any option, so that it can prevent deleting duplicate css. I want to add css for different email clients
eg:
background: #000000;
background: url("some transparent image");

Thanks

Should leave media queries alone

It would be nice if there was an option for this to ignore parsing styles located within in media queries. There is such a thing as responsive email :-) Granted, when this plugin was first written, there probably wasn't, but it's a thing now.

Removing !important tags

It appears that during the inline process all of the !important tags are getting stripped out of inline.

node.js v0.12 problem

with a version v0.12 of node.js I've got this error:
Fatal error: Cannot read property 'removeChild' of null

I havent found from which package it is from, just that it works OK on the version 0.10.3

Not working for <link> tags

The task is working for <style> definitions, but not for <link> referencing external CSS files.

breaks php code

Is this also a linter? Or perhaps only works well with JavaScript? Once the inliner reaches PHP code in my file, it craps up the code. Maybe I'm missing something. Suggestions? Thx.

Augment version number

@designil per the last update, you should augment the version number in master. Theres other conventions but its easier to just keep master as the latest stable and development in a new branch(s).