diff --git a/src/assets/HTMLAsset.js b/src/assets/HTMLAsset.js
index bdfe611c205..d6ff6e8f0c9 100644
--- 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
new file mode 100644
index 00000000000..1b9c9092a27
--- /dev/null
+++ 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
index c9f8ebaaa58..5dca2d57f15 100644
--- 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
index 71b7750a9a6..839219e17d7 100644
--- 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
new file mode 100644
index 00000000000..5bf00e06842
--- /dev/null
+++ b/test/integration/html-svg/file.svg
@@ -0,0 +1,3 @@
+
diff --git a/test/integration/html-svg/index.html b/test/integration/html-svg/index.html
new file mode 100644
index 00000000000..d09886bcc84
--- /dev/null
+++ b/test/integration/html-svg/index.html
@@ -0,0 +1,4 @@
+
+
\ No newline at end of file