Skip to content

Commit 03152b1

Browse files
evilebottnawievilebottnawi
authored
fix: minimize is more safely (#304)
1 parent 2c640c6 commit 03152b1

File tree

10 files changed

+647
-54
lines changed

10 files changed

+647
-54
lines changed

‎README.md

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -484,16 +484,20 @@ Tell `html-loader` to minimize HTML.
484484

485485
The enabled rules for minimizing by default are the following ones:
486486

487-
- `collapseWhitespace`
488-
- `conservativeCollapse`
489-
- `keepClosingSlash`
490-
- `minifyCSS`
491-
- `minifyJS`
492-
- `removeAttributeQuotes`
493-
- `removeComments`
494-
- `removeScriptTypeAttributes`
495-
- `removeStyleTypeAttributes`
496-
- `useShortDoctype`
487+
```js
488+
({
489+
caseSensitive: true,
490+
collapseWhitespace: true,
491+
conservativeCollapse: true,
492+
keepClosingSlash: true,
493+
minifyCSS: true,
494+
minifyJS: true,
495+
removeComments: true,
496+
removeRedundantAttributes: true,
497+
removeScriptTypeAttributes: true,
498+
removeStyleLinkTypeAttributes: true,
499+
});
500+
```
497501

498502
**webpack.config.js**
499503

‎src/plugins/minimizer-plugin.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,22 @@ export default (options) =>
66
typeof options.minimize === 'boolean' ||
77
typeof options.minimize === 'undefined'
88
? {
9+
caseSensitive: true,
10+
// `collapseBooleanAttributes` is not always safe, since this can break CSS attribute selectors and not safe for XHTML
911
collapseWhitespace: true,
1012
conservativeCollapse: true,
1113
keepClosingSlash: true,
14+
// We need ability to use cssnano, or setup own function without extra dependencies
1215
minifyCSS: true,
1316
minifyJS: true,
14-
removeAttributeQuotes: true,
17+
// `minifyURLs` is unsafe, because we can't guarantee what the base URL is
18+
// `removeAttributeQuotes` is not safe in some rare cases, also HTML spec recommends against doing this
1519
removeComments: true,
20+
// `removeEmptyAttributes` is not safe, can affect certain style or script behavior
21+
removeRedundantAttributes: true,
1622
removeScriptTypeAttributes: true,
1723
removeStyleLinkTypeAttributes: true,
18-
useShortDoctype: true,
24+
// `useShortDoctype` is not safe for XHTML
1925
}
2026
: options.minimize;
2127

‎test/__snapshots__/attributes-option.test.js.snap

Lines changed: 330 additions & 22 deletions
Large diffs are not rendered by default.

‎test/__snapshots__/esModule-option.test.js.snap

Lines changed: 90 additions & 6 deletions
Large diffs are not rendered by default.

‎test/__snapshots__/loader.test.js.snap

Lines changed: 30 additions & 2 deletions
Large diffs are not rendered by default.

‎test/__snapshots__/minimize-option.test.js.snap

Lines changed: 109 additions & 12 deletions
Large diffs are not rendered by default.

‎test/fixtures/XHTML.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
2+
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
3+
<html xmlns="http://www.w3.org/1999/xhtml">
4+
<head>
5+
<title>Title of document</title>
6+
</head>
7+
<body>
8+
9+
some content here...
10+
11+
<br />
12+
13+
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
14+
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
15+
16+
<input type="checkbox" name="vehicle" value="car" checked="checked" />
17+
18+
<tag>Text</tag>
19+
<TAG>Text</TAG>
20+
21+
</body>
22+
</html>

‎test/fixtures/XHTML.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import xhtml from './XHTML.html';
2+
3+
export default xhtml;

‎test/fixtures/simple.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -289,3 +289,32 @@ <h2>An Ordered HTML List</h2>
289289
<svg width="200" height="200">
290290
<use xlink:href="./webpack.svg"></use>
291291
</svg>
292+
293+
<span>foo</span> <span>bar</span>
294+
295+
<tag>Text</tag>
296+
<TAG>Text</TAG>
297+
298+
<input type="checkbox" name="vehicle" value="car" checked="checked" />
299+
300+
<br />
301+
302+
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
303+
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
304+
305+
<script type="text/javascript">
306+
console.log('HERE')
307+
</script>
308+
309+
<style type="text/css">
310+
p {
311+
color: #26b72b;
312+
}
313+
</style>
314+
315+
<div data-b="2" data-a="1" data-c="3">text</div>
316+
<div class="f a b e d c">text</div>
317+
318+
<input type="text">
319+
320+
<button onclick=" document.getElementById('demo').innerHTML = Date()">The time is?</button>

‎test/minimize-option.test.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,4 +111,16 @@ describe('"minimize" option', () => {
111111
expect(getWarnings(stats)).toMatchSnapshot('warnings');
112112
expect(getErrors(stats)).toMatchSnapshot('errors');
113113
});
114+
115+
it('should work with XHTML', async () => {
116+
const compiler = getCompiler('XHTML.js', { minimize: true });
117+
const stats = await compile(compiler);
118+
119+
expect(getModuleSource('./XHTML.html', stats)).toMatchSnapshot('module');
120+
expect(
121+
execute(readAsset('main.bundle.js', compiler, stats))
122+
).toMatchSnapshot('result');
123+
expect(getWarnings(stats)).toMatchSnapshot('warnings');
124+
expect(getErrors(stats)).toMatchSnapshot('errors');
125+
});
114126
});

0 commit comments

Comments
 (0)