Merge pull request #6 from RyuuGan/master

Added multiline support for img, link and script.
jrit · Jul 23, 2015 · 87c1133 · 87c1133
2 parents 1876f39 + 6e66141
commit 87c1133
Show file tree

Hide file tree

Showing 8 changed files with 173 additions and 16 deletions.
diff --git a/src/html.js b/src/html.js
@@ -1,8 +1,6 @@
 "use strict";
 
-
 var path = require( "path" );
-var datauri = require( "datauri" );
 var UglifyJS = require( "uglify-js" );
 var xtend = require( "xtend" );
 var async = require( "async" );
@@ -13,10 +11,18 @@ module.exports = function( options, callback )
 {
     var settings = xtend({}, inline.defaults, options );
 
+    function replaceInlineAttribute(string) {
+        return string
+          .replace( new RegExp( " " + settings.inlineAttribute + "-ignore", "gi" ), "" )
+          .replace( new RegExp( " " + settings.inlineAttribute, "gi" ), "" );
+    }
+
     var replaceScript = function( callback )
     {
         var args = this;
 
+        args.element = replaceInlineAttribute(args.element);
+
         inline.getTextReplacement( args.src, settings.relativeTo, function( err, content )
         {
             if( err )
@@ -30,7 +36,7 @@ module.exports = function( options, callback )
             }
             var html = '<script' + ( args.attrs ? ' ' + args.attrs : '' ) + '>\n' + js + '\n</script>';
 
-            result = result.replace( new RegExp( "<script.+?src=[\"'](" + inline.escapeSpecialChars(args.src) + ")[\"'].*?>\s*<\/script>", "g" ),
+            result = result.replace( new RegExp( inline.escapeSpecialChars(args.element) , "g" ),
                 function( ) { return html; } );
 
             return callback( null );
@@ -41,6 +47,8 @@ module.exports = function( options, callback )
     {
         var args = this;
 
+        args.element = replaceInlineAttribute(args.element);
+
         inline.getTextReplacement( args.src, settings.relativeTo, function( err, content )
         {
             if( err )
@@ -65,7 +73,7 @@ module.exports = function( options, callback )
                 }
                 var html = '<style' + ( args.attrs ? ' ' + args.attrs : '' ) + '>\n' + content + '\n</style>';
 
-                result = result.replace( new RegExp( "<link.+?href=[\"'](" + inline.escapeSpecialChars(args.src) + ")[\"'].*?\/?>", "g" ),
+                result = result.replace( new RegExp( inline.escapeSpecialChars(args.element) , "g" ),
                     function( ) { return html; } );
 
                 return callback( null );
@@ -77,6 +85,8 @@ module.exports = function( options, callback )
     {
         var args = this;
 
+        args.element = replaceInlineAttribute(args.element);
+
         inline.getFileReplacement( args.src, settings.relativeTo, function( err, datauriContent )
         {
             if( err )
@@ -88,7 +98,7 @@ module.exports = function( options, callback )
                 return callback( null );
             }
             var html = '<img' + ( args.attrs ? ' ' + args.attrs : '' ) + ' src="' + datauriContent + '" />';
-            result = result.replace( new RegExp( "<img.+?src=[\"'](" + inline.escapeSpecialChars(args.src) + ")[\"'].*?\/?\s*?>", "g" ),
+            result = result.replace( new RegExp( inline.escapeSpecialChars(args.element) , "g" ),
                 function( ) { return html; } );
             return callback( null );
         } );
@@ -98,58 +108,58 @@ module.exports = function( options, callback )
     var tasks = [];
     var found;
 
-    var scriptRegex = /<script.+?src=["']([^"']+?)["'].*?>\s*<\/script>/g;
+    var scriptRegex = /<script[\s\S]+?src=["']([^"']+?)["'][\s\S]*?>\s*<\/script>/g;
     while( ( found = scriptRegex.exec( result ) ) !== null )
     {
         if( !found[ 0 ].match( new RegExp( settings.inlineAttribute + "-ignore", "gi" ) )
             && ( settings.scripts || found[ 0 ].match( new RegExp( settings.inlineAttribute, "gi" ) ) ) )
         {
             tasks.push( replaceScript.bind(
             {
+                element: found[ 0 ],
                 src: found[ 1 ],
                 attrs: inline.getAttrs( found[ 0 ], settings ),
                 limit: settings.scripts
             } ) );
         }
     }
 
-    var linkRegex = /<link.+?href=["']([^"']+?)["'].*?\/?>/g;
+    var linkRegex = /<link[\s\S]+?href=["']([^"']+?)["'][\s\S]*?\/?>/g;
     while( ( found = linkRegex.exec( result ) ) !== null )
     {
         if( !found[ 0 ].match( new RegExp( settings.inlineAttribute + "-ignore", "gi" ) )
             && ( settings.links || found[ 0 ].match( new RegExp( settings.inlineAttribute, "gi" ) ) ) )
         {
             tasks.push( replaceLink.bind(
             {
+                element: found[ 0 ],
                 src: found[ 1 ],
                 attrs: inline.getAttrs( found[ 0 ], settings ),
                 limit: settings.links
             } ) );
         }
     }
 
-    var imgRegex = /<img.+?src=["']([^"']+?)["'].*?\/?\s*?>/g;
+    var imgRegex = /<img[\s\S]+?src=["']([^"']+?)["'][\s\S]*?\/?\s*?>/g;
     while( ( found = imgRegex.exec( result ) ) !== null )
     {
         if( !found[ 0 ].match( new RegExp( settings.inlineAttribute + "-ignore", "gi" ) )
             && ( settings.images || found[ 0 ].match( new RegExp( settings.inlineAttribute, "gi" ) ) ) )
         {
             tasks.push( replaceImg.bind(
             {
+                element: found[ 0 ],
                 src: found[ 1 ],
                 attrs: inline.getAttrs( found[ 0 ], settings ),
                 limit: settings.images
             } ) );
         }
     }
 
-    result = result
-                .replace( new RegExp( " " + settings.inlineAttribute + "-ignore", "gi" ), "" )
-                .replace( new RegExp( " " + settings.inlineAttribute, "gi" ), "" );
-
+    result = replaceInlineAttribute(result);
 
     async.parallel( tasks, function( err )
     {
         callback( err, result );
     } );
-};
+};
diff --git a/test/cases/css-multiline.html b/test/cases/css-multiline.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>test</title>
+    <!-- ended with "/>" -->
+    <link href="assets/main.css"
+          rel="stylesheet" />
+    <!-- ended with ">" -->
+    <link href="assets/main.css"
+          rel="stylesheet">
+    <link href="/assets/main.css"
+          rel="stylesheet">
+    <link href="https://raw.githubusercontent.com/jrit/html-resource-inline/master/test/cases/assets/simple.css"
+          rel="stylesheet">
+</head>
+<body>
+</body>
+</html>
diff --git a/test/cases/css-multiline_out.html b/test/cases/css-multiline_out.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>test</title>
+    <!-- ended with "/>" -->
+    <style>
+.main{border: none;}
+body{background: url(http://www.example.com/img/bg.png);/*data-inline-ignore*/}
+body{background: url('http://www.example.com/img/bg.png');/*data-inline-ignore*/}
+body{background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAHklEQVQoz2NgAIP/YMBAPBjVMNAa/pMISNcwEoMVAH0ls03D44ABAAAAAElFTkSuQmCC");}
+body{background: url("assets/not-icon.png");/*data-inline-ignore*/}
+body{background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAHklEQVQoz2NgAIP/YMBAPBjVMNAa/pMISNcwEoMVAH0ls03D44ABAAAAAElFTkSuQmCC);}
+body{background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAHklEQVQoz2NgAIP/YMBAPBjVMNAa/pMISNcwEoMVAH0ls03D44ABAAAAAElFTkSuQmCC');}
+
+</style>
+    <!-- ended with ">" -->
+    <style>
+.main{border: none;}
+body{background: url(http://www.example.com/img/bg.png);/*data-inline-ignore*/}
+body{background: url('http://www.example.com/img/bg.png');/*data-inline-ignore*/}
+body{background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAHklEQVQoz2NgAIP/YMBAPBjVMNAa/pMISNcwEoMVAH0ls03D44ABAAAAAElFTkSuQmCC");}
+body{background: url("assets/not-icon.png");/*data-inline-ignore*/}
+body{background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAHklEQVQoz2NgAIP/YMBAPBjVMNAa/pMISNcwEoMVAH0ls03D44ABAAAAAElFTkSuQmCC);}
+body{background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAHklEQVQoz2NgAIP/YMBAPBjVMNAa/pMISNcwEoMVAH0ls03D44ABAAAAAElFTkSuQmCC');}
+
+</style>
+    <style>
+.main{border: none;}
+body{background: url(http://www.example.com/img/bg.png);/*data-inline-ignore*/}
+body{background: url('http://www.example.com/img/bg.png');/*data-inline-ignore*/}
+body{background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAHklEQVQoz2NgAIP/YMBAPBjVMNAa/pMISNcwEoMVAH0ls03D44ABAAAAAElFTkSuQmCC");}
+body{background: url("assets/not-icon.png");/*data-inline-ignore*/}
+body{background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAHklEQVQoz2NgAIP/YMBAPBjVMNAa/pMISNcwEoMVAH0ls03D44ABAAAAAElFTkSuQmCC);}
+body{background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAHklEQVQoz2NgAIP/YMBAPBjVMNAa/pMISNcwEoMVAH0ls03D44ABAAAAAElFTkSuQmCC');}
+
+</style>
+    <style>
+body{font-weight: bold;}
+
+</style>
+</head>
+<body>
+</body>
+</html>
diff --git a/test/cases/img-singleline.html b/test/cases/img-singleline.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>test</title>
+</head>
+<body>
+    <img src="assets/icon.png" /><img src="/assets/icon.png" /><img src="https://raw.githubusercontent.com/jrit/html-resource-inline/f7544970b55a8197df257a002caa69fc5ba16722/test/cases/assets/icon.png" />
+</body>
+</html>
diff --git a/test/cases/img-singleline_out.html b/test/cases/img-singleline_out.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>test</title>
+</head>
+<body>
+    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAHklEQVQoz2NgAIP/YMBAPBjVMNAa/pMISNcwEoMVAH0ls03D44ABAAAAAElFTkSuQmCC" /><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAHklEQVQoz2NgAIP/YMBAPBjVMNAa/pMISNcwEoMVAH0ls03D44ABAAAAAElFTkSuQmCC" /><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAHklEQVQoz2NgAIP/YMBAPBjVMNAa/pMISNcwEoMVAH0ls03D44ABAAAAAElFTkSuQmCC" />
+</body>
+</html>
diff --git a/test/cases/script-multiline.html b/test/cases/script-multiline.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>test</title>
+    <script src="assets/export.js"
+            type="text/javascript">
+    </script>
+    <script src='/assets/export.js'
+            type="text/javascript"></script>
+</head>
+<body>
+</body>
+</html>
diff --git a/test/cases/script-multiline_out.html b/test/cases/script-multiline_out.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>test</title>
+    <script>
+console.log('test');
+</script>
+    <script>
+console.log('test');
+</script>
+</head>
+<body>
+</body>
+</html>
diff --git a/test/spec.js b/test/spec.js
@@ -95,6 +95,19 @@ describe('html', function() {
         );
     });
 
+    it('should inline local and remote multiline links', function (done) {
+        var expected = readFile('test/cases/css-multiline_out.html');
+
+        inline.html({
+              fileContent: readFile('test/cases/css-multiline.html'),
+              relativeTo: 'test/cases/'
+          },
+          function(err, result) {
+              testEquality(err, result, expected, done);
+          }
+        );
+    });
+
     it('should inline scripts', function(done) {
         var expected = readFile('test/cases/script_out.html');
 
@@ -108,6 +121,19 @@ describe('html', function() {
         );
     });
 
+    it('should inline multiline scripts', function(done) {
+        var expected = readFile('test/cases/script-multiline_out.html');
+
+        inline.html({
+                fileContent: readFile('test/cases/script-multiline.html'),
+                relativeTo: 'test/cases/'
+            },
+            function(err, result) {
+                testEquality(err, result, expected, done);
+            }
+        );
+    });
+
     it('should inline local images', function(done) {
         var expected = readFile('test/cases/img_out.html');
 
@@ -136,6 +162,20 @@ describe('html', function() {
         );
     });
 
+    it('should inline images in one line', function (done) {
+        var expected = readFile('test/cases/img-singleline_out.html');
+
+        inline.html({
+              fileContent: readFile('test/cases/img-singleline.html'),
+              relativeTo: 'test/cases/',
+              images: true
+          },
+          function(err, result) {
+              testEquality(err, result, expected, done);
+          }
+        );
+    });
+
     it('should inline based on inlineAttribute', function(done) {
         var expected = readFile('test/cases/img-opt-in_out.html');
 
@@ -295,10 +335,10 @@ describe("util", function() {
 
     describe("#escapeSpecialChars", function() {
         it("should escape special regex characters in a string", function() {
-            
+
             var str = 'http://fonts.googleapis.com/css?family=Open+Sans';
             var expected = 'http:\\/\\/fonts\\.googleapis\\.com\\/css\\?family=Open\\+Sans';
-            
+
             var result = util.escapeSpecialChars(str);
             var regex = new RegExp(result, "g");
 
@@ -308,4 +348,4 @@ describe("util", function() {
         });
     });
 
-});
+});