CSS・TypeScriptの相性が抜群。vanilla-extractが最高のCSS開発体験をくれた

私はこれまで、 React ・ Next.js でのスタイリングには、CSS Modules + Sass を使っていましたが、最近は vanilla-extract を使うようになりました。TypeScript との相性が良く、長い間求めていた CSS 開発体験が実現できるためです。 vanilla-extract とは、CSS を TypeScript で型安全に書ける CSS in JS です。 State of CSS 2022 でも満足度が高く、先日は Next.js の appDir でも正式サポートされました。 本記事では、CSS Modules から vanilla-extract に移行した経緯と、そのメリットについて紹介します。 CSS Modules で限界を感じていた CSS Modules を使っていた理由はいくつかありますが、主に次のようなものです。 従来の C

[tacamula]

styled-components の形式以外で書きたくないくらいアレ好きなんだけどみんなそうでもないんかな。パフォーマンス面でextract必要なのはわかるのでPanda CSSやCompiledには頑張って欲しい。

[uzuki05]

“スコープがあります。”　“ただの TypeScript なので、 IntelliJ IDEA や VSCode といった現代の IDE・エディターと相性が非常によい” “定義した CSS 変数を使うときにも、型補完が効きます”

[ultimatebreak]

地獄のようなネストは論外としても、ネストできないのは好みが分かれそう

[tzmfreedom]

“CSS Modules”

[KoshianX]

へーこれは便利そう。JSわからないデザイナとかにはイミフになっちゃうんだろうけど、それはそれで必要ないことも多いだろうしな

[umai_bow]

良さそう

[mayumayu_nimolove]

デザイナー嫌いのためのモジュールか