Repository: postcss/autoprefixer
Pull request #840 (2017-05-15 09:21:34)

Fix: Do not add non-webkit prefixes for CSS grid
In CSS grid, only Safari needs to add the -webkit- prefix to min-content/max-content values.

Fixed this commit: https://github.com/postcss/autoprefixer/commit/99def371c9511212dfc9c1eaa573abfee813b97d?diff=split#diff-edefb210647f5ec99168718dbbf80320R36

and this issue: https://github.com/postcss/autoprefixer/issues/803

@ai 

ai: Thanks! Great PR.

Patch:
diff --git a/data/prefixes.js b/data/prefixes.js
index b0586b0..be1f8b7 100644
--- a/data/prefixes.js
+++ b/data/prefixes.js
@@ -407,7 +407,9 @@ f(require('caniuse-lite/data/features/intrinsic-width.js'), browsers =>
             'height', 'min-height', 'max-height',
             'inline-size', 'min-inline-size', 'max-inline-size',
             'block-size', 'min-block-size', 'max-block-size',
-            'grid-template', 'grid-template-rows', 'grid-template-columns'
+            'grid', 'grid-template',
+            'grid-template-rows', 'grid-template-columns',
+            'grid-auto-columns', 'grid-auto-rows'
         ],
         feature: 'intrinsic-width',
         browsers
diff --git a/lib/hacks/intrinsic.js b/lib/hacks/intrinsic.js
index 979ce89..07fabc5 100644
--- a/lib/hacks/intrinsic.js
+++ b/lib/hacks/intrinsic.js
@@ -45,6 +45,24 @@ class Intrinsic extends Value {
         return new OldValue(this.name, prefixed, prefixed, regexp(prefixed));
     }
 
+    /**
+     * Do not add non-webkit prefixes for
+     * 'grid', 'grid-template',
+     * 'grid-template-rows', 'grid-template-columns',
+     * 'grid-auto-columns', 'grid-auto-rows'
+     */
+    add(decl, prefix) {
+        const p = decl.prop;
+        if (p.indexOf('grid') !== -1) {
+            if (prefix === '-webkit-' || prefix === '-webkit- old') {
+                return super.add(decl, prefix);
+            }
+        } else {
+            return super.add(decl, prefix);
+        }
+        return undefined;
+    }
+
 }
 
 module.exports = Intrinsic;


Test patch:
diff --git a/test/cases/intrinsic.css b/test/cases/intrinsic.css
index 8a9fdba..0a063de 100644
--- a/test/cases/intrinsic.css
+++ b/test/cases/intrinsic.css
@@ -20,5 +20,17 @@ p {
 }
 
 .grid {
+    grid: min-content max-content / fit-content(500px);
+}
+
+.grid-template {
+    grid-template: min-content / fit-content(10px) max-content;
+}
+
+.grid-template-columns {
     grid-template-columns: minmax(100px, min-content);
 }
+
+.grid-auto-columns {
+    grid-auto-columns: min-content max-content;
+}
diff --git a/test/cases/intrinsic.out.css b/test/cases/intrinsic.out.css
index 61d8295..bd8595d 100644
--- a/test/cases/intrinsic.out.css
+++ b/test/cases/intrinsic.out.css
@@ -32,7 +32,21 @@ p {
 }
 
 .grid {
+    grid: -webkit-min-content -webkit-max-content / fit-content(500px);
+    grid: min-content max-content / fit-content(500px);
+}
+
+.grid-template {
+    grid-template: -webkit-min-content / fit-content(10px) -webkit-max-content;
+    grid-template: min-content / fit-content(10px) max-content;
+}
+
+.grid-template-columns {
     grid-template-columns: minmax(100px, -webkit-min-content);
-    grid-template-columns: minmax(100px, -moz-min-content);
     grid-template-columns: minmax(100px, min-content);
 }
+
+.grid-auto-columns {
+    grid-auto-columns: -webkit-min-content -webkit-max-content;
+    grid-auto-columns: min-content max-content;
+}