2016-05-27

postcss-round-float

多くのCSSプリプロセッサーは四則演算機能を持っている。その利用の結果、CSSファイルにはほとんど意味のない桁数の小数が散在することになる。postcss-round-floatパッケージはそういった四捨五入を行うPostCSSプラグインだ。

今のところ定義の値やメディア・クエリーに出てくる小数のみを処理する。デフォルトでは3桁に四捨五入する。つまり、

@media (min-width: 33.33333rem) {
  .foo {
    width: 16.66667rem;
  }
}

は、

@media (min-width: 33.333rem) {
  .foo {
    width: 16.667rem;
  }
}

と、なる。

もちろんCSSプリプロセッサーには小数の四捨五入を行うオプションがある。しかしこういった最適化(の中でも最小化に近い)に属する処理は、CSSファイルの作成に必須ではないと考えられる。ならばCSSプリプロセッサーなどに任せる必要はなく、配信するCSSの最適化プロセスで行えば十分だろう。そうしてやることでいずれ決別するであろうCSSプリプロセッサーへの依存を少し減らせるはずだ。