PostCSS/Autoprefixer如何抑制IE警告？配置语法求助

迁移项目后，出现了数百条IE警告，把实际错误顶出了视野，严重影响开发。官方提供了两种抑制警告的方案，但不知道怎么正确写到现有的postcss.config.js里，下面是正确的配置方式：

方案一：使用OnceExit钩子 #

你原来配置里的OnceExit: result.messages = []存在语法错误，PostCSS的钩子需要以函数形式定义，正确写法如下：

修改后的完整配置：

module.exports = {
  plugins: {
    OnceExit: (result) => {
      result.messages = [];
    },
    autoprefixer: { grid: true },
    "postcss-import": {},
    "postcss-cssnext": {
      warnForDuplicates: false,
      map: true,
      remove: false,
      browsers: ["> 1%", "IE 11"],
      extensions: {
        "--phone": "(min-width: 544px)",
        "--tablet": "(min-width: 768px)",
        "--desktop": "(min-width: 992px)",
        "--large-desktop": "(min-width: 1200px)"
      }
    },
    "postcss-inherit": {},
    "postcss-assets": {},
    "postcss-nested": {},
    cssnano: {
      reduceIdents: false,
      zindex: false
    },
    "postcss-hexrgba": {},
    "postcss-reporter": {
      clearMessages: true
    }
  },
  sourceMap: true || "inline"
};

方案二：自定义PostCSS清理插件 #

可以直接在postcss.config.js中定义这个自定义插件，再添加到plugins列表：

修改后的完整配置：

const postcss = require('postcss');

// 定义自定义警告清理插件
const warnCleaner = postcss.plugin('postcss-warn-cleaner', () => {
  return (css, result) => {
    result.messages = [];
  };
});

module.exports = {
  plugins: [
    warnCleaner, // 添加自定义插件
    { autoprefixer: { grid: true } },
    { "postcss-import": {} },
    {
      "postcss-cssnext": {
        warnForDuplicates: false,
        map: true,
        remove: false,
        browsers: ["> 1%", "IE 11"],
        extensions: {
          "--phone": "(min-width: 544px)",
          "--tablet": "(min-width: 768px)",
          "--desktop": "(min-width: 992px)",
          "--large-desktop": "(min-width: 1200px)"
        }
      }
    },
    { "postcss-inherit": {} },
    { "postcss-assets": {} },
    { "postcss-nested": {} },
    {
      cssnano: {
        reduceIdents: false,
        zindex: false
      }
    },
    { "postcss-hexrgba": {} },
    {
      "postcss-reporter": {
        clearMessages: true
      }
    }
  ],
  sourceMap: true || "inline"
};

注意：方案二中plugins从对象格式改成了数组格式，这是为了直接引入自定义插件函数，这种格式更灵活。

内容的提问来源于stack exchange，提问作者Jiro Matchonson