CSSWring v3.0.0とCSS MQPacker v3.0.0のリリース

CSSWringとCSS MQPackerのメジャー・バージョンをそれぞれ更新した。内容としてはPostCSSをv4.0.0に更新しただけと言って良い。PostCSS v3でしか動作しないツールやプラグインと組み合わせたい場合は引き続き古いバージョンを利用する必要がある。

実際には結構簡単に対応はできたのだけど、CSS MQPackerでの空白の取り扱いでどうしようかなという感じだった。具体的に言うと@charsetルールだけのようなbetweenプロパティー(@charsetルールの場合はその値と;の間の空白)のないCSSに普通のルールセットを突っ込むとそのbetweenプロパティー(ルールセットの場合はセレクターと定義群を括る{の間の空白)が消えてしまう問題についてだ。

例えばこのようなCSSをCSS MQPackerで処理すると、想定外の結果になる。

@charset 'UTF-8';

@media (min-width: 1px) {
  .foo {
    display: block;
  }
}

@mediaルールをまとめながら退避させていくと、このCSSは@charsetルールのみになる。そのため改めてまとめた@mediaルールを追加しなおすと、以下のように改行とインデント、セミコロンがPostCSSのデフォルトへと修正された上で、クエリーや.fooと{の間の空白が消えてしまう。

@charset 'UTF-8';
@media (min-width: 1px){
    .foo{
        display: block
    }
}

内部の細かい挙動を理解すれば納得できる結果ではあるが、直観的ではない。betweenプロパティーだけデフォルトのスタイルが定められておらず、ところどころで特別視されていることから、うまくコピーできてしまってこうなるようだ。同じbetweenという名前で違うものを扱おうとしていることが原因なのではないかと想像している。

ちょっと実装として気になるので、このあたりは今後変わりそうではある。もしこのbetweenプロパティーをいじるようなツールやプラグインを作っている場合は注意した方が良さそうだ。