From d1a9711563eb5a8dd20b58c10faf42dceaf2a1c8 Mon Sep 17 00:00:00 2001 From: Daniel Tonon Date: Sat, 11 Jul 2020 13:42:00 +1000 Subject: [PATCH 1/2] Fix for #1335 - align/justify-self not grid prefixing if display: flex --- lib/processor.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/lib/processor.js b/lib/processor.js index 746ca6652..6280b5d4b 100644 --- a/lib/processor.js +++ b/lib/processor.js @@ -332,7 +332,6 @@ class Processor { } } if ( - display !== 'flex' && this.gridStatus(decl, result) !== false ) { prefixer = this.prefixes.add['grid-row-align'] @@ -342,9 +341,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'] From 5f0f91800e091f40682fed9dd2e606946d06d93c Mon Sep 17 00:00:00 2001 From: Daniel Tonon Date: Sat, 11 Jul 2020 14:17:07 +1000 Subject: [PATCH 2/2] Adding test for #1335 fix --- test/autoprefixer.test.js | 26 +++++++++++++------------- test/cases/grid.css | 7 +++++++ test/cases/grid.disabled.css | 9 +++++++++ test/cases/grid.out.css | 13 +++++++++++++ 4 files changed, 42 insertions(+), 13 deletions(-) diff --git a/test/autoprefixer.test.js b/test/autoprefixer.test.js index 0af5036ba..87172fc0a 100644 --- a/test/autoprefixer.test.js +++ b/test/autoprefixer.test.js @@ -702,33 +702,33 @@ describe('hacks', () => { 'autoprefixer: :55:3: Can not find grid areas: b', 'autoprefixer: :63:3: Can not find grid areas: c', 'autoprefixer: :71:3: Can not find grid areas: d', - 'autoprefixer: :99:3: grid-column-span is not part ' + + 'autoprefixer: :106:3: grid-column-span is not part ' + 'of final Grid Layout. Use grid-column.', - 'autoprefixer: :100:3: grid-row-span is not part ' + + 'autoprefixer: :107:3: grid-row-span is not part ' + 'of final Grid Layout. Use grid-row.', - 'autoprefixer: :101:3: grid-auto-columns is not ' + + 'autoprefixer: :108:3: grid-auto-columns is not ' + 'supported by IE', - 'autoprefixer: :102:3: grid-auto-rows is not ' + + 'autoprefixer: :109:3: grid-auto-rows is not ' + 'supported by IE', - 'autoprefixer: :104:33: auto-fill value is not ' + + 'autoprefixer: :111:33: auto-fill value is not ' + 'supported by IE', - 'autoprefixer: :105:30: auto-fit value is not ' + + 'autoprefixer: :112:30: auto-fit value is not ' + 'supported by IE', - 'autoprefixer: :121:3: Please do not use ' + + 'autoprefixer: :128:3: Please do not use ' + 'display: contents; if you have grid setting enabled', - 'autoprefixer: :125:3: IE does not support align-items ' + + 'autoprefixer: :132: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: :130:3: IE does not support justify-items ' + + 'autoprefixer: :137: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: :135:3: IE does not support justify-content ' + + 'autoprefixer: :142:3: IE does not support justify-content ' + 'on grid containers', - 'autoprefixer: :140:3: IE does not support place-items ' + + 'autoprefixer: :147: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: :164:3: grid-auto-flow is not supported by IE', - 'autoprefixer: :186:26: Autoprefixer currently does not ' + + 'autoprefixer: :171:3: grid-auto-flow is not supported by IE', + 'autoprefixer: :193: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 5b6cba86e..7840a15b7 100644 --- a/test/cases/grid.css +++ b/test/cases/grid.css @@ -83,6 +83,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 ef50755e2..2561ac0c7 100644 --- a/test/cases/grid.disabled.css +++ b/test/cases/grid.disabled.css @@ -85,6 +85,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 7d582845e..d6d88c886 100644 --- a/test/cases/grid.out.css +++ b/test/cases/grid.out.css @@ -118,6 +118,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;