手数をかけずに分割されたCSSをまとめてみた

この記事は BABY JOB Advent Calendar 2022 の 21日目の記事です。

🚀 はじめに

この記事では、手数をかけずに分割された CSS をどうやってまとめるかを検討した際に PostCSS のみで実現することができたのでそのときにやったことなどをまとめます。
PostCSS の説明自体は端折らせていただきます。

完了の定義

• まとめられた CSS の中身は、import のリストではなくコードがすべて展開されている
• ミニファイされている
• 開発時に便利なように gulp や Webpack を使ったときのように変更を監視して自動的に処理が走る

前提

• ローカル環境で、Node.js が動く

パッケージをインストールして早速動かしてみる

npm init して package.jsonを作成します。
続いて、postcss-cli をインストールします。

npm install postcss-cli --save-dev

ひとまず、postcss のインストールは完了です。
テスト用のCSSを用意します。

src/app.css

@import "./modules/hoge";
@import "./modules/fuga";

src/modules/hoge.css

body {
    color: red;
    text-align: center;
    background-color: blue;
    margin: 100px;
    padding: 100px;
}

src/modules/fuga.css

body.fuga {
    color: blue;
    text-align: center;
    background-color: blue;
}

こんな構成です。
では早速 PostCSS を走らせてみます。

node_modules/.bin/postcss src/app.css -o out/app.min.css

結果がこちら。

out/app.min.css

@import "./modules/hoge";
@import "./modules/fuga";

これは全然意図したものではありません。
まとめたと言えばそうですが、リクエストがそれぞれ発生するので良くなさそうです。

必要そうなプラグインを入れる

npm install autoprefixer cssnano postcss-import --save-dev

設定ファイルを用意します。

postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')(),
        require('cssnano')({
            preset: 'default',
        }),
        require('postcss-import')()
    ]
}

これで、もう一度 PostCSS を走らせてみます。

node_modules/.bin/postcss src/app.css -o out/app.min.css

結果がこちら。

out/app.min.css

body.hoge{color:blue}body,body.hoge{background-color:blue;text-align:center}body{color:red;margin:100px;padding:100px}

良さげですね。@import ではなくコードがちゃんと展開されています。cssnano によって ミニファイもされてそうです。autoprefixer については未検証で申し訳ないです🙇‍

npm スクリプトにして監視する

"scripts": {
    "css/postcss": "postcss src/app.css -o out/app.min.css",
    "watch": "npm run css/postcss -- --watch"
},

こんなかんじにしました。早速実行してみます。

npm run watch

> postcss-sandbox@1.0.0 watch
> npm run css/postcss -- --watch


> postcss-sandbox@1.0.0 css/postcss
> postcss src/app.css -o out/app.min.css "--watch"

待受状態になってそうです。

hoge.css と fuga.css をそれぞれ編集してみます。

（編集内容は省きます）すると、以下のように更新されました。

out/app.min.css

body.hoge{background-attachment:fixed;background-color:blue;color:blue;text-align:center}header{transition-property:100%}body{background-color:blue;margin:100px;padding:100px;text-align:center}body,footer{color:red}

ログとか何も出ないので動いてるかどうか判断しにくいのですが、ファイルを確認すれば更新されていることがわかります。
これで gulp や Webpack を使ったときのように変更を監視して自動的に処理が走る が実現できました。

最後に

なかなか生の CSS を書く機会は減ってきていると思いますが、弊社内で数々の分割された CSS をまとめるにはどうすべきかという話が出てきた際に今回のような検証を実施しました。

最後までお読みいただきありがとうございました🙇‍