Parcel版本升级导致Sass/CSS编译输出异常问题求助

问题现象 #

Parcel从v2.4.0升级到v2.10.0后，编译Sass生成CSS时出现以下问题：

• 部分CSS属性顺序被打乱，导致依赖属性覆盖顺序的样式失效。比如原生产环境（v2.4.0）编译的代码：

.c-hero .u-wrap:before {
    content: "";
    height: 18px;
    height: var(--gutter);
    width: 100vw;
    bottom: 0;
    right: 18px;
    right: var(--gutter);
    z-index: 2;
    background: #fff;
}

升级到v2.10.0后编译结果变成：

.c-hero .u-wrap:before {
    content: "";
    height: var(--gutter);
    bottom: 0;
    right: 18px;
    right: var(--gutter);
    z-index: 2;
    background: #fff;
    width: 100vw;
    height: 18px;
}

这里height: 18px被移到了height: var(--gutter)之后，导致变量值被固定值覆盖，样式失效，且该问题为选择性出现。

• 媒体查询格式从旧版(min-width: 50em)被改写为新版(width >= 50em)。

已尝试的无效方案 #

• 多次降级Parcel、Node、NPM版本
• 删除node_modules并重新安装依赖
• 在package.json中添加browserslist配置

解决思路及方案 #

1. 禁用Parcel的CSS属性排序优化 #

Parcel 2.10.0可能更换了内部CSS处理器（比如改用Lightning CSS），其默认的属性排序逻辑导致了顺序错乱。可以通过配置禁用排序：
修改项目根目录下的.parcelrc文件（如果没有则新建）：

{
  "transformers": {
    "*.scss": ["@parcel/transformer-sass", "@parcel/transformer-css", { "lightningcss": { "noSort": true } }],
    "*.css": ["@parcel/transformer-css", { "lightningcss": { "noSort": true } }]
  }
}

2. 重构Sass代码，避免依赖属性顺序 #

依赖属性书写顺序来实现覆盖本身不够健壮，建议重构代码：

• 改用CSS变量的默认值语法：height: var(--gutter, 18px)，这样无论属性顺序如何，都能保证变量存在时用变量值，不存在时用固定值。
• 或者使用更具体的选择器提升优先级，避免依赖属性顺序覆盖。

3. 修复媒体查询格式兼容问题 #

如果需要兼容不支持CSS Media Queries Level 4语法的旧浏览器，可通过以下方式处理：

• 完善browserslist配置，在package.json中添加：

"browserslist": [
  "last 2 versions",
  "not dead",
  "ie >= 11"
]

• 或者在.parcelrc中指定Lightning CSS的目标浏览器版本，自动转换媒体查询语法：

{
  "transformers": {
    "*.css": ["@parcel/transformer-css", {
      "lightningcss": {
        "targets": {
          "chrome": 60,
          "firefox": 55,
          "safari": 12,
          "edge": 79
        }
      }
    }]
  }
}

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