🦕
DenoでReact+Vite+CSS Modules+Happy CSS Modulesで快適に開発したかった話
DenoでReact+Vite+CSS Modules+Happy CSS Modulesで快適に開発したかった話をします。
書いてみたものはいいもの内容がうすすぎたのでメモ程度に思ってほしい。
結論
Happy CSS Moduleで生成した型をDenoは勝手に適用してくれないので求めてる快適さまでには至らなかった。
しかしCSS Moduleを使用して厳密な型を求めない環境(Tailwindなど),場合ならアリなのかも(未検証)
import style from "./componet.module.css";
// ^? CSSModuleClasses
// vite/client を読み込んでいるならCSSModuleClassesまでは
// 解決してくれるがcomponet.module.css.d.tsがあっても読み込んでくれない。
// これなら型を読みこんでくれるがすべてのcssのimportについてくるため不便
// @ts-types="./componet.module.css.d.ts"
import style from "./componet.module.css";
参考: Deno docs - ts_config_migration
どうしてそこまで面倒なことしてDenoでやりたいの
- Runtime
- LSP
- Package manager
- Formatter
- Linter
- Monorepo
- Task Runner
- Testing
- Benchmarking
これらすべてをDenoだけで完結させれます。
モチベーションといえばすべてDenoで完結させたいという浪漫ですが、LinterやFormatter, Testingなどをすべて一つのもので完結できるのは魅力的だと思います。
少し前までのDeno
少し前までのDenoでReactを開発するには以下の理由で不便でした。
- .js,.ts等以外の型の解決を行われなかった。
- Vite上で.svgや.png,.cssなどをimportするとエラーになる。
- https://github.com/denoland/deno/pull/27631
- npmのパッケージを読み込むとき@types/*で型の解決を行わなかった
- reactなども型が読み込まれなかった
- https://github.com/denoland/deno/pull/28185
しかし、いずれも解決されそれもモチベーションの一つになりました。
まとめ
- 特殊なファイル(.module.cssなど)に応じた型の自動生成を用いた開発を行いたならDenoを持ち込むのを辞めるかコメントを書く。
- そうでない開発は@types/*なども読み込んでくれるようになったため、快適かもしれない。
Discussion