diff --git a/lib/processor.js b/lib/processor.js index 11937c0ff..ca7ef03be 100644 --- 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 index 562f2b1c6..3620b62f2 100644 --- a/test/autoprefixer.test.js +++ b/test/autoprefixer.test.js @@ -703,33 +703,33 @@ describe('hacks', () => { 'autoprefixer: :65:3: Can not find grid areas: b', 'autoprefixer: :73:3: Can not find grid areas: c', 'autoprefixer: :81:3: Can not find grid areas: d', - 'autoprefixer: :109:3: grid-column-span is not part ' + + 'autoprefixer: :116:3: grid-column-span is not part ' + 'of final Grid Layout. Use grid-column.', - 'autoprefixer: :110:3: grid-row-span is not part ' + + 'autoprefixer: :117:3: grid-row-span is not part ' + 'of final Grid Layout. Use grid-row.', - 'autoprefixer: :111:3: grid-auto-columns is not ' + + 'autoprefixer: :118:3: grid-auto-columns is not ' + 'supported by IE', - 'autoprefixer: :112:3: grid-auto-rows is not ' + + 'autoprefixer: :119:3: grid-auto-rows is not ' + 'supported by IE', - 'autoprefixer: :114:33: auto-fill value is not ' + + 'autoprefixer: :121:33: auto-fill value is not ' + 'supported by IE', - 'autoprefixer: :115:30: auto-fit value is not ' + + 'autoprefixer: :122:30: auto-fit value is not ' + 'supported by IE', - 'autoprefixer: :131:3: Please do not use ' + + 'autoprefixer: :138:3: Please do not use ' + 'display: contents; if you have grid setting enabled', - 'autoprefixer: :135:3: IE does not support align-items ' + + 'autoprefixer: :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: :140:3: IE does not support justify-items ' + + 'autoprefixer: :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: :145:3: IE does not support justify-content ' + + 'autoprefixer: :152:3: IE does not support justify-content ' + 'on grid containers', - 'autoprefixer: :150:3: IE does not support place-items ' + + 'autoprefixer: :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: :174:3: grid-auto-flow is not supported by IE', - 'autoprefixer: :196:26: Autoprefixer currently does not ' + + 'autoprefixer: :181:3: grid-auto-flow is not supported by IE', + 'autoprefixer: :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 index e035899ab..68ec58175 100644 --- 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 index 86e7e9813..e7071fbcf 100644 --- 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 index 8b3938b84..40d36dc95 100644 --- 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;