Make htmlnano configurable for production (#445)

* Parse htmlnano config Note that htmlnano fires only if Bundler.options.minify is true. * Add .htmlnanorc test * Fix naming
parcel-bundler · Dec 31, 2017 · d11a15e · d11a15e
1 parent 14e7880
commit d11a15e
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 7 deletions.
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>