Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix for issue #1335 justify/align self not prefixing if disply: flex #1336

Merged
merged 2 commits into from
Jul 11, 2020
Merged

Fix for issue #1335 justify/align self not prefixing if disply: flex #1336

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d1a9711
Fix for #1335 - align/justify-self not grid prefixing if display: flex
Jul 11, 2020
5f0f918
Adding test for #1335 fix
Jul 11, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 0 additions & 3 deletions lib/processor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,7 +332,6 @@ class Processor {
}
}
if (
display !== 'flex' &&
this.gridStatus(decl, result) !== false
) {
prefixer = this.prefixes.add['grid-row-align']
Expand All @@ -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']
Expand Down
26 changes: 13 additions & 13 deletions test/autoprefixer.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -702,33 +702,33 @@ describe('hacks', () => {
'autoprefixer: <css input>:55:3: Can not find grid areas: b',
'autoprefixer: <css input>:63:3: Can not find grid areas: c',
'autoprefixer: <css input>:71:3: Can not find grid areas: d',
'autoprefixer: <css input>:99:3: grid-column-span is not part ' +
'autoprefixer: <css input>:106:3: grid-column-span is not part ' +
'of final Grid Layout. Use grid-column.',
'autoprefixer: <css input>:100:3: grid-row-span is not part ' +
'autoprefixer: <css input>:107:3: grid-row-span is not part ' +
'of final Grid Layout. Use grid-row.',
'autoprefixer: <css input>:101:3: grid-auto-columns is not ' +
'autoprefixer: <css input>:108:3: grid-auto-columns is not ' +
'supported by IE',
'autoprefixer: <css input>:102:3: grid-auto-rows is not ' +
'autoprefixer: <css input>:109:3: grid-auto-rows is not ' +
'supported by IE',
'autoprefixer: <css input>:104:33: auto-fill value is not ' +
'autoprefixer: <css input>:111:33: auto-fill value is not ' +
'supported by IE',
'autoprefixer: <css input>:105:30: auto-fit value is not ' +
'autoprefixer: <css input>:112:30: auto-fit value is not ' +
'supported by IE',
'autoprefixer: <css input>:121:3: Please do not use ' +
'autoprefixer: <css input>:128:3: Please do not use ' +
'display: contents; if you have grid setting enabled',
'autoprefixer: <css input>:125:3: IE does not support align-items ' +
'autoprefixer: <css input>: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: <css input>:130:3: IE does not support justify-items ' +
'autoprefixer: <css input>: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: <css input>:135:3: IE does not support justify-content ' +
'autoprefixer: <css input>:142:3: IE does not support justify-content ' +
'on grid containers',
'autoprefixer: <css input>:140:3: IE does not support place-items ' +
'autoprefixer: <css input>: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: <css input>:164:3: grid-auto-flow is not supported by IE',
'autoprefixer: <css input>:186:26: Autoprefixer currently does not ' +
'autoprefixer: <css input>:171:3: grid-auto-flow is not supported by IE',
'autoprefixer: <css input>:193:26: Autoprefixer currently does not ' +
'support line names. Try using grid-template-areas instead.'
])

Expand Down
7 changes: 7 additions & 0 deletions test/cases/grid.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
9 changes: 9 additions & 0 deletions test/cases/grid.disabled.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
13 changes: 13 additions & 0 deletions test/cases/grid.out.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down