Don't convert min-width: 0% to min-width: 0 (#1385)

* Don't convert `min-width: 0%` to `min-width: 0`

This transformation isn't safe on IE11. See https://codepen.io/nex3/full/XWVqJrJ as an example of `min-width: 0` breaking IE11's flexbox behavior where `min-width: 0%` does not.

* Add a test

* Update packages/postcss-convert-values/src/index.js

Co-authored-by: Ludovico Fischer <43557+ludofischer@users.noreply.github.com>

Co-authored-by: Ludovico Fischer <43557+ludofischer@users.noreply.github.com>

packages/postcss-convert-values/src/index.js

@@ -36,6 +36,13 @@ const keepWhenZero = new Set([
   'line-height',
 ]);
 
+// Can't remove the % on these properties when they're 0 on IE 11
+const keepZeroPercent = new Set([
+  'max-height',
+  'height',
+  'min-width',
+]);
+
 /**
  * Numbers without digits after the dot are technically invalid,
  * but in that case css-value-parser returns the dot as part of the unit,
@@ -110,8 +117,7 @@ function shouldKeepZeroUnit(decl) {
   const { parent } = decl;
   const lowerCasedProp = decl.prop.toLowerCase();
   return (
-    (decl.value.includes('%') &&
-      (lowerCasedProp === 'max-height' || lowerCasedProp === 'height')) ||
+    (decl.value.includes('%') && keepZeroPercent.has(lowerCasedProp)) ||
     (parent &&
       parent.parent &&
       parent.parent.type === 'atrule' &&

packages/postcss-convert-values/test/index.js

@@ -252,8 +252,8 @@ test(
 );
 
 test(
-  'should not strip the percentage from 0 in max-height & height props',
-  passthroughCSS('h1{height:0%;max-height:0%}')
+  'should not strip the percentage from 0 in max-height, height, and min-width props',
+  passthroughCSS('h1{height:0%;max-height:0%;min-width:0%}')
 );
 
 test(