CSS MQPackerにmin-widthを使ったクエリーのみ(なんとなく)ソートしてやる機能を付けている。あまり付けるつもりはなかったけれど、ユーザー層が広がったっぽいこともあり、たまにメールで聞かれたりもしていたので、まぁやるかという感じになった。
色々面倒なのがあるので、多くの人が必要なのはmin-widthだけだろうと決めつけて実装している。その上で以下の条件にマッチするクエリーを後ろに回して、その中でソートするようにした。
min-widthをどこかに含む- 対応している単位である
calc()は使っていない
クエリーはまずカンマで分割されて、その中で更に空白文字で分割し、クエリーをなんとなく多次元配列へ変換する。ここでmin-widthが見つかったら後ろに回すようになっている。対応した単位はpxを基準にch、em、ex、pc、pt、そしてremまでだ。どうやっても描画領域を基準にしたv*単位には対応できない。cmやinは対応しても良いけれどさほど意味はなさそうだ。ソートはpx単位に変換されて行われる。
@media (min-width: 48px) {}
@media (min-width: 2em) {}
@media (min-width: 1rem) {}このように単位系が混在している場合は以下のように良い感じ(私見)にソートされる。それぞれの単位系ごとにソートとしても良いのだけど、それはそれで面倒そうなので一気にソートしてしまうことにした。
@media (min-width: 1rem) {}
@media (min-width: 2em) {}
@media (min-width: 48px) {}1remは16px、2emは32pxとみなされ48pxより前に来るようになるわけだ。
式自体の書き換えはもちろん行わない。calc()にも対応したい気はすごくあるのだけど、フルスクラッチで書くのはなかなか厳しそうだ。reduce-css-calcを使おうかなと考えている。
CSSの書き方自体は普通にメディア・クエリーを書いてくれればなんとかなるはずだ。気をつけるのはなるべく単位を揃えることくらいだろう。気取ってscreenとか書いていても、Retina対応のresolutionが混ざっていたりとかも大丈夫だと思うのだけど、もっと色々テスト書かないと不安だ。
メディア・クエリーは後方互換性を維持して今度更に強化されていく。実装の方も進みつつある上、calc()の存在や憎むべきCSS Variablesも控えているので、やはり一時的なソリューションにしかならないと思う。min-widthだけにしたのもその辺りが理由だ。でもソリューションとして機能しなくなった頃にはHTTP/2やらWeb Componentsやらで大量の細かいCSSファイルを気軽に投げつけられる時代になっているはずなので、きっとメディア・クエリーをまとめなくても良くなっているのではないかとも思う。
notキーワードの扱いをどうしようか悩んでいて、それが解決したらリリースするつもりだ。