cssoをLightning CSSに置き換えてみる

https://github.com/nemuvski/nacss でCSSのminifyに csso を用いている。
csso のリリースが2年前(2024年3月地点)で動きが止まっており、さらにLightning CSSを使ってみたいので置き換える。

けのび

npm uninstall csso
npm install --save-dev lightningcss

記述時点だと lightningcss@1.24.1 でした。

けのび

ビルド時に、CSSファイルにパッケージ名とバージョンをマークする都合上、Node.jsでバージョン等の明記とminify処理するスクリプトを用意している。

例

/*! nacss v1.0.0 MIT */

けのび

ブラウザのターゲットを選択する場合は browserslist を導入する。

npm install -D browserslist

import browserslist from 'browserslist';
import { transform, browserslistToTargets } from 'lightningcss';

transform({
  targets: browserslistToTargets(browserslist('> 0.2% and not dead')),
});

けのび

ベンダープレフィックスをつけたい場合

import { transform, Features } from 'lightningcss';

transform({
  include: Features.VendorPrefixes,
});

前述したターゲットブラウザの指定に基づいて、必要に応じてベンダープレフィックスはつけてくれるが、それをオーバーライドする形（明示的にincludeでONとした場合）でターゲットブラウザに関係なく、ベンダープレフィックスをつけてくれる。

今回はこれは指定しない。

けのび

変更コミット。

このスクラップは2024/03/26にクローズされました