Merge pull request #81 from stucox/feature/style-attrs

Add support for inlining assets in `style` attributes
remy · Jan 18, 2016 · 5ceed81 · 5ceed81
2 parents a95d94d + 6c9bba2
commit 5ceed81
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 9 deletions.
diff --git a/lib/css.js b/lib/css.js
@@ -68,13 +68,14 @@ function getImports(root, css) {
       css = css.replace('@import ' + match, importedCSS);
       return getImports.call(inliner, root, css);
     });
-  } else {
-    if (inliner.options.compressCSS) {
-      inliner.emit('progress', 'compress css');
-      css = compress(css);
-    }
-    return Promise.resolve(css);
   }
+
+  if (inliner.options.compressCSS) {
+    inliner.emit('progress', 'compress css');
+    css = compress(css);
+  }
+
+  return Promise.resolve(css);
 }
 
 function compress(css) {

diff --git a/lib/index.js b/lib/index.js
@@ -20,6 +20,7 @@ var tasks = {
   svg: 'svg',
   links: 'link[rel=stylesheet]',
   styles: 'style',
+  'style-attrs': '[style]:not(svg *)',  // only style attrs in HTML, not SVG
   images: 'img',
   videos: 'video',
 };
@@ -320,11 +321,10 @@ function resolve(from, to) {
 
   if (!this.isFile || from.indexOf('http') === 0) {
     return require('url').resolve(from, to);
-  } else {
-    var base = path.dirname(from);
-    return path.resolve(base, to);
   }
 
+  var base = path.dirname(from);
+  return path.resolve(base, to);
 }
 
 function updateTodo() {

diff --git a/lib/tasks/style-attrs.js b/lib/tasks/style-attrs.js
@@ -0,0 +1,15 @@
+module.exports = resolve;
+var debug = require('debug')('inliner');
+
+function resolve(inliner, todo, $) {
+  debug('start %s style attributes', todo.length);
+  return todo.map(function links(style) {
+    var css = $(style).attr('style');
+    inliner.emit('progress', 'processing inline css');
+    return inliner.cssImports(inliner.url, css)
+      .then(inliner.cssImages.bind(inliner, inliner.url))
+      .then(function then(css) {
+        $(style).attr('style', css);
+      });
+  });
+}
diff --git a/test/fixtures/image-style-attr.result.html b/test/fixtures/image-style-attr.result.html
@@ -0,0 +1 @@
+<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css image in style attr</title> </head> <body> <div style="background:url(data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=) repeat;"></div> <div style="background:url( &apos;data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=&apos; ) repeat;"></div> <div style="background:url(data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=) repeat;"></div> <div style="background:url(&apos;data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=&apos;) repeat;"></div> </body> </html>
diff --git a/test/fixtures/image-style-attr.src.html b/test/fixtures/image-style-attr.src.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>css image in style attr</title>
+</head>
+<body>
+<div style="background: url(1x1.gif) repeat;"></div>
+<div style="background: url( '1x1.gif' ) repeat;"></div>
+<div style="background: url(http://localhost:54321/1x1.gif) repeat;"></div>
+<div style="background: url('http://localhost:54321/1x1.gif') repeat;"></div>
+</body>
+</html>