Repository: postcss/autoprefixer
Pull request #1129 (2018-09-22 11:23:07)

[Updated] Add warning to align/justify-items/content in IE
This is a branch off of https://github.com/postcss/autoprefixer/pull/1123 by @janczer.

It fixes https://github.com/postcss/autoprefixer/pull/1123 (`align/justify-items/content` warnings).

Our branches got out of sync and it was too difficult to merge them back together so I'm just making a new pull request instead.

Further discussion is in https://github.com/postcss/autoprefixer/pull/1123


Patch:
diff --git a/lib/processor.js b/lib/processor.js
index f78835b..82ff2f8 100644
--- a/lib/processor.js
+++ b/lib/processor.js
@@ -69,6 +69,24 @@ class Processor {
       let prop = decl.prop
       let value = decl.value
 
+      let GridNeedsPrefixing = () => {
+        let grid = this.prefixes.add['grid-area']
+        return this.prefixes.options.grid && grid && grid.prefixes
+      }
+
+      function isGrid (subDecl) {
+        let displayGrid = subDecl.prop === 'display' &&
+          /(inline-)?grid/.test(subDecl.value)
+        let gridTemplate = /grid-template/.test(subDecl.prop)
+        let gridGap = /grid-([A-z]+-)?gap/.test(subDecl.prop)
+
+        return displayGrid || gridTemplate || gridGap
+      }
+
+      function isGridContainer () {
+        return decl.parent.some(isGrid)
+      }
+
       if (prop === 'grid-row-span') {
         result.warn(
           'grid-row-span is not part of final Grid Layout. ' +
@@ -93,13 +111,27 @@ class Processor {
         if (value === 'under' || value === 'over') {
           result.warn(
             'You should use 2 values for text-emphasis-position ' +
-                        'For example, `under left` instead of just `under`.',
+            'For example, `under left` instead of just `under`.',
             { node: decl }
           )
         }
       } else {
-        let grid = this.prefixes.add['grid-area']
-        if (this.prefixes.options.grid && grid && grid.prefixes) {
+        if (GridNeedsPrefixing()) {
+          if (isGridContainer()) {
+            if (/(align|justify|place)-items/.test(prop)) {
+              let selfEquiv = prop.replace('-items', '-self')
+              result.warn(['',
+                `  IE does not support ${ prop } on grid containers.`,
+                `  Try using ${ selfEquiv } on child elements instead.`,
+                `  Example: .grid > * { ${ selfEquiv }: ${ decl.value } }\n`
+              ].join('\n'), { node: decl })
+            }
+            if (/(align|justify|place)-content/.test(prop)) {
+              result.warn(
+                `IE does not support ${ decl.prop } on grid containers.`,
+                { node: decl })
+            }
+          }
           if (prop === 'display' && decl.value === 'contents') {
             result.warn(
               'Please do not use display: contents; ' +
diff --git a/package.json b/package.json
index 85e9d6a..645beeb 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
   "size-limit": [
     {
       "path": "build/lib/autoprefixer.js",
-      "limit": "101 KB"
+      "limit": "102 KB"
     }
   ],
   "eslintConfig": {


Test patch:
diff --git a/test/autoprefixer.test.js b/test/autoprefixer.test.js
index c484159..d60c42f 100644
--- a/test/autoprefixer.test.js
+++ b/test/autoprefixer.test.js
@@ -554,7 +554,17 @@ describe('hacks', () => {
       'autoprefixer: <css input>:105:30: auto-fit value is not ' +
                 'supported by IE',
       'autoprefixer: <css input>:121:3: Please do not use ' +
-      'display: contents; if you have grid setting enabled'
+          'display: contents; if you have grid setting enabled',
+      'autoprefixer: <css input>:125:3: \n' +
+        '  IE does not support align-items on grid containers.\n' +
+        '  Try using align-self on child elements instead.\n' +
+        '  Example: .grid > * { align-self: center }\n',
+      'autoprefixer: <css input>:130:3: \n' +
+        '  IE does not support justify-items on grid containers.\n' +
+        '  Try using justify-self on child elements instead.\n' +
+        '  Example: .grid > * { justify-self: center }\n',
+      'autoprefixer: <css input>:135:3: IE does not support justify-content ' +
+                'on grid containers.'
     ])
   })
 
diff --git a/test/cases/grid.css b/test/cases/grid.css
index a6e2bdf..efcf6a9 100644
--- a/test/cases/grid.css
+++ b/test/cases/grid.css
@@ -120,3 +120,18 @@
 .warn-display-contents .grid {
   display: contents;
 }
+
+.warn_ie_align {
+  align-items: center;
+  display: grid;
+}
+
+.warn_ie_justify {
+  justify-items: center;
+  display: grid;
+}
+
+.warn_ie_justify_content {
+  justify-content: center;
+  display: grid;
+}
diff --git a/test/cases/grid.disabled.css b/test/cases/grid.disabled.css
index e4ba0c3..7bcf0cc 100644
--- a/test/cases/grid.disabled.css
+++ b/test/cases/grid.disabled.css
@@ -122,3 +122,20 @@
 .warn-display-contents .grid {
   display: contents;
 }
+
+.warn_ie_align {
+  -ms-flex-align: center;
+      align-items: center;
+  display: grid;
+}
+
+.warn_ie_justify {
+  justify-items: center;
+  display: grid;
+}
+
+.warn_ie_justify_content {
+  -ms-flex-pack: center;
+      justify-content: center;
+  display: grid;
+}
diff --git a/test/cases/grid.out.css b/test/cases/grid.out.css
index 517d0ac..8d80e6b 100644
--- a/test/cases/grid.out.css
+++ b/test/cases/grid.out.css
@@ -159,3 +159,25 @@
 .warn-display-contents .grid {
   display: contents;
 }
+
+.warn_ie_align {
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -ms-grid;
+  display: grid;
+}
+
+.warn_ie_justify {
+  justify-items: center;
+  display: -ms-grid;
+  display: grid;
+}
+
+.warn_ie_justify_content {
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  display: -ms-grid;
+  display: grid;
+}