diff --git a/lib/processor.js b/lib/processor.js index 746ca6652..11937c0ff 100644 --- a/lib/processor.js +++ b/lib/processor.js @@ -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( diff --git a/playground/input.css b/playground/input.css index f5d074978..baf69e8d7 100644 --- a/playground/input.css +++ b/playground/input.css @@ -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 */ diff --git a/playground/output.css b/playground/output.css index e73c19514..c9660f946 100644 --- a/playground/output.css +++ b/playground/output.css @@ -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 */ diff --git a/test/autoprefixer.test.js b/test/autoprefixer.test.js index 0af5036ba..562f2b1c6 100644 --- a/test/autoprefixer.test.js +++ b/test/autoprefixer.test.js @@ -690,45 +690,46 @@ describe('hacks', () => { 'without grid-template-columns property', 'autoprefixer: :36:3: Can not prefix grid-column-end ' + '(grid-column-start is not found)', + 'autoprefixer: :37:3: IE does not support subgrid', 'autoprefixer: :39:3: Can not implement grid-gap ' + 'without grid-template-columns', 'autoprefixer: :39:3: Can not find grid areas: ' + 'head, nav, main, foot', - 'autoprefixer: :47:3: Can not implement grid-gap ' + + 'autoprefixer: :57:3: Can not implement grid-gap ' + 'without grid-template-columns', - 'autoprefixer: :47:3: Can not find grid areas: a', - 'autoprefixer: :55:3: Can not implement grid-gap ' + + 'autoprefixer: :57:3: Can not find grid areas: a', + 'autoprefixer: :65:3: Can not implement grid-gap ' + 'without grid-template-columns', - '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: :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 ' + 'of final Grid Layout. Use grid-column.', - 'autoprefixer: :100:3: grid-row-span is not part ' + + 'autoprefixer: :110:3: grid-row-span is not part ' + 'of final Grid Layout. Use grid-row.', - 'autoprefixer: :101:3: grid-auto-columns is not ' + + 'autoprefixer: :111:3: grid-auto-columns is not ' + 'supported by IE', - 'autoprefixer: :102:3: grid-auto-rows is not ' + + 'autoprefixer: :112:3: grid-auto-rows is not ' + 'supported by IE', - 'autoprefixer: :104:33: auto-fill value is not ' + + 'autoprefixer: :114:33: auto-fill value is not ' + 'supported by IE', - 'autoprefixer: :105:30: auto-fit value is not ' + + 'autoprefixer: :115:30: auto-fit value is not ' + 'supported by IE', - 'autoprefixer: :121:3: Please do not use ' + + 'autoprefixer: :131:3: Please do not use ' + 'display: contents; if you have grid setting enabled', - 'autoprefixer: :125:3: IE does not support align-items ' + + 'autoprefixer: :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: :130:3: IE does not support justify-items ' + + 'autoprefixer: :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: :135:3: IE does not support justify-content ' + + 'autoprefixer: :145:3: IE does not support justify-content ' + 'on grid containers', - 'autoprefixer: :140:3: IE does not support place-items ' + + 'autoprefixer: :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: :164:3: grid-auto-flow is not supported by IE', - 'autoprefixer: :186:26: Autoprefixer currently does not ' + + 'autoprefixer: :174:3: grid-auto-flow is not supported by IE', + 'autoprefixer: :196: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..e035899ab 100644 --- a/test/cases/grid.css +++ b/test/cases/grid.css @@ -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; diff --git a/test/cases/grid.disabled.css b/test/cases/grid.disabled.css index ef50755e2..86e7e9813 100644 --- a/test/cases/grid.disabled.css +++ b/test/cases/grid.disabled.css @@ -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; diff --git a/test/cases/grid.out.css b/test/cases/grid.out.css index 7d582845e..8b3938b84 100644 --- a/test/cases/grid.out.css +++ b/test/cases/grid.out.css @@ -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;