Make htmlnano configurable for production (#445)

2007heaven · devongovett · commit d11a15e1636e · 2017-12-30T19:51:25.000-08:00
* Parse htmlnano config

Note that htmlnano fires only if Bundler.options.minify is true.

* Add .htmlnanorc test

* Fix naming
diff --git a/src/transforms/posthtml.js b/src/transforms/posthtml.js
@@ -32,10 +32,12 @@ async function getConfig(asset) {
   config.plugins = await loadPlugins(config.plugins, asset.name);
 
   if (asset.options.minify) {
-    const htmlNanoOptions = {
-      collapseWhitespace: 'conservative'
-    };
-    config.plugins.push(htmlnano(htmlNanoOptions));
+    const htmlNanoConfig = asset.package.htmlnano ||
+      (await Config.load(asset.name, ['.htmlnanorc', '.htmlnanorc.js'])) || {
+        collapseWhitespace: 'conservative'
+      };
+
+    config.plugins.push(htmlnano(htmlNanoConfig));
   }
 
   config.skipParse = true;
diff --git a/test/html.js b/test/html.js
@@ -124,9 +124,36 @@ describe('html', function() {
       production: true
     });
 
-    let css = fs.readFileSync(__dirname + '/dist/index.html', 'utf8');
-    assert(css.includes('Other page'));
-    assert(!css.includes('\n'));
+    let html = fs.readFileSync(__dirname + '/dist/index.html', 'utf8');
+    assert(html.includes('Other page'));
+    assert(!html.includes('\n'));
+  });
+
+  it('should read .htmlnanorc and minify HTML in production mode', async function() {
+    await bundle(__dirname + '/integration/htmlnano-config/index.html', {
+      production: true
+    });
+
+    let html = fs.readFileSync(__dirname + '/dist/index.html', 'utf8');
+
+    // mergeStyles
+    assert(
+      html.includes(
+        '<style>h1{color:red}div{font-size:20px}</style><style media="print">div{color:blue}</style>'
+      )
+    );
+
+    // minifyJson
+    assert(
+      html.includes('<script type="application/json">{"user":"me"}</script>')
+    );
+
+    // minifySvg is false
+    assert(
+      html.includes(
+        '<svg version="1.1" baseprofile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="red"></rect><circle cx="150" cy="100" r="80" fill="green"></circle><text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text></svg>'
+      )
+    );
   });
 
   it('should not prepend the public path to assets with remote URLs', async function() {
diff --git a/test/integration/htmlnano-config/.htmlnanorc b/test/integration/htmlnano-config/.htmlnanorc
@@ -0,0 +1,5 @@
+{
+  mergeStyles: true,
+  minifySvg: false,
+  minifyJson: true
+}
diff --git a/test/integration/htmlnano-config/index.html b/test/integration/htmlnano-config/index.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+<head>
+  <title>Test</title>
+  <style>h1 { color: red }</style>
+  <style media="print">div { color: blue }</style>
+
+  <style type="text/css" media="print">a {}</style>
+  <style>div { font-size: 20px }</style>
+</head>
+<body>
+<h1>Index page</h1>
+<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
+  <rect width="100%" height="100%" fill="red" />
+
+  <circle cx="150" cy="100" r="80" fill="green" />
+
+  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
+</svg>
+<script type="application/json">
+  {
+    "user": "me"
+  }
+</script>
+
+</body>
+</html>
