fix: minimize is more safely (#304)

webpack-contrib · Aug 11, 2020 · 03152b1 · 03152b1
1 parent 2c640c6
commit 03152b1
Show file tree

Hide file tree

Showing 10 changed files with 647 additions and 54 deletions.
diff --git a/README.md b/README.md
@@ -484,16 +484,20 @@ Tell `html-loader` to minimize HTML.
 
 The enabled rules for minimizing by default are the following ones:
 
-- `collapseWhitespace`
-- `conservativeCollapse`
-- `keepClosingSlash`
-- `minifyCSS`
-- `minifyJS`
-- `removeAttributeQuotes`
-- `removeComments`
-- `removeScriptTypeAttributes`
-- `removeStyleTypeAttributes`
-- `useShortDoctype`
+```js
+({
+  caseSensitive: true,
+  collapseWhitespace: true,
+  conservativeCollapse: true,
+  keepClosingSlash: true,
+  minifyCSS: true,
+  minifyJS: true,
+  removeComments: true,
+  removeRedundantAttributes: true,
+  removeScriptTypeAttributes: true,
+  removeStyleLinkTypeAttributes: true,
+});
+```
 
 **webpack.config.js**
 

diff --git a/src/plugins/minimizer-plugin.js b/src/plugins/minimizer-plugin.js
@@ -6,16 +6,22 @@ export default (options) =>
       typeof options.minimize === 'boolean' ||
       typeof options.minimize === 'undefined'
         ? {
+            caseSensitive: true,
+            // `collapseBooleanAttributes` is not always safe, since this can break CSS attribute selectors and not safe for XHTML
             collapseWhitespace: true,
             conservativeCollapse: true,
             keepClosingSlash: true,
+            // We need ability to use cssnano, or setup own function without extra dependencies
             minifyCSS: true,
             minifyJS: true,
-            removeAttributeQuotes: true,
+            // `minifyURLs` is unsafe, because we can't guarantee what the base URL is
+            // `removeAttributeQuotes` is not safe in some rare cases, also HTML spec recommends against doing this
             removeComments: true,
+            // `removeEmptyAttributes` is not safe, can affect certain style or script behavior
+            removeRedundantAttributes: true,
             removeScriptTypeAttributes: true,
             removeStyleLinkTypeAttributes: true,
-            useShortDoctype: true,
+            // `useShortDoctype` is not safe for XHTML
           }
         : options.minimize;
 

diff --git a/test/__snapshots__/attributes-option.test.js.snap b/test/__snapshots__/attributes-option.test.js.snap
diff --git a/test/__snapshots__/esModule-option.test.js.snap b/test/__snapshots__/esModule-option.test.js.snap
diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap
diff --git a/test/__snapshots__/minimize-option.test.js.snap b/test/__snapshots__/minimize-option.test.js.snap
diff --git a/test/fixtures/XHTML.html b/test/fixtures/XHTML.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
+  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>Title of document</title>
+</head>
+<body>
+
+some content here...
+
+<br />
+
+<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
+<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
+
+<input type="checkbox" name="vehicle" value="car" checked="checked" />
+
+<tag>Text</tag>
+<TAG>Text</TAG>
+
+</body>
+</html>
diff --git a/test/fixtures/XHTML.js b/test/fixtures/XHTML.js
@@ -0,0 +1,3 @@
+import xhtml from './XHTML.html';
+
+export default xhtml;
diff --git a/test/fixtures/simple.html b/test/fixtures/simple.html
@@ -289,3 +289,32 @@ <h2>An Ordered HTML List</h2>
 <svg width="200" height="200">
   <use xlink:href="./webpack.svg"></use>
 </svg>
+
+<span>foo</span> <span>bar</span>
+
+<tag>Text</tag>
+<TAG>Text</TAG>
+
+<input type="checkbox" name="vehicle" value="car" checked="checked" />
+
+<br />
+
+<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
+<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
+
+<script type="text/javascript">
+  console.log('HERE')
+</script>
+
+<style type="text/css">
+  p {
+    color: #26b72b;
+  }
+</style>
+
+<div data-b="2" data-a="1" data-c="3">text</div>
+<div class="f a b e d c">text</div>
+
+<input type="text">
+
+<button onclick="   document.getElementById('demo').innerHTML    =    Date()">The time is?</button>
diff --git a/test/minimize-option.test.js b/test/minimize-option.test.js
@@ -111,4 +111,16 @@ describe('"minimize" option', () => {
     expect(getWarnings(stats)).toMatchSnapshot('warnings');
     expect(getErrors(stats)).toMatchSnapshot('errors');
   });
+
+  it('should work with XHTML', async () => {
+    const compiler = getCompiler('XHTML.js', { minimize: true });
+    const stats = await compile(compiler);
+
+    expect(getModuleSource('./XHTML.html', stats)).toMatchSnapshot('module');
+    expect(
+      execute(readAsset('main.bundle.js', compiler, stats))
+    ).toMatchSnapshot('result');
+    expect(getWarnings(stats)).toMatchSnapshot('warnings');
+    expect(getErrors(stats)).toMatchSnapshot('errors');
+  });
 });