これまでずっと 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 自体もうメンテ止まってて非推奨