[css-grid] Implement hack for place-self property (#1144)

* [place-self] Implement place-self hack

* [place-self] Add test cases

* [place-self] Add test case for place-items warning

* [place-self] Add check for grid status

data/prefixes.js

@@ -724,7 +724,7 @@ f(grid, browsers => {
     'grid-row-start', 'grid-column-start',
     'grid-row-end', 'grid-column-end',
     'grid-row', 'grid-column', 'grid-area',
-    'grid-template', 'grid-template-areas'
+    'grid-template', 'grid-template-areas', 'place-self'
   ], {
     feature: 'css-grid',
     browsers

lib/hacks/place-self.js

@@ -0,0 +1,32 @@
+let Declaration = require('../declaration')
+let utils = require('./grid-utils')
+
+class PlaceSelf extends Declaration {
+  static names = ['place-self']
+
+  /**
+   * Translate place-self to separate -ms- prefixed properties
+   */
+  insert (decl, prefix, prefixes) {
+    if (prefix !== '-ms-') return super.insert(decl, prefix, prefixes)
+
+    // prevent doubling of prefixes
+    if (decl.parent.some(i => i.prop === '-ms-grid-row-align')) {
+      return undefined
+    }
+
+    let [[first, second]] = utils.parse(decl)
+
+    if (second) {
+      utils.insertDecl(decl, 'grid-row-align', first)
+      utils.insertDecl(decl, 'grid-column-align', second)
+    } else {
+      utils.insertDecl(decl, 'grid-row-align', first)
+      utils.insertDecl(decl, 'grid-column-align', first)
+    }
+
+    return undefined
+  }
+}
+
+module.exports = PlaceSelf

lib/prefixes.js

@@ -53,6 +53,7 @@ Declaration.hack(require('./hacks/overscroll-behavior'))
 Declaration.hack(require('./hacks/grid-template-areas'))
 Declaration.hack(require('./hacks/text-emphasis-position'))
 Declaration.hack(require('./hacks/color-adjust'))
+Declaration.hack(require('./hacks/place-self'))
 
 Value.hack(require('./hacks/gradient'))
 Value.hack(require('./hacks/intrinsic'))

lib/processor.js

@@ -265,6 +265,15 @@ class Processor {
             return prefixer.process(decl, result)
           }
         }
+      } else if (decl.prop === 'place-self') {
+        prefixer = this.prefixes.add['place-self']
+        if (
+          prefixer &&
+          prefixer.prefixes &&
+          this.gridStatus(decl, result) !== false
+        ) {
+          return prefixer.process(decl, result)
+        }
       } else {
         // Properties
         prefixer = this.prefixes.add[decl.prop]

test/autoprefixer.test.js

@@ -593,7 +593,10 @@ describe('hacks', () => {
         'on grid containers. Try using justify-self on child elements ' +
         'instead: .warn_ie_justify > * { justify-self: center }',
       'autoprefixer: <css input>:135:3: IE does not support justify-content ' +
-        'on grid containers'
+        'on grid containers',
+      'autoprefixer: <css input>:140:3: IE does not support place-items ' +
+        'on grid containers. Try using place-self on child elements ' +
+        'instead: .warn_place_items > * { place-self: start end }'
     ])
   })
 

test/cases/grid.css

@@ -135,3 +135,16 @@
   justify-content: center;
   display: grid;
 }
+
+.warn_place_items {
+  place-items: start end;
+  display: grid;
+}
+
+.place-self-a {
+  place-self: center;
+}
+
+.place-self-b {
+  place-self: start end;
+}

test/cases/grid.disabled.css

@@ -139,3 +139,16 @@
       justify-content: center;
   display: grid;
 }
+
+.warn_place_items {
+  place-items: start end;
+  display: grid;
+}
+
+.place-self-a {
+  place-self: center;
+}
+
+.place-self-b {
+  place-self: start end;
+}

test/cases/grid.out.css

@@ -181,3 +181,21 @@
   display: -ms-grid;
   display: grid;
 }
+
+.warn_place_items {
+  place-items: start end;
+  display: -ms-grid;
+  display: grid;
+}
+
+.place-self-a {
+  -ms-grid-row-align: center;
+  -ms-grid-column-align: center;
+  place-self: center;
+}
+
+.place-self-b {
+  -ms-grid-row-align: start;
+  -ms-grid-column-align: end;
+  place-self: start end;
+}