Parcel v2.4.0

1月に、Rustで書かれた超高速な新しいCSSパーサー、コンパイラ、ミニファイアであるParcel CSSを発表しました。それ以来、私たちは改善に尽力し、多くの新機能とさらに優れたパフォーマンスを実現しました。本日、Parcel CSSがParcel v2.4.0のデフォルトのCSSトランスフォーマーおよびミニファイアになったことを発表します！

新機能

#

最初の発表以降、Parcel CSSに追加された主な機能の概要を以下に示します。

これらの機能により、Parcel CSSは、autoprefixer、postcss-preset-env、postcss-modules、cssnanoなど、多くの一般的なPostCSSベースのセットアップの代替として使用できるようになりました。

アップグレード

#

Parcel v2.4.0では、デフォルトのCSSトランスフォーマーおよびミニファイアがParcel CSSを使用するように更新されました。ほとんどのプロジェクトでは、これはシームレスに行われるはずです。ただし、注意すべき点がいくつかあります。

PostCSSは引き続き完全にサポートされているため、現在の構成は問題なく動作するはずです。ただし、ビルドのパフォーマンスを向上させるためにプロジェクトの構成を更新することをお勧めする場合、Parcelに警告を追加しました。

cssnano設定

#

プロジェクトに.cssnanorcなどのcssnano設定ファイルがある場合、デフォルトでは使用されなくなります。プロジェクトのビルド時に、コンソールにこの警告が表示される場合があります。不要になった場合は、この設定ファイルを削除するか、.parcelrcを設定してcssnanoを引き続き使用することができます。ドキュメントを参照してください。

autoprefixerとpostcss-preset-env

#

ほとんどの場合、ParcelはJavaScriptの場合と同様に、ブラウザのターゲットに合わせてCSSのベンダープレフィックスの付与とトランスパイルを自動的に処理するようになりました。必要なのは、package.jsonにbrowserslistフィールドを設定することだけです。残りはParcelが処理します。

Parcelは、ネスティング、カスタムメディアクエリ、疑似クラスポリフィルなどのドラフト構文のコンパイルもオプトインでサポートしています。ParcelのCSSトランスパイル機能の詳細については、新しいドキュメントを参照してください。

以前はautoprefixerとpostcss-preset-envを使用していた場合は、ビルドのパフォーマンスを向上させるために、PostCSS設定からこれらを削除できる場合があります。これらが使用していた唯一のPostCSSプラグインであった場合は、PostCSS設定全体を削除できます。詳細については、ドキュメントをご覧ください。

CSS Modules

#

CSS Modulesは、.module.cssサフィックスで名前が付けられている場合、Parcelによって自動的に処理されます。以前は、これは内部でpostcss-modulesによって実現されていましたが、現在はParcel CSSによって処理されます。

すべてのCSSファイルをCSS Modulesとして処理することもできます。以前は、これはPostCSS設定ファイルのトップレベルのmodulesオプションで行われていました。このオプションは、@parcel/transformer-cssのpackage.jsonの設定キーに移動しました。詳細については、ドキュメントを参照してください。

厳密な構文解析

#

Parcel CSSパーサーは、PostCSSよりも厳密です。セレクタ、atルール、または宣言が無効な場合、エラーが発生します。これは、ブラウザにロードされたときに無視されるコードを誤って出荷することを回避するため、便利です。

Parcel CSSは、依存関係に関しても、より仕様に準拠しています。CSSカスタムプロパティにurl()の依存関係がある場合、相対パスでファイルを参照すると、新しいエラーが表示されることがあります。これは、CSSの仕様では、カスタムプロパティが定義されている場所ではなく、var()が使用されている場所に基づいて解決されるため、あいまいになります。Parcelでは、カスタムプロパティのURLを絶対パスを使用して定義する必要があります。詳細については、ドキュメントを参照してください。

その他の変更

#

Parcel v2.4.0には、JavaScriptのデッドコードの削除を改善するためのSWCのアップグレードや、クラスの静的初期化ブロックのサポートなど、その他のバグ修正と改善も含まれています。改善点の完全なリストについては、変更ログをご覧ください。