Parcel 2.0中如何禁用PostCSS的媒体查询语法转换？

问题根源是Parcel内置的postcss-media-minmax插件会自动将max-width/min-width语法转换为更简洁的<=/>=格式，但iOS Safari 15.x/16.x不支持这种新语法。要禁用这个转换，有两种简单方法：

方法1：创建PostCSS配置文件 #

在项目根目录新建postcss.config.js，写入以下内容：

module.exports = {
  plugins: {
    'postcss-media-minmax': false
  }
};

方法2：在package.json中配置Parcel #

直接在项目的package.json里添加Parcel的自定义配置，覆盖默认插件设置：

{
  "parcel": {
    "postcss": {
      "plugins": {
        "postcss-media-minmax": false
      }
    }
  }
}

验证结果 #

重新执行Parcel构建后，媒体查询会保留你最初的max-width写法：

@media screen and (max-width: 750px) {
  .my-container {
    background-color: #bc8f8f;
  }
}

此时iOS Safari 15.x/16.x就能正常识别该媒体查询规则了。

内容的提问来源于stack exchange，提问作者Bruno M.