vanilla-extract 使ってみた
ファーストインプレッション。どちらかというとcss-modulesのts版という感じ。描画フレームワークに依存しないコンセプトはとても好き。だけど、他とトレードオフになるようなアドバンテージにはなってないかなという印象。まだぜんぜん触ってないのでもうちょっと感想が変わりそう。
よい点:
modularity
描画フレームワークに依存しない
ドキュメントのサンプルでは生でDOM manipulationしてる
これはとても良い
シンプルで壊れにくいデザインは好き
理解しやすさにもつながる
コンパイラでpreprocessするのが嫌な人もいるかもしれないけれど、そこまでいらんことしてないよ
ゴリゴリjsのASTを見に行ったりしてない
責務がシンプル
type safe
tsをDSLのベースとして使っているというだけなので、変数とか関数分離とかいつもどおり書ける
no runtime
はやい(TODO: どのくらい?)
でもそこまでアドバンテージにはならなそう
SSR friendly
css variablesを利用してテーマの管理をするので、hydration mismatchが起きない
チラツキについては問題あり
もしReactと一緒に使う場合は評価タイミングが最初のrenderになるので遅すぎる
同期のscriptタグで評価しないとどうやっても間に合わないので小細工する必要あり(DOMContentLoadedでも最初のpaintには間に合わない)
微妙な点:
クラス名のネーミングが面倒
これは微妙な点というか哲学の違いなので、しょうがない
styled-componentsのcss propやtailwindなどを使ってるとネーミングしないくせがついてくるので、ネーミングを強要されると面倒だなと思いやすくなっているかも
古来のcss的には普通なんだけれど、もうインラインで書きたくなってしかたがない
cssをショートハンドばっかりでスタイリングしている人的にはあまり型の恩恵が薄い
ショートハンドの場合は型が弱い
cssとは長い付き合いなので、必然的にショートハンドばっかり書いてしまう
display: grid; grid: auto / auto-flow 1fr; とか手癖になってるような人間の感覚
もちろんちゃんと略さずに書いたほうがわかりやすいとも思うけれど、ショートハンドのほうがシンプルで良いというケースもあると思う。これもポリシーの問題なのでしょうがない。
ただショートハンドも普通に使えちゃう。型で縛って使えなくしたほうがガチガチに厳しくしたい人的には良いのかも。
(もしかしたらtemplate literal typesでcsstypeをもうちょっとリッチにできたりするのかなとか思ってる)
cssのエコシステムが使えない
これはcss-in-jsあるあるなので、しょうがない。よくある話なので挙げておいた
たとえばvscodeでcssのエディタ支援使ってる人の場合はそれらが使えなくなっちゃう
emmetとかstylelintとか
styled-componentsの場合は、気合でtsをパースしてstylelint使えるようにしたり、typescript-pluginにして補完を頑張ったりとかあったりしたが、そこまでまだエコシステムは成長していないので難しい。
(ただ個人的には結局無理矢理感は否めないのでどのみち好きじゃない)