viteでPostCSSまわりを開発とビルドで実行を分けたいよ

PostCSS三銃士

・postcss-sort-media-queries（メディアクエリごとにまとめてくれるやつ）
・autoprefixer（ド有名）
・@fullhuman/postcss-purgecss（使っていないCSSを消してくれるやつ）
👆の主に3つを使っているのですが、
それぞれを開発とビルドで実行を切り分けたい。。。という野望が生まれたので、さっそく切り分けていきたいと思います。

やりたいこと

・postcss-sort-media-queriesとautoprefixer 👉 開発・ビルドどちらでもやりたい
・@fullhuman/postcss-purgecss 👉 ビルド時にだけにしたい

さっそくやるわよ

postcss.config.jsちゃんをいじります😋

module.exports = ({ env }) => ({
  plugins: [
    require('autoprefixer')(),
    require('postcss-sort-media-queries')(),
    env != 'development' ? require('@fullhuman/postcss-purgecss')() : null
  ]
});

postcss.configではcontextを受け取れるので、これを使って開発orビルドを見極めます✅ べんり〜

まとめ

同様のことを実現したくてvite.config.jsで出し分けていたりもしたのですが、vite.config.jsの内容でpostcss.config.jsの内容が上書きされちゃう！みたいな失敗🥴をしたりもしました。失敗は成功のもと…🤞日々精進ですね。
それにしてもcontextの件はもっと早く知りたかった〜〜〜〜〜〜〜〜〜〜〜〜〜！！！！！！！！！！！！！！！！！！と思いました。

WEBサイト制作のお問い合わせ、お見積り依頼、ご質問は
こちらのお問い合わせフォームよりお願いいたします

お問い合わせはこちら