postCSSで @layer, @supports, @container もマージできる神パッケージを見つけたのでmqpackerから乗り換えてみた

これまでずっと css-mqpacker でメディアクエリのマージをしてたんですが、コンテナクエリを使っているプロジェクトで意味をなしていないことに気づき、@container@layer もいい感じにマージしてくれる新しいパッケージがないか探してみました。

そこで見つけたのが postcss-merge-at-rules というパッケージ。

発見時点でWeekly Downloadsが 0 だったのでちょっと使い続けれるかは不安ですが、使ってみると現状自分の環境では期待通りに動いてくれました。

postcss-merge-at-rules で @container もマージする方法

デフォルトでは、@media, @layer, @supports をマージしてくれるみたいです。

コンテナクエリ(@container)をマージしてもらうには、追加でオプションのセットが必要でした。

const mergeAtRules = require('postcss-merge-at-rules');

// ...
    // postcssの実行部分
    postcss([
		    mergeAtRules({
            atRulePattern: /(media|layer|supports|container)/im,
            nest: true,
        }),
        autoprefixer,
        cssnano,
    ])
// ...

css-mqpacker のまま @containerをマージする方法

css.walkAtRules("media", ...というコード(index.jsにある)で @media に対して処理をしているっぽいので、この"media""container"に変えてもコンテナクエリのマージが可能でした。

正規表現でもいいので、メディアクエリもまだ使っているなら/media|container/としてもいいと思います。

ただ、css-mqpacker 自体もうメンテ止まってて非推奨