Repository: postcss/autoprefixer (js)

Issue:
[css-grid] `place-self` can be translated
I'm kicking myself for not realizing this while we were working on the align/justify-content/items warnings >_<

## Input CSS

```css
.grid > * {
  place-self: center;
}
```

## Current Output CSS

```css
.grid > * {
  place-self: center;
}
```

## Expected output CSS

```css
.grid > * {
  -ms-grid-row-align: center;
  -ms-grid-column-align: center;
  place-self: center;
}
```

Pull request:
[css-grid] Implement hack for place-self property
Fixes #1143

The tests for this PR are failing because I need to find a way to make place-self hack to not add prefixes if css grid is disabled (described the problem [here](https://github.com/postcss/autoprefixer/issues/1143#issuecomment-430999451))

But the prefixes are being added correctly and can be tested 😀

/cc @Dan503 

Patch:
diff --git a/data/prefixes.js b/data/prefixes.js
index 30db8ad..fdede1d 100644
--- a/data/prefixes.js
+++ b/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
diff --git a/lib/hacks/place-self.js b/lib/hacks/place-self.js
new file mode 100644
index 0000000..fabbf56
--- /dev/null
+++ b/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
diff --git a/lib/prefixes.js b/lib/prefixes.js
index 3995e3a..9f4b4a0 100644
--- a/lib/prefixes.js
+++ b/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'))
diff --git a/lib/processor.js b/lib/processor.js
index 6ce2e18..0889879 100644
--- a/lib/processor.js
+++ b/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 patch:
diff --git a/test/autoprefixer.test.js b/test/autoprefixer.test.js
index 7e82e2f..b757f18 100644
--- a/test/autoprefixer.test.js
+++ b/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 }'
     ])
   })
 
diff --git a/test/cases/grid.css b/test/cases/grid.css
index efcf6a9..4f6fbaa 100644
--- a/test/cases/grid.css
+++ b/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;
+}
diff --git a/test/cases/grid.disabled.css b/test/cases/grid.disabled.css
index 7bcf0cc..93bde18 100644
--- a/test/cases/grid.disabled.css
+++ b/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;
+}
diff --git a/test/cases/grid.out.css b/test/cases/grid.out.css
index 8d80e6b..9b0b9f9 100644
--- a/test/cases/grid.out.css
+++ b/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;
+}