Generates -ms-flex-item-align on align-self instead on align-items

Author: ai

lib/hacks/grid-row-align.coffee

@@ -13,6 +13,6 @@ class GridRowAlign extends Declaration
 
   # Change IE property back
   normalize: (prop) ->
-    'align-items'
+    'align-self'
 
 module.exports = GridRowAlign

lib/processor.coffee

@@ -71,11 +71,11 @@ class Processor
         # Transition
         @prefixes.transition.add(decl, result)
 
-      else if decl.prop == 'align-items'
-        # align-items flexbox or grid
+      else if decl.prop == 'align-self'
+        # align-self flexbox or grid
         display = @displayType(decl)
         if display != 'grid' and @prefixes.options.flexbox != false
-          prefixer = @prefixes.add['align-items']
+          prefixer = @prefixes.add['align-self']
           if prefixer and prefixer.prefixes
             prefixer.process(decl)
         if display != 'flex' and @prefixes.options.grid != false
@@ -163,7 +163,7 @@ class Processor
     if @prefixes.options.flexbox == false and node.type == 'decl'
       if node.prop == 'display' and node.value.indexOf('flex') != -1
         return true
-      other = ['order', 'justify-content', 'align-self', 'align-content']
+      other = ['order', 'justify-content', 'align-items', 'align-content']
       if node.prop.indexOf('flex') != -1 or other.indexOf(node.prop) != -1
         return true
 

test/cases/grid.css

@@ -2,15 +2,15 @@
     display: grid;
     grid-template-columns: auto 1fr;
     justify-items: stretch;
-    align-items: stretch;
+    align-self: stretch;
     grid-column-start: 1;
     grid-column-end: span 3;
 }
 
 .b {
     display: inline-grid;
     grid-template-rows: 10px repeat(4, 250px 10px) 20px;
-    align-items: stretch;
+    align-self: stretch;
     grid-row-start: 1;
     grid-row-end: span 3;
 }
@@ -27,9 +27,9 @@
 }
 
 .unknown {
-    align-items: start;
+    align-self: start;
 }
 
 .flex {
-    align-items: flex-end;
+    align-self: flex-end;
 }

test/cases/grid.disabled.css

@@ -2,15 +2,15 @@
     display: grid;
     grid-template-columns: auto 1fr;
     justify-items: stretch;
-    align-items: stretch;
+    align-self: stretch;
     grid-column-start: 1;
     grid-column-end: span 3;
 }
 
 .b {
     display: inline-grid;
     grid-template-rows: 10px repeat(4, 250px 10px) 20px;
-    align-items: stretch;
+    align-self: stretch;
     grid-row-start: 1;
     grid-row-end: span 3;
 }
@@ -27,11 +27,11 @@
 }
 
 .unknown {
-    -ms-flex-align: start;
-        align-items: start;
+    -ms-flex-item-align: start;
+        align-self: start;
 }
 
 .flex {
-    -ms-flex-align: end;
-        align-items: flex-end;
+    -ms-flex-item-align: end;
+        align-self: flex-end;
 }

test/cases/grid.out.css

@@ -6,7 +6,7 @@
     -ms-grid-column-align: stretch;
     justify-items: stretch;
     -ms-grid-row-align: stretch;
-    align-items: stretch;
+    align-self: stretch;
     -ms-grid-column: 1;
     grid-column-start: 1;
     -ms-grid-column-span: 3;
@@ -19,7 +19,7 @@
     -ms-grid-rows: 10px (250px 10px)[4] 20px;
     grid-template-rows: 10px repeat(4, 250px 10px) 20px;
     -ms-grid-row-align: stretch;
-    align-items: stretch;
+    align-self: stretch;
     -ms-grid-row: 1;
     grid-row-start: 1;
     -ms-grid-row-span: 3;
@@ -40,14 +40,14 @@
 }
 
 .unknown {
-    -webkit-align-items: start;
-    -ms-flex-align: start;
+    -webkit-align-self: start;
+    -ms-flex-item-align: start;
     -ms-grid-row-align: start;
-    align-items: start;
+    align-self: start;
 }
 
 .flex {
-    -webkit-align-items: flex-end;
-    -ms-flex-align: end;
-    align-items: flex-end;
+    -webkit-align-self: flex-end;
+    -ms-flex-item-align: end;
+    align-self: flex-end;
 }