CSS
stylelint
prettier

stylelintのorderモジュール選定

やりたいこと

CSSのプロパティを自動ソート(reorder)したい

reorderするメリット

  • 順番を気にせず書いて楽できる
  • スタイルの無駄な重複を防げる
  • 読みやすくなる
  • gzipサイズが減りやすい

使用ツール

stylelint を使って自動修正する。
大昔は CSScomb を使っていて、少し前は stylefmt を使っていた。
今は stylelint--fix オプションがついて stylefmt が不要になったので、
stylelint --fix をそのまま使う。
なお prettier では reorder を実装するつもりがないので出来ない。
理由についてはこちら。
https://github.com/prettier/prettier/issues/1963

stylelintのorderモジュール選定

stylelint 自体は order plugin があるだけで、実際にどの順番でソートするのか?という点では他のモジュールをextendして使うか、自分で順番を設定する必要がある。
大量にあるCSSプロパティを手作りで順番定義するのは死ねるので、基本的には何かをextendして使うことになる。そこで、軽く調べてすぐに出て来た stylelint-order のリポジトリを調査し、その中から選ぶことにする。

package properties releases contributors Latest commit star
stylelint-config-recess-order 244 7 4 2018/3 19
stylelint-config-property-sort-order-smacss 208 12 3 2018/4 13
@jetbrains/stylelint-config 176 5 4 2018/3 3
stylelint-config-rational-order 204 2 1 2017/12 8
stylelint-config-order-bootstrap 209 1 1 2018/4 1
stylelint-config-idiomatic-order 42 2 3 2017/6 22
stylelint-config-fransvilhelm-order 121 3 1 2017/4 1

この中から、次の2点に着目して選定したい

  • 定義しているpropertiesが多いもの(少ないとsortする意味がない)
  • よくメンテされているもの

properties は多ければ多いほど良いとして、メンテされているかどうかはreleases contributors Latest commit を参考にすればいいだろうか。一応 starも載せておいた。

結論

次の2つのどっちかを使うのが良さそう

そして propertiesの多さで stylelint-config-recess-order を使うことにした。というか1年前から使っていたのだが、今回改めて調査しなおしたら、結局同じものをそのまま使うことになった。また1年後、再調査するかもしれないし、しないかもしれない。