feat: add support for inlining assets in style attributes

Fixes #65
remy · Jan 18, 2016 · 6c9bba2 · 6c9bba2
1 parent 14105b5
commit 6c9bba2
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 0 deletions.
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',
 };

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>