posthtml · maltsev · Nov 12, 2020 · Nov 9, 2020 · Nov 9, 2020 · Nov 9, 2020
diff --git a/README.md b/README.md
@@ -529,6 +529,49 @@ Minified:
 <svg 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="#fff">SVG</text></svg>
 ```
 
+### minifyConditionalComments
+
+Minify content inside conditional comments.
+
+##### Example
+
+Source:
+
+```html
+<!--[if lte IE 7]>
+<style type="text/css">
+.title {
+  color: red;
+}
+</style>
+<![endif]-->
+```
+
+Minified:
+
+```html
+<!--[if lte IE 7]><style>.title {color:red}</style><![endif]-->
+```
+
+##### Notice
+
+Due to [the limitation of PostHTML](https://github.com/posthtml/posthtml-parser/issues/9) (which is actually a issue from upstream [htmlparser2](https://github.com/fb55/htmlparser2/pull/146)), following html snippet is not supported:
+
+```html
+<!--[if lt IE 7]><html class="no-js ie6"><![endif]-->
+<!--[if IE 7]><html class="no-js ie7"><![endif]-->
+<!--[if IE 8]><html class="no-js ie8"><![endif]-->
+<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
+```
+
+Which will result in:
+
+```html
+<!--[if lt IE 7]><html class="no-js ie6"></html><![endif]-->
+<!--[if IE 7]><html class="no-js ie7"></html><![endif]-->
+<!--[if IE 8]><html class="no-js ie8"></html><![endif]-->
+<!--[if gt IE 8]><!--><html class="no-js"></html><!--<![endif]-->
+```
 
 ### removeRedundantAttributes
 Removes redundant attributes from tags if they contain default values:

diff --git a/lib/modules/minifyConditionalComments.es6 b/lib/modules/minifyConditionalComments.es6
@@ -0,0 +1,44 @@
+import htmlnano from '../htmlnano';
+import { isConditionalComment } from '../helpers';
+
+// Spec: https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537512(v=vs.85)
+const CONDITIONAL_COMMENT_REGEXP = /(<!--\[if\s+?[^<>[\]]+?]>)([\s\S]+?)(<!\[endif\]-->)/gm;
+
+/** Minify content inside conditional comments */
+export default async function minifyConditionalComments(tree, htmlnanoOptions) {
+    // forEach, tree.walk, tree.match just don't support Promise.
+    for (let i = 0, len = tree.length; i < len; i++) {
+        const node = tree[i];
+
+        if (typeof node === 'string' && isConditionalComment(node)) {
+            tree[i] = await minifycontentInsideConditionalComments(node, htmlnanoOptions);
+        }
+
+        if (node.content && node.content.length) {
+            tree[i].content = await minifyConditionalComments(node.content, htmlnanoOptions);
+        }
+    }
+
+    return tree;
+}
+
+async function minifycontentInsideConditionalComments(text, htmlnanoOptions) {
+    let match;
+    const matches = [];
+
+    // FIXME!
+    // String#matchAll is supported since Node.js 12
+    while ((match = CONDITIONAL_COMMENT_REGEXP.exec(text)) !== null) {
+        matches.push([match[1], match[2], match[3]]);
+    }
+
+    if (!matches.length) {
+        return Promise.resolve(text);
+    }
+
+    return Promise.all(matches.map(async match => {
+        const result = await htmlnano.process(match[1], htmlnanoOptions, {}, {});
+
+        return match[0] + result.html + match[2];
+    }));
+}
diff --git a/lib/presets/max.es6 b/lib/presets/max.es6
@@ -13,5 +13,6 @@ export default { ...safePreset,
         preset: 'default',
     },
     minifySvg: {},
+    minifyConditionalComments: true,
     removeOptionalTags: true,
 };
diff --git a/lib/presets/safe.es6 b/lib/presets/safe.es6
@@ -24,6 +24,7 @@ export default {
             { convertShapeToPath: false },
         ],
     },
+    minifyConditionalComments: false,
     removeEmptyAttributes: true,
     removeRedundantAttributes: false,
     removeComments: 'safe',

diff --git a/test/modules/minifyConditionalComments.js b/test/modules/minifyConditionalComments.js
@@ -0,0 +1,80 @@
+import { init } from '../htmlnano';
+import safePreset from '../../lib/presets/safe';
+
+
+describe('minifyConditionalComments', () => {
+    const fixture = {
+        fullHtml: `
+<!DOCTYPE html>
+<html class="no-js">
+    <head>
+        <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
+        <meta charset="utf-8">
+        <!--[if lte IE 7]>
+            <style type="text/css">
+                .title {
+                    color: red;
+                }
+            </style>
+        <![endif]-->
+    </head>
+</html>`,
+        fullHtmlMinified: '<!DOCTYPE html><html class="no-js"><head><meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"><meta charset="utf-8"><!--[if lte IE 7]><style type="text/css">.title{color:red}</style><![endif]--></head></html>',
+        multipleConditionalComment: `
+<!--[if lt IE 7 ]>
+    <div class="ie6">
+    </div>
+<![endif]-->
+<!--[if IE 7 ]>
+    <div class="ie7">
+    </div>
+<![endif]-->
+<!--[if IE 8 ]>
+    <div class="ie8">
+    </div>
+<![endif]-->
+<!--[if IE 9 ]>
+    <div class="ie9">
+    </div>
+<![endif]-->
+<!--[if (gt IE 9)|!(IE)]><!-->
+    <div class="w3c">
+    </div>
+<!--<![endif]-->`,
+        multipleConditionalCommentMinified: '<!--[if lt IE 7 ]><div class="ie6"> </div><![endif]--><!--[if IE 7 ]><div class="ie7"> </div><![endif]--><!--[if IE 8 ]><div class="ie8"> </div><![endif]--><!--[if IE 9 ]><div class="ie9"> </div><![endif]--><!--[if (gt IE 9)|!(IE)]><!--><div class="w3c"> </div>',
+        singleLineMultipleConditionalComment: `
+<!--[if lt IE 7 ]><div class="ie6"></div><![endif]--><!--[if IE 7 ]><div class="ie7"></div><![endif]--><!--[if IE 8 ]><div class="ie8"></div><![endif]--><!--[if IE 9 ]><div class="ie9"></div><![endif]--><!--[if (gt IE 9)|!(IE)]><!--><div class="w3c"></div><!--<![endif]-->`,
+    };
+
+    it('common html', () => {
+        return init(
+            fixture.fullHtml,
+            fixture.fullHtmlMinified,
+            {
+                ...safePreset,
+                minifyConditionalComments: true
+            }
+        );
+    });
+
+    it('multiple conditional comment', () => {
+        return init(
+            fixture.multipleConditionalComment,
+            fixture.multipleConditionalCommentMinified,
+            {
+                ...safePreset,
+                minifyConditionalComments: true
+            }
+        );
+    });
+
+    it('multiple conditional comment in single line', () => {
+        return init(
+            fixture.singleLineMultipleConditionalComment,
+            fixture.singleLineMultipleConditionalComment,
+            {
+                minifyConditionalComments: true
+            }
+        );
+    });
+});