PostCSSのこと分かってなかったのでちゃんと調べてみた

恥ずかしながら**PostCSSって何ですか？と聞かれた時に自分の中に答えがない**と気がついたのでちゃんと調べてみることにしました。

## PostCSSってなに？
JavaScriptプラグインでCSSを変形させるツールだそうです。
CSSファイルを受け取って分析して、プラグインによって変更されたものをCSSにして返す。
ということをしてくれているみたいです。

https://postcss.org/

よく目にする`Autoprefixer`もPostCSSのプラグインです。（知らなかった…）

プラグインによって
- エラーの発見（lint）
- 新しい構文のトランスパイル
- 画像のインライン化
などが可能です。

Twitter、Alibabaなどの企業でも採用されています。

プラグインリストがあるのでこちらから良いものを探して導入してください！

https://github.com/postcss/postcss/blob/main/docs/plugins.md

https://www.postcss.parts/

自社の課題を解決するために独自のプラグインを作るのも手段かもしれません。

https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md

## オススメのプラグイン
PostCSS利用する際に最低限導入したいと思ったプラグインを紹介します。

### CSSを最適化
`cssnano`はファイルサイズを最適化するための脳死で入れます。

### ベンダープレフィックス
`autoprefixer`を入れておけば「Can I Use」のデータをもとにベンダープレフィックスを付与してくれるので異なるブラウザーの対応に頭をめぐらせなくて良くなるはず。

### チェックとフォーマット
人によっていろんな書き方があるのでできれば最低限整えたいし、コードレビューでの指摘は減らしたいので`stylelint`と`stylefmt`とかで体裁を整えておきたい気持ちです。

:::note info
`doiuse`を入れて「Can I Use」のデータをもとにLintしてくれたら、別のブラウザーで崩れてる！ってことがなくてさらに良さそうです！
:::

### 新しいプロパティーを使いたい！
`:is()`とか`has()`使いたい場合は`postcss-preset-env`や`postcss-pseudo-is`を入れるといいかと思います。

### SassのようにCSSを書きたい
Sassのようにネストや変数などを利用するためのプラグインがあります。

- postcss-nested
- postcss-simple-extend
- postcss-sassy-mixins
- postcss-simple-vars

`postcss-nested`はその名の通りネスト記法をアンラップしてCSSに変えてくれます。

`postcss-simple-extend`は@extendでプロパティーを継承できますが、
Sassのように`%hoge`のように定義できません。
`@define-placeholder セレクタ名`で定義することで`%hoge`と同じ扱いになります。
```css
@define-placeholder hoge {
}

.hogehoge {
  @extend hoge;
}
```
`@define-placeholder hoge`はコンパイル後のCSSからは削除されます。

`postcss-sassy-mixins`や`postcss-simple-vars`でmixinや変数を使えるようにできます。

:::note info
変数は`postcss-nested-vars`というプラグインもあります。
ネストされた構造で変数を使いたい場合はこちらを使う？のだと思います。
実際は、mixinで積極的に変数を利用したい場合はこちらを利用するのが良いかもしれません。
:::

## 便利そうだけど導入はしないプラグイン
オススメのプラグインとは反対に導入はしないでおこうと思ったプラグインも紹介しておきます。

- postcss-nested-props
- postcss-utilities
- short
- rucksack
- postcss-debug

### postcss-nested-props
記述を省略できはしますし書き方によってはいい感じ。
一歩間違うと見づらいのでルールを決めないとコード保守がしづらそうだなと感じました。
```css:良いと思った例
.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

// コンパイル後
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold;
}
```

```css:見づらいと感じた例
.funky {
  font: 20px/24px fantasy {
    weight: bold;
  }
}

// コンパイル後
.funky {
  font: 20px/24px fantasy;
  font-weight: bold;
}
```

※コードは下記のREADME.mdより抜粋しました。

https://github.com/jednano/postcss-nested-props#nested-properties

### postcss-utilities & short & rucksack
記述を短縮できるプラグインは便利だと思います。
ただ、複数人かつスキルもバラバラのメンバーで開発する場合CSSの記述ルールに一貫性が持てなくなってしまうlintとかで制御できたらいいかも。

### postcss-debug
視覚的にコードの差分を比較できるけど、ベータ版と書いてあることとGitの違いが理解できませんでした。

https://github.com/andywer/postcss-debug

## もしかしたらコード負債を解消してくれかもプラグイン
調べていて10000行とかあるCSSを何とか自動で何とかしてくれちゃうのかな？
と期待を持った最適化プラグインがあったので個人としても業務で試してみたいです。

## まとめ
PostCSSを知ることで**これまで漠然とどうにかできないかと思っていたCSSの問題が解決できそうな気がしてきて勉強してなかった自分を呪っています…。**

それぐらい可能性を感じますし、使いようによってはコーディングのスピードが格段に上がるとは思います！

:::note warn
ただ、CSSの記述は自由度が高いのでチーム開発では「**予測がしやすい**」「**再利用がしやすい**」「**保守がしやすい**」「**拡張がしやすい**」が重要だと考えています。
:::

ショートハンドでかけるなどの効率を求めることは重要ですが、それよりも**記述に一貫性を失うことの方が問題だと考えています**。
なのでそれを守るためのプラグインを選定できるように引き続きプラグインについては導入時に検討と検証をしたいと思います。

## おまけ
PostCSSのプラグインを調べている中でこんなのあるんだ…という小さな発見もあったので面白かったので共有しておきます。

### postcss-alias
個人として推したい。チーム開発では入れるのをためらうタイプのやつです。

https://github.com/madeleineostoja/postcss-alias

### colorguard
デザインのレギュレーションを無視したら気がつけるようになるので、フロント側でも一貫したデザインを守っていけるようになるのはいいなと思いました。

https://github.com/SlexAxton/css-colorguard

### RTLCSS
CSSをLTR（Left-To-Right）からRTL（Right-To-Left）へ変換するためのフレームワーク。
なにそれ？って感じですが…アラビア語などの右から左に読む言語のサイトを構築する場合に数値の指定や値を反転する必要があります。
RTLCSSプラグインを利用すると**反転したCSSを生成してくれる**ようです。

https://github.com/MohammadYounes/rtlcss