grunt-group-css-media-queries でメディアクエリを決まった順序にする
Less をはじめとした CSS プリプロセッサを使えば部品の単位ごとにメディアクエリによる分岐を行えるので便利だ。その一方、CSS ファイルのあちこちに @media (max-width: ...) { ... } という記述ができてしまうため、ややファイルサイズが大きくなる。
そこで group-css-media-queries で同じメディアクエリをまとめることになるのだが、現時点での最新バージョン1.1.0 より前のバージョンでは順序が定まっていない。Grunt 用のタスク grunt-group-css-media-queries ではバージョン 1.0.1 を使うようになっている。
Grunt 自体が見捨てられたのか、それとも別の CSS プリプロセッサではそこまで面倒を見てくれるのか分からないが、最新バージョンを使うようメンテナンスもされていない。
group-css-media-queries 1.1.0 を使う
すでにインストール済みの grunt-group-css-media-queries で group-css-media-queries 1.1.0 を使うよう変更するには、 node_modules/grunt-group-css-media-queries/package.json を編集する。
まず dependencies に書かれたバージョンを次のように変更する。
"dependencies": { "group-css-media-queries": "~1.1.0" },
そして、node_modules/grunt-group-css-media-queries ディレクトリで次のコマンドを実行する。
npm install
応急処置的な方法だがこれで group-css-media-queries 1.1.0 が使用されるようになる。
