私はこれまで、 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
![CSS・TypeScriptの相性が抜群。vanilla-extractが最高のCSS開発体験をくれた](https://cdn-ak-scissors.b.st-hatena.com/image/square/beee03ac415567124bd14c919bc7169f46c40e5e/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--klmD0LPJ--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ACSS%2525E3%252583%2525BBTypeScript%2525E3%252581%2525AE%2525E7%25259B%2525B8%2525E6%252580%2525A7%2525E3%252581%25258C%2525E6%25258A%25259C%2525E7%2525BE%2525A4%2525E3%252580%252582vanilla-extract%2525E3%252581%25258C%2525E6%25259C%252580%2525E9%2525AB%252598%2525E3%252581%2525AECSS%2525E9%252596%25258B%2525E7%252599%2525BA%2525E4%2525BD%252593%2525E9%2525A8%252593%2525E3%252582%252592%2525E3%252581%25258F%2525E3%252582%25258C%2525E3%252581%25259F%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E9%2525B9%2525BF%2525E9%252587%25258E%252520%2525E5%2525A3%2525AE%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2hwRUMxbUtjVjZsX01lT2R6N1Nsejk1SXR4WUZoYjB2LTNOdzNjV3c9czI1MC1j%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)