Merge branch 'Dan503-Dan503/#1335-justify-align-self'

postcss · Jul 11, 2020 · a6250bf · a6250bf
2 parents 0343bdc + 4ea1c3a
commit a6250bf
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 16 deletions.
diff --git a/lib/processor.js b/lib/processor.js
@@ -338,7 +338,6 @@ class Processor {
           }
         }
         if (
-          display !== 'flex' &&
           this.gridStatus(decl, result) !== false
         ) {
           prefixer = this.prefixes.add['grid-row-align']
@@ -348,9 +347,7 @@ class Processor {
         }
       } else if (decl.prop === 'justify-self') {
         // justify-self flexbox or grid
-        let display = this.displayType(decl)
         if (
-          display !== 'flex' &&
           this.gridStatus(decl, result) !== false
         ) {
           prefixer = this.prefixes.add['grid-column-align']

diff --git a/test/autoprefixer.test.js b/test/autoprefixer.test.js
@@ -703,33 +703,33 @@ describe('hacks', () => {
       'autoprefixer: <css input>:65:3: Can not find grid areas: b',
       'autoprefixer: <css input>:73:3: Can not find grid areas: c',
       'autoprefixer: <css input>:81:3: Can not find grid areas: d',
-      'autoprefixer: <css input>:109:3: grid-column-span is not part ' +
+      'autoprefixer: <css input>:116:3: grid-column-span is not part ' +
         'of final Grid Layout. Use grid-column.',
-      'autoprefixer: <css input>:110:3: grid-row-span is not part ' +
+      'autoprefixer: <css input>:117:3: grid-row-span is not part ' +
         'of final Grid Layout. Use grid-row.',
-      'autoprefixer: <css input>:111:3: grid-auto-columns is not ' +
+      'autoprefixer: <css input>:118:3: grid-auto-columns is not ' +
         'supported by IE',
-      'autoprefixer: <css input>:112:3: grid-auto-rows is not ' +
+      'autoprefixer: <css input>:119:3: grid-auto-rows is not ' +
         'supported by IE',
-      'autoprefixer: <css input>:114:33: auto-fill value is not ' +
+      'autoprefixer: <css input>:121:33: auto-fill value is not ' +
         'supported by IE',
-      'autoprefixer: <css input>:115:30: auto-fit value is not ' +
+      'autoprefixer: <css input>:122:30: auto-fit value is not ' +
         'supported by IE',
-      'autoprefixer: <css input>:131:3: Please do not use ' +
+      'autoprefixer: <css input>:138:3: Please do not use ' +
         'display: contents; if you have grid setting enabled',
-      'autoprefixer: <css input>:135:3: IE does not support align-items ' +
+      'autoprefixer: <css input>:142:3: IE does not support align-items ' +
         'on grid containers. Try using align-self on child elements instead: ' +
         '.warn_ie_align > * { align-self: center }',
-      'autoprefixer: <css input>:140:3: IE does not support justify-items ' +
+      'autoprefixer: <css input>:147:3: IE does not support justify-items ' +
         'on grid containers. Try using justify-self on child elements ' +
         'instead: .warn_ie_justify > * { justify-self: center }',
-      'autoprefixer: <css input>:145:3: IE does not support justify-content ' +
+      'autoprefixer: <css input>:152:3: IE does not support justify-content ' +
         'on grid containers',
-      'autoprefixer: <css input>:150:3: IE does not support place-items ' +
+      'autoprefixer: <css input>:157: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 }',
-      'autoprefixer: <css input>:174:3: grid-auto-flow is not supported by IE',
-      'autoprefixer: <css input>:196:26: Autoprefixer currently does not ' +
+      'autoprefixer: <css input>:181:3: grid-auto-flow is not supported by IE',
+      'autoprefixer: <css input>:203:26: Autoprefixer currently does not ' +
         'support line names. Try using grid-template-areas instead.'
     ])
 

diff --git a/test/cases/grid.css b/test/cases/grid.css
@@ -93,6 +93,13 @@
   align-self: flex-end;
 }
 
+/* should add grid prefixes because a flex container can be a grid item */
+.align-justify-grid-flex {
+  display: flex;
+  justify-self: start;
+  align-self: end;
+}
+
 @supports (display: grid) {
   .foo {
     display: grid;

diff --git a/test/cases/grid.disabled.css b/test/cases/grid.disabled.css
@@ -95,6 +95,15 @@
       align-self: flex-end;
 }
 
+/* should add grid prefixes because a flex container can be a grid item */
+.align-justify-grid-flex {
+  display: -ms-flexbox;
+  display: flex;
+  justify-self: start;
+  -ms-flex-item-align: end;
+      align-self: end;
+}
+
 @supports (display: grid) {
   .foo {
     display: grid;

diff --git a/test/cases/grid.out.css b/test/cases/grid.out.css
@@ -128,6 +128,19 @@
   align-self: flex-end;
 }
 
+/* should add grid prefixes because a flex container can be a grid item */
+.align-justify-grid-flex {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-grid-column-align: start;
+  justify-self: start;
+  -webkit-align-self: end;
+  -ms-flex-item-align: end;
+  -ms-grid-row-align: end;
+  align-self: end;
+}
+
 @supports ((display: -ms-grid) or (display: grid)) {
   .foo {
     display: -ms-grid;