From 0343bdc058f0bf99166c9c9183d1b89ef435055c Mon Sep 17 00:00:00 2001 From: Daniel Tonon Date: Sat, 11 Jul 2020 15:18:49 +1000 Subject: [PATCH] Fix for #1333 - No warnings when grid is turned off; Also added a subgrid warning (#1334) * Fix #1333 - /* autoprefixer grid: off */ will not output grid warnings * Adding test for #1333 (preventing warnings when grid is turned off) * Adding "npx" to "gulp play" command in playground CSS comment Not everyone has Gulp installed globally. This prevents people who don't have Gulp installed globally getting confused why "gulp play" doesn't work. * Triggering a warning if "subgrid" is used for any CSS value IE does not support subgrid and Autoprefixer can't polyfill subgrid either. * Updating tests to include subgrid warning Co-authored-by: Daniel Tonon --- lib/processor.js | 8 +++++++- playground/input.css | 3 +-- playground/output.css | 3 +-- test/autoprefixer.test.js | 39 ++++++++++++++++++------------------ test/cases/grid.css | 10 +++++++++ test/cases/grid.disabled.css | 10 +++++++++ test/cases/grid.out.css | 10 +++++++++ 7 files changed, 59 insertions(+), 24 deletions(-) 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;