Fix svg dependencies not being found when using minification (#1022)

parcel-bundler · Mar 20, 2018 · e3c90c4 · e3c90c4
1 parent 9858937
commit e3c90c4
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 15 deletions.
diff --git a/src/assets/HTMLAsset.js b/src/assets/HTMLAsset.js
@@ -4,6 +4,7 @@ const api = require('posthtml/lib/api');
 const urlJoin = require('../utils/urlJoin');
 const render = require('posthtml-render');
 const posthtmlTransform = require('../transforms/posthtml');
+const htmlnanoTransform = require('../transforms/htmlnano');
 const isURL = require('../utils/is-url');
 
 // A list of all attributes that may produce a dependency
@@ -22,7 +23,7 @@ const ATTRS = {
   href: ['link', 'a', 'use'],
   srcset: ['img', 'source'],
   poster: ['video'],
-  'xlink:href': ['use'], // Deprecated since SVG 2, throws error in svgo
+  'xlink:href': ['use'],
   content: ['meta']
 };
 
@@ -136,6 +137,12 @@ class HTMLAsset extends Asset {
     await posthtmlTransform(this);
   }
 
+  async transform() {
+    if (this.options.minify) {
+      await htmlnanoTransform(this);
+    }
+  }
+
   generate() {
     let html = this.isAstDirty ? render(this.ast) : this.contents;
     return {html};

diff --git a/src/transforms/htmlnano.js b/src/transforms/htmlnano.js
@@ -0,0 +1,21 @@
+const posthtml = require('posthtml');
+const htmlnano = require('htmlnano');
+
+module.exports = async function(asset) {
+  await asset.parseIfNeeded();
+
+  const htmlNanoConfig = asset.package.htmlnano ||
+    (await asset.getConfig(['.htmlnanorc', '.htmlnanorc.js'])) || {
+      collapseWhitespace: 'conservative',
+      minifyCss: {
+        safe: true
+      }
+    };
+
+  let res = await posthtml([htmlnano(htmlNanoConfig)]).process(asset.ast, {
+    skipParse: true
+  });
+
+  asset.ast = res.tree;
+  asset.isAstDirty = true;
+};
diff --git a/src/transforms/posthtml.js b/src/transforms/posthtml.js
@@ -1,6 +1,5 @@
 const loadPlugins = require('../utils/loadPlugins');
 const posthtml = require('posthtml');
-const htmlnano = require('htmlnano');
 
 module.exports = async function(asset) {
   let config = await getConfig(asset);
@@ -29,19 +28,6 @@ async function getConfig(asset) {
 
   config = config || {};
   config.plugins = await loadPlugins(config.plugins, asset.name);
-
-  if (asset.options.minify) {
-    const htmlNanoConfig = asset.package.htmlnano ||
-      (await asset.getConfig(['.htmlnanorc', '.htmlnanorc.js'])) || {
-        collapseWhitespace: 'conservative',
-        minifyCss: {
-          safe: true
-        }
-      };
-
-    config.plugins.push(htmlnano(htmlNanoConfig));
-  }
-
   config.skipParse = true;
   return config;
 }
diff --git a/test/html.js b/test/html.js
@@ -519,4 +519,19 @@ describe('html', function() {
       ]
     });
   });
+
+  it('should bundle svg files correctly', async function() {
+    let b = await bundle(__dirname + '/integration/html-svg/index.html');
+
+    assertBundleTree(b, {
+      name: 'index.html',
+      assets: ['index.html'],
+      childBundles: [
+        {
+          type: 'svg',
+          assets: ['file.svg']
+        }
+      ]
+    });
+  });
 });
diff --git a/test/integration/html-svg/file.svg b/test/integration/html-svg/file.svg
diff --git a/test/integration/html-svg/index.html b/test/integration/html-svg/index.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<svg xmlns:xlink="http://www.w3.org/1999/xlink">
+	<use xlink:href="file.svg#all"/>
+</svg>