Closed6
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とした場合）でターゲットブラウザに関係なく、ベンダープレフィックスをつけてくれる。
今回はこれは指定しない。
けのび変更コミット。
このスクラップは1ヶ月前にクローズされました