From: Geoff Kimball <geoff@zurb.com>
Date: Mon, 14 Dec 2015 20:08:38 +0000 (-0800)
Subject: Switch from inline-css to premailer for inlining CSS into emails
X-Git-Tag: v2.0.0-rc.1~81
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=ecad66350839cd5786f05b565e74880df720e0d5;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

Switch from inline-css to premailer for inlining CSS into emails
---

diff --git a/package.json b/package.json
index 964865c4..f3320376 100644
--- a/package.json
+++ b/package.json
@@ -16,24 +16,26 @@
     "gulp-htmlmin": "^1.1.1",
     "gulp-inject": "^1.2.0",
     "gulp-inky": "git://github.com/zurb/gulp-inky.git",
-    "gulp-inline-css": "^2.0.0",
     "gulp-load-plugins": "^1.0.0-rc.1",
     "gulp-ruby-sass": "^1.0.5",
     "gulp-sass": "^2.1.0",
     "gulp-scss-lint": "^0.2.4",
-    "gulp-webserver": "^0.9.1",
+    "gulp-util": "^3.0.7",
     "handlebars": "^3.0.3",
     "highlight.js": "^8.7.0",
     "inky": "git+https://github.com/zurb/inky-parse.git",
+    "map-stream": "0.0.6",
     "marked": "^0.3.5",
     "media-query-extractor": "^0.1.1",
     "multiline": "^1.0.2",
     "octophant": "^0.2.0",
     "panini": "0.1.0",
+    "premailer-api": "^1.0.3",
     "rimraf": "^2.4.2",
     "run-sequence": "^1.1.2",
     "string-template": "^0.2.1",
     "supercollider": "0.3.1",
+    "vinyl-map": "^1.0.1",
     "yargs": "^3.9.0"
   }
 }
diff --git a/test/gulpfile.js b/test/gulpfile.js
index 3e64798a..c0a8360b 100644
--- a/test/gulpfile.js
+++ b/test/gulpfile.js
@@ -2,10 +2,13 @@ var gulp     = require('gulp');
 var $        = require('gulp-load-plugins')();
 var mq       = require('media-query-extractor');
 var rimraf   = require('rimraf');
-var panini = require('panini');
+var panini   = require('panini');
 var yargs    = require('yargs').argv;
 var sequence = require('run-sequence');
 var browser  = require('browser-sync');
+var map      = require('map-stream');
+var premailer= require('premailer-api');
+var gutil    = require('gulp-util');
 
 // Look for the --production flag
 var isProduction = !!(yargs.production);
@@ -38,16 +41,30 @@ gulp.task('sass', function() {
 gulp.task('inline', function() {
   // Extracts media query-specific CSS into a separate file
   mq('../_build/css/ink.css', '../_build/css/ink-mq.css', [
-    'only screen and (max-width: 600px)|../_build/css/ink-mq.css'
+    'only screen and (max-width: 580px)|../_build/css/ink-mq.css'
   ]);
 
-  var inject = $.inject(gulp.src('../_build/css/ink-mq.css'), {
+  var injectOne = $.inject(gulp.src('../_build/css/ink.css'), {
+    transform: function(path, file) { return '<style>\n' + file.contents.toString() + '\n</style>'; }
+  });
+
+  var injectTwo = $.inject(gulp.src('../_build/css/ink-mq.css'), {
     transform: function(path, file) { return '<style>\n' + file.contents.toString() + '\n</style>'; }
   });
 
   return gulp.src('../_build/*.html')
-    .pipe($.inlineCss())
-    .pipe(inject)
+    .pipe(injectOne)
+    .pipe(map(function(file, cb) {
+      var email;
+      var contents = file.contents.toString();
+
+      premailer.prepare({ html: contents }, function(err, email) {
+        gutil.log('Premailer: processed ' + file.path + '.');
+        file.contents = new Buffer(email.html);
+        cb(err, file);
+      });
+    }))
+    .pipe(injectTwo)
     .pipe($.htmlmin({
       collapseWhitespace: false,
       minifyCSS: true