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 #1333 - No warnings when grid is turned off; Also added a subgrid warning #1334

Merged
merged 5 commits into from
Jul 11, 2020
Merged

Fix for #1333 - No warnings when grid is turned off; Also added a subgrid warning #1334

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7986932
Fix #1333 - /* autoprefixer grid: off */ will not output grid warnings
Jul 11, 2020
af115f0
Adding test for #1333 (preventing warnings when grid is turned off)
Jul 11, 2020
543ef3e
Adding "npx" to "gulp play" command in playground CSS comment
Jul 11, 2020
14af8aa
Triggering a warning if "subgrid" is used for any CSS value
Jul 11, 2020
854ed35
Updating tests to include subgrid warning
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
8 changes: 7 additions & 1 deletion lib/processor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,13 @@ class Processor {
{ node: decl }
)
} else {
if (gridPrefixes) {
if (gridPrefixes && this.gridStatus(decl, result)) {
if (decl.value === 'subgrid') {
result.warn(
'IE does not support subgrid',
{ node: decl }
)
}
if (/^(align|justify|place)-items$/.test(prop) && insideGrid(decl)) {
let fixed = prop.replace('-items', '-self')
result.warn(
Expand Down
3 changes: 1 addition & 2 deletions playground/input.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@

/*
This file is purely just for experimentation.
1. Run the command "gulp play"
1. Run the command "npx gulp play"
2. Write some CSS in playground/input.css and save the file
3. View the output CSS in playground/output.css
*/
Expand Down
3 changes: 1 addition & 2 deletions playground/output.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@

/*
This file is purely just for experimentation.
1. Run the command "gulp play"
1. Run the command "npx gulp play"
2. Write some CSS in playground/input.css and save the file
3. View the output CSS in playground/output.css
*/
Expand Down
39 changes: 20 additions & 19 deletions test/autoprefixer.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -690,45 +690,46 @@ describe('hacks', () => {
'without grid-template-columns property',
'autoprefixer: <css input>:36:3: Can not prefix grid-column-end ' +
'(grid-column-start is not found)',
'autoprefixer: <css input>:37:3: IE does not support subgrid',
'autoprefixer: <css input>:39:3: Can not implement grid-gap ' +
'without grid-template-columns',
'autoprefixer: <css input>:39:3: Can not find grid areas: ' +
'head, nav, main, foot',
'autoprefixer: <css input>:47:3: Can not implement grid-gap ' +
'autoprefixer: <css input>:57:3: Can not implement grid-gap ' +
'without grid-template-columns',
'autoprefixer: <css input>:47:3: Can not find grid areas: a',
'autoprefixer: <css input>:55:3: Can not implement grid-gap ' +
'autoprefixer: <css input>:57:3: Can not find grid areas: a',
'autoprefixer: <css input>:65:3: Can not implement grid-gap ' +
'without grid-template-columns',
'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>: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 ' +
'of final Grid Layout. Use grid-column.',
'autoprefixer: <css input>:100:3: grid-row-span is not part ' +
'autoprefixer: <css input>:110: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>:111:3: grid-auto-columns is not ' +
'supported by IE',
'autoprefixer: <css input>:102:3: grid-auto-rows is not ' +
'autoprefixer: <css input>:112:3: grid-auto-rows is not ' +
'supported by IE',
'autoprefixer: <css input>:104:33: auto-fill value is not ' +
'autoprefixer: <css input>:114:33: auto-fill value is not ' +
'supported by IE',
'autoprefixer: <css input>:105:30: auto-fit value is not ' +
'autoprefixer: <css input>:115:30: auto-fit value is not ' +
'supported by IE',
'autoprefixer: <css input>:121:3: Please do not use ' +
'autoprefixer: <css input>:131: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>:135: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>:140: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>:145:3: IE does not support justify-content ' +
'on grid containers',
'autoprefixer: <css input>:140:3: IE does not support place-items ' +
'autoprefixer: <css input>:150: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>:174:3: grid-auto-flow is not supported by IE',
'autoprefixer: <css input>:196:26: Autoprefixer currently does not ' +
'support line names. Try using grid-template-areas instead.'
])

Expand Down
10 changes: 10 additions & 0 deletions test/cases/grid.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,16 @@
"foot ....";
}

.no-warn {
/* autoprefixer grid: off */
grid-column-end: 3;
grid: subgrid;
grid-gap: 1rem;
grid-template-areas: "head head"
"nav main"
"foot ....";
}

.warn-gap-rows {
grid-gap: 1rem;
grid-template-rows: 1fr 1fr;
Expand Down
10 changes: 10 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 @@ -41,6 +41,16 @@
"foot ....";
}

.no-warn {
/* autoprefixer grid: off */
grid-column-end: 3;
grid: subgrid;
grid-gap: 1rem;
grid-template-areas: "head head"
"nav main"
"foot ....";
}

.warn-gap-rows {
grid-gap: 1rem;
grid-template-rows: 1fr 1fr;
Expand Down
10 changes: 10 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 @@ -64,6 +64,16 @@
"foot ....";
}

.no-warn {
/* autoprefixer grid: off */
grid-column-end: 3;
grid: subgrid;
grid-gap: 1rem;
grid-template-areas: "head head"
"nav main"
"foot ....";
}

.warn-gap-rows {
grid-gap: 1rem;
-ms-grid-rows: 1fr 1rem 1fr;
Expand Down