Merge pull request #53 from hsablonniere/treat-styles-and-scripts-as-…

…text fix: treat styles and scripts as text
remy · Jul 28, 2015 · 5647244 · 5647244
2 parents 593a274 + 214f698
commit 5647244
Show file tree

Hide file tree

Showing 12 changed files with 31 additions and 11 deletions.
diff --git a/lib/index.js b/lib/index.js
@@ -192,7 +192,7 @@ function main() {
         return inliner.cssImports(url, css)
           .then(inliner.cssImages.bind(inliner, url))
           .then(function then(css) {
-            $(style).html(css);
+            $(style).text(css);
           });
       });
 
@@ -239,7 +239,7 @@ function main() {
         return promise.then(inliner.uglify.bind(inliner))
           .then(function then(res) {
           debug('uglify: %s', res);
-          $script.html(res);
+          $script.text(res);
         });
       });
 

diff --git a/test/fixtures/css-ext-import.result.html b/test/fixtures/css-ext-import.result.html
@@ -1 +1 @@
-<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta charset="UTF-8"> <title>App</title> <style>p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;}</style> </head> <body> body </body> </html>
+<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta charset="UTF-8"> <title>App</title> <style>p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;}p:before{ content:'<';color:blue;}</style> </head> <body> body </body> </html>
diff --git a/test/fixtures/css-ext.result.html b/test/fixtures/css-ext.result.html
@@ -1 +1 @@
-<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>External script + css</title> <style>p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAP0BAP39/QAAACwAAAAAAQABAAACAkQBADs=') repeat;}</style> <script src="http://localhost:54321/script.min.js"></script> <script>function doit(o){var r="remy",e=o.bar="sharp";return r+e.split("").reverse().join("")}console.log(doit(window));</script> </head> <body> </body> </html>
+<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>External script + css</title> <style>p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAP0BAP39/QAAACwAAAAAAQABAAACAkQBADs=') repeat;}p:before{ content:'<';color:blue;}</style> <script src="http://localhost:54321/script.min.js"></script> <script>function doit(o){var r="remy",e=o.bar="sharp";return r+e.split("").reverse().join("")}console.log(doit(window));</script> </head> <body> </body> </html>
diff --git a/test/fixtures/css-import.result.html b/test/fixtures/css-import.result.html
@@ -1 +1 @@
-<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>inline style</title> <style> p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;} p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;} p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;} @media screen and orientation:landscape{p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;}}</style> </head> <body> </body> </html>
+<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>inline style</title> <style> p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;}p:before{ content:'<';color:blue;} p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;}p:before{ content:'<';color:blue;} p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;}p:before{ content:'<';color:blue;} @media screen and orientation:landscape{p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;}p:before{ content:'<';color:blue;}}</style> </head> <body> </body> </html>
diff --git a/test/fixtures/image-css.result.html b/test/fixtures/image-css.result.html
@@ -1 +1 @@
-<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css image</title> <style> body{ background:black;}#image{ background:url(data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=) repeat;height:400px;width:400px;}#image{ background:url( "data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=" ) repeat;}</style> </head> <body> <div id="image"></div> </body> </html>
+<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css image</title> <style> body{ background:black;}#image{ background:url(data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=) repeat;height:400px;width:400px;}#image{ background:url( "data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=" ) repeat;}p:before{ content:'<';color:blue;}</style> </head> <body> <div id="image"></div> </body> </html>
diff --git a/test/fixtures/image-css.src.html b/test/fixtures/image-css.src.html
@@ -17,6 +17,11 @@
     /* another version of url include that could break */
     background: url( "1x1.gif" ) repeat;
   }
+
+  p:before {
+    content: '<';
+    color: blue;
+  }
   </style>
 </head>
 <body>

diff --git a/test/fixtures/import.css b/test/fixtures/import.css
@@ -1,4 +1,9 @@
 p {
   font-size: 10px;
   background: url('1x1.gif') repeat;
+}
+
+p:before {
+  content: '<';
+  color: blue;
 }
diff --git a/test/fixtures/kitchen-sink.result.html b/test/fixtures/kitchen-sink.result.html
@@ -1 +1 @@
-<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>full combo</title> <style>p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;}</style> <style> p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;}body{ font-family:sans-serif;}#icon{ height:48px;width:48px;background:url(data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=) no-repeat;background-size:cover;}</style> </head> <body> <script>function doit(o){var r="remy",e=o.bar="sharp";return r+e.split("").reverse().join("")}console.log(doit(window));</script> <script>console.log("Hello world");</script> <img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=" title="White 1x1"> <div id="icon"></div> </body> </html>
+<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>full combo</title> <style>p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;}p:before{ content:'<';color:blue;}</style> <style> p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;}p:before{ content:'<';color:blue;}body{ font-family:sans-serif;}#icon{ height:48px;width:48px;background:url(data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=) no-repeat;background-size:cover;}</style> </head> <body> <script>function doit(o){var r="remy",e=o.bar="sharp";return r+e.split("").reverse().join("")}console.log(doit(window));</script> <script>console.log("Hello world");</script> <img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=" title="White 1x1"> <div id="icon"></div> </body> </html>
diff --git a/test/fixtures/script-inline.result.html b/test/fixtures/script-inline.result.html
@@ -1 +1 @@
-<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>inline script</title> </head> <body> <script>function doit(o){var r="remy",e=o.bar="sharp";return r+e.split("").reverse().join("")}console.log(doit(window));</script> <script>console.log("Hello world");</script> </body> </html>
+<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>inline script</title> </head> <body> <script>function doit(o){var r="remy",e=o.bar="sharp";return r+e.split("").reverse().join("")}console.log(doit(window));</script> <script>for(var array=[4,8,15,16,23,42],i=0;i<array.length;i++)console.log(array[i]);</script> </body> </html>
diff --git a/test/fixtures/script-inline.src.html b/test/fixtures/script-inline.src.html
@@ -13,6 +13,12 @@
 
 console.log(doit(window));
 </script>
-<script>console.log('Hello world');</script>
+<script>
+  var array = [4, 8, 15, 16, 23, 42];
+
+  for (var i = 0; i < array.length; i++) {
+    console.log(array[i]);
+  }
+</script>
 </body>
 </html>
diff --git a/test/fixtures/script-local.js b/test/fixtures/script-local.js
@@ -1 +1,5 @@
-console.log('Hello world');
+var array = [4, 8, 15, 16, 23, 42];
+
+for (var i = 0; i < array.length; i++) {
+    console.log(array[i]);
+}
diff --git a/test/fixtures/script-local.result.html b/test/fixtures/script-local.result.html
@@ -1 +1 @@
-<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>min script</title> </head> <body> <script>console.log("Hello world");</script> </body> </html>
+<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>min script</title> </head> <body> <script>for(var array=[4,8,15,16,23,42],i=0;i<array.length;i++)console.log(array[i]);</script> </body> </html>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta charset="UTF-8"> <title>App</title> <style>p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;}</style> </head> <body> body </body> </html>
		<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta charset="UTF-8"> <title>App</title> <style>p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=') repeat;}p:before{ content:'<';color:blue;}</style> </head> <body> body </body> </html>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>External script + css</title> <style>p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAP0BAP39/QAAACwAAAAAAQABAAACAkQBADs=') repeat;}</style> <script src="http://localhost:54321/script.min.js"></script> <script>function doit(o){var r="remy",e=o.bar="sharp";return r+e.split("").reverse().join("")}console.log(doit(window));</script> </head> <body> </body> </html>
		<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>External script + css</title> <style>p{ font-size:10px;background:url('data:image/gif;base64,R0lGODlhAQABAP0BAP39/QAAACwAAAAAAQABAAACAkQBADs=') repeat;}p:before{ content:'<';color:blue;}</style> <script src="http://localhost:54321/script.min.js"></script> <script>function doit(o){var r="remy",e=o.bar="sharp";return r+e.split("").reverse().join("")}console.log(doit(window));</script> </head> <body> </body> </html>