Fix for #1333 - No warnings when grid is turned off; Also added a sub…

…grid 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 <dan503.npm@gmail.com>

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(

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
 */

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
 */

test/autoprefixer.test.js

@@ -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.'
     ])
 

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;

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;

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;