Parcel がメディア クエリを誤って書き換える

Question

現在 Parcel 2.8.3 と @parcel/transformer-sass 2.8.3 を使用していますが、メディア クエリの書き換え方法にいくつか問題があります。 Parcel を使用した以前のプロジェクトでは、そのような問題は発生せず、すべてが順調でした。

これは SASS ファイルです:

h1 {
  赤色;
}

@media のみの画面と (最大幅: 40em) {
  h1 {
    青色;
  }
}

これは CSS 出力です:

h1 {
  赤色;
}

@media のみの画面と (幅 <= 40em) {
  h1 {
    色: #00f;
  }
}

ご覧のとおり、CSS ファイル内のメディア クエリは max-width から width <= 40em に変更されていますが、実際の携帯電話で表示すると機能しません。

1 か月前のプロジェクトからコピーした package-lock.json と package.json を使用すると、メディア クエリが正常に書き換えられます。上に示したように、新しいプロジェクトに対して npm i Parcel & npm i @parcel/transformer-sass を実行すると、プロジェクトを起動すると、すべてのメディア クエリが、表示されている 2 番目のコード ブロックのように変更されます。何かご提案があれば幸いです。

Answer 1

ブラウザのリストを拡張する解決策を見つけました。以下を package.json に追加します:

リーリー

これにより、サポートされるブラウザが拡張され、上書きされず、古い Safari で処理できることが保証されます。