Repository: postcss/autoprefixer (js)

Issue:
Autoprefixer processing comment to locally turn off grid polyfill continues to report IE related warnings
Given the following snippit of CSS

```css
.usps > ul {
  display : flex; 
  // ...
}

@supports(grid-template-columns: repeat(auto-fit, minmax(200px, max-content))) {
  .usps > ul {
    /* autoprefixer grid: off */
    display               : grid;
    grid-gap              : 20px 10px;
    grid-template-columns : repeat(auto-fit, minmax(200px, max-content));
    justify-content       : center;
  }
}
```

Even though it is using the `/* autoprefixer grid: off */` processing comment, this particular block continues to raise a warning that " `IE does not support justify-content on grid containers` ." when conditionally applying grid styling.

Elevating the processing comment to the scope of the `@supports` block itself yields the same result. It continues to report warnings related to IE's grid implementation. Only using `/* autoprefixer: off */` in these places works as expected.

While that suffices in the current situation for my problem, it is highly non-desired that the entirety of Autoprefixer has to be turned off. This would start causing problems once these rules end up containing properties which _do_ need prefixing, requiring that e.g. an artificially split CSS rule be maintained where autoprefixer can still be turned off.

**Autoprefixer version** : 9.8.4

Pull request:
Fix for #1333 - No warnings when grid is turned off; Also added a subgrid warning
- Fixes #1333 - It no longer triggers grid warnings if `/* autoprefixer grid: off */` is used
- It will now warn that subgrid is not supported in IE if someone tries to use `subgrid` as a value in a declaration
- I added "npx" to the front of the "gulp play" command in the playground css comment to prevent people getting confused if they don't have gulp installed globally.

Patch:
diff --git a/lib/processor.js b/lib/processor.js
index 746ca66..11937c0 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 f5d0749..baf69e8 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 e73c195..c9660f9 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
 */


Test patch:
diff --git a/test/autoprefixer.test.js b/test/autoprefixer.test.js
index 0af5036..562f2b1 100644
--- a/test/autoprefixer.test.js
+++ b/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.'
     ])
 
diff --git a/test/cases/grid.css b/test/cases/grid.css
index 5b6cba8..e035899 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 ef50755..86e7e98 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 7d58284..8b3938b 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;