PostCSS SortingでCSSの@ルールやプロパティの記述順を整理

PostCSSはいろんな拡張があって煩雑になりやすい印象を受けます。複数人で開発するとプロパティの順番が統一されない可能性が高く見通しが悪くなってしまいます。CSScombでもプロパティを並び替えをおこなえますが、今回はPostCSS独自の拡張機能にも対応したPostCSS Sortingで並び替えできるようにしましたので、紹介します。

PostCSS Sorting

ドキュメント

PostCSS plugin to keep rules and at-rules content in order.
Also available as Sublime Text plugin, Atom plugin, and VS Code plugin.
Lint style sheets order with stylelint-order.

Google翻訳すると、

規則とat-rulesの内容を順番に保持するPostCSSプラグイン。
サブライムテキストプラグイン、Atomプラグイン、VSコードプラグインとしても利用できます。
リントスタイルシートは、スタイルリントオーダーで注文します。

そういうことです。

必要なパッケージ

• postcss
• postcss-cli
• postcss-sorting
• stylelint-order

パッケージのインストール

$ yarn add -D postcss postcss-cli postcss-sorting stylelint-order

設定ファイルの作成

並び替えの順番を記述しておく設定ファイルが必要です。
今回はpostcss-sorting.jsonで作成します。
※設定ファイルはルート直下に格納しないと反応しません。

オプション	内容
order	宣言ブロック内のコンテンツの順序を指定します。
properties-order	宣言ブロック内のプロパティの順序を指定します。 プロパティグループの前に空行を指定できます。
unspecified-properties-position	プロパティーオーダーで指定されていないプロパティーの位置を指定します。

上記の他にプロパティのまとまりごとに空行を入れられます。

記述例

postcss-sorting.json

{
  "order": [
    "at-rules",
    // ...省略...
    {
      "type": "at-rule",
      "name": "util",
      "hasBlock": true
    },
    // ...省略...
    "custom-properties",
    "declarations",
    {
      "type": "at-rule",
      "name": "media",
      "hasBlock": true
    },
    "rules"
  ],
  "properties-order": [
    {
      "properties": [
        "position",
        "z-index",
        "top",
        "right",
        "bottom",
        "left"
      ]
    },
    {
      "properties": [
        "display",
        "visibility",
        "float",
        "clear",
        "overflow",
        "overflow-x",
        "overflow-y",
        "-ms-overflow-x",
        "-ms-overflow-y",
        "clip",
        "zoom",
        "flex-direction",
        "flex-order",
        "flex-pack",
        "flex-align"
      ]
    },
    // ...省略...
  ],
  // ...省略...
  "unspecified-properties-position": "bottom"
  }
}

一から設定するのは辛いし時間がかかりすぎるので、以下を参考にして作成すると良いと思います。
https://github.com/hudochenkov/postcss-sorting/tree/ee71c3b61eea8fa11bc3aa2d26dd99a832df6d54/configs

実際に作成したファイルは以下
https://gist.github.com/buchiya4th/75bacfe828d13c85e13ae182ae48306a

エディタの設定

ドキュメント

Atom、VSCodeはpostcss-sortingパッケージを入れます。

Sublime Textは設定が違うようです。
以下に掲載されているので、そちらをご参照ください。
https://github.com/hudochenkov/sublime-postcss-sorting

実行してみる

これで一通り設定は完了です。
実際に実行するのは以下のショートカットや手順を踏むだけ。

• Atom:Ctrl+Shift+S
• VSCode:F1でコマンドパレットを開きPostCSS Sorting: Runを選択

簡単ですね。

さいごに

@utilや@media等の位置を指定できてスッキリしました。
@util同士の順番指定はむずかしいかもしれませんが、そこは今後よくなっていくことを期待しましょう。
これでオレオレ記述でイラっときて順番書き換え合戦になることもなくなりますね。
コードが汚いと上で記述してたのを見落として下に同じようなことを書いて上書きしてしまう、なんてこともあると思います。
コードが読みやすいと不毛なバグも起こりづらく効率的に開発に集中できると思います。
キレイなコードを保つように心がけていきましょう。