Add ignore next warning control comment

README.md

@@ -494,12 +494,14 @@ you can use control comments to disable Autoprefixer.
 }
 ```
 
-There are three types of control comments:
+There are four types of control comments:
 
 - `/* autoprefixer: (on|off) */`: enable/disable all Autoprefixer translations for the
   whole block both _before_ and _after_ the comment.
 - `/* autoprefixer: ignore next */`: disable Autoprefixer only for the next property
   or next rule selector or at-rule parameters (but not rule/at‑rule body).
+- `/* autoprefixer: ignore next warning */`: hide Autoprefixer warnings only for
+  the next property or rule/at-rule (but not its body). Prefixes are still added.
 - `/* autoprefixer grid: (autoplace|no-autoplace|off) */`: control how Autoprefixer handles
   grid translations for the whole block:
   - `autoplace`: enable grid translations with autoplacement support.

lib/processor.js

@@ -5,7 +5,8 @@ let insertAreas = require('./hacks/grid-utils').insertAreas
 
 const OLD_LINEAR = /(^|[^-])linear-gradient\(\s*(top|left|right|bottom)/i
 const OLD_RADIAL = /(^|[^-])radial-gradient\(\s*\d+(\w*|%)\s+\d+(\w*|%)\s*,/i
-const IGNORE_NEXT = /(!\s*)?autoprefixer:\s*ignore\s+next/i
+const IGNORE_NEXT = /(!\s*)?autoprefixer:\s*ignore\s+next(?!\s+warning)/i
+const IGNORE_NEXT_WARNING = /(!\s*)?autoprefixer:\s*ignore\s+next\s+warning/i
 const GRID_REGEX = /(!\s*)?autoprefixer\s*grid:\s*(on|off|(no-)?autoplace)/i
 
 const SIZES = [
@@ -55,6 +56,13 @@ class Processor {
    * Add necessary prefixes
    */
   add(css, result) {
+    // Mark nodes before prefixes are inserted between them and comments
+    css.walkComments(comment => {
+      if (IGNORE_NEXT_WARNING.test(comment.text) && comment.next()) {
+        comment.next()._autoprefixerIgnoreWarning = true
+      }
+    })
+
     // At-rules
     let resolution = this.prefixes.add['@resolution']
     let keyframes = this.prefixes.add['@keyframes']
@@ -366,7 +374,7 @@ class Processor {
     }
 
     // Values
-    return css.walkDecls(decl => {
+    css.walkDecls(decl => {
       if (this.disabledValue(decl, result)) return
 
       let unprefixed = this.prefixes.unprefixed(decl.prop)
@@ -378,6 +386,16 @@ class Processor {
       }
       Value.save(this.prefixes, decl)
     })
+
+    // Remove warnings hidden by ignore next warning control comments
+    result.messages = result.messages.filter(i => {
+      return !(
+        i.type === 'warning' &&
+        i.plugin === 'autoprefixer' &&
+        i.node &&
+        i.node._autoprefixerIgnoreWarning
+      )
+    })
   }
 
   /**

test/autoprefixer.test.js

@@ -447,6 +447,21 @@ test('uses ignore next control comments', () => {
   check('ignore-next')
 })
 
+test('uses ignore next warning control comments', () => {
+  let input = read('ignore-next-warning')
+  let output = read('ignore-next-warning.out')
+  let result = postcss([prefixer('grid')]).process(input)
+
+  equal(result.css, output)
+  equal(
+    result.warnings().map(i => i.toString()),
+    [
+      'autoprefixer: <css input>:33:3: Gradient has outdated direction ' +
+        'syntax. New syntax is like `to left` instead of `right`.'
+    ]
+  )
+})
+
 test('uses block control comments', () => {
   check('disabled')
 })

test/cases/ignore-next-warning.css

@@ -0,0 +1,34 @@
+.grid {
+  grid-gap: 1px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  /* autoprefixer: ignore next warning */
+  grid-template-areas:
+    'left top-void right'
+    'left center right'
+    'left bottom-void right';
+}
+
+.grid-left {
+  grid-area: left;
+}
+
+.grid-center {
+  grid-area: center;
+}
+
+.grid-right {
+  grid-area: right;
+}
+
+.named {
+  grid-template-rows: 1fr;
+  /* autoprefixer: ignore next warning */
+  grid-template-columns: [content] 1fr;
+}
+
+.gradient {
+  /* autoprefixer: ignore next warning */
+  background: linear-gradient(top, white, black);
+  mask: linear-gradient(top, white, black);
+}

test/cases/ignore-next-warning.out.css

@@ -0,0 +1,58 @@
+.grid {
+  grid-gap: 1px;
+  -ms-grid-columns: 1fr 1px 1fr 1px 1fr;
+  grid-template-columns: repeat(3, 1fr);
+  -ms-grid-rows: 1fr 1px 1fr 1px 1fr;
+  grid-template-rows: repeat(3, 1fr);
+  /* autoprefixer: ignore next warning */
+  grid-template-areas:
+    'left top-void right'
+    'left center right'
+    'left bottom-void right';
+}
+
+.grid-left {
+  -ms-grid-row: 1;
+  -ms-grid-row-span: 5;
+  -ms-grid-column: 1;
+  grid-area: left;
+}
+
+.grid-center {
+  -ms-grid-row: 3;
+  -ms-grid-column: 3;
+  grid-area: center;
+}
+
+.grid-right {
+  -ms-grid-row: 1;
+  -ms-grid-row-span: 5;
+  -ms-grid-column: 5;
+  grid-area: right;
+}
+
+.named {
+  -ms-grid-rows: 1fr;
+  grid-template-rows: 1fr;
+  /* autoprefixer: ignore next warning */
+  -ms-grid-columns: [content] 1fr;
+  grid-template-columns: [content] 1fr;
+}
+
+.named > *:nth-child(1) {
+  -ms-grid-row: 1;
+  -ms-grid-column: 1;
+}
+
+.named > *:nth-child(2) {
+  -ms-grid-row: 1;
+  -ms-grid-column: 2;
+}
+
+.gradient {
+  /* autoprefixer: ignore next warning */
+  background: -webkit-linear-gradient(top, white, black);
+  background: linear-gradient(top, white, black);
+  -webkit-mask: -webkit-linear-gradient(top, white, black);
+  mask: linear-gradient(top, white, black);
+}