やりたいこと
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年後、再調査するかもしれないし、しないかもしれない。