そもそもヘッドレスコンポーネントライブラリとして昨年の2023年10月頃からSnowy UIというものが作りたいというのがあった。
もちろんKuma UIや、VanillaExtractに諸に影響を受けていて、こんなの作れるのか凄い！！と、ウキウキしていたのを覚えている。
しかし動的なランタイムCSSは当時流行ではなく、なにやら静的抽出からのビルド時に静的生成するのが流行みたいだった、そこで、WebのReactにもReact NativeのStyleSheetクラスみたいなのを静的CSSで再現できれば使い勝手がいいんじゃね？、さらにSnowy UIを作るための「パーツ」になればいいんじゃないかというという目論見で10月頃から作り始めていた。
普通のCSS in JSが作りたかった。
その中でも機能としてあった方がいいのは以下のようなものがあった。
ゼロランタイム
静的型付けされたプロパティと値(テンプレートリテラルじゃない)
使いやすい？メディアクエリ機能
Node.jsのバージョンに依存しない
クライアントコンポーネントでも使用できる
最低でも上のゼロランタイムであることとクライアントコンポーネント、Node.jsのバージョンに依存しないのは必須であったが、一人で作るのはかなり難しく、なんとかClaudeやGPT4ominiに頼って作ることができた感じだ。
firemotionのuseAnimationというuseMeltsから派生したフック
当時作っていたfiremotionは、現typedcssxとセットで使ってUIライブラリをサクッと作れるようにするために(作成中)している。
firemotionにはLink遷移のためのアニメーションhookの、useAnimationがあるが、のちにビューポートに入った画像にCSSを充てるhookも追加する予定だ。 ここらへんはアイディアさえあればclassNameから色々アニメーションさせるライブラリとして発展させられそうだ。
これに関してはLinkを直接使うreact-navigate-motionから作っていて、もっと使いやすくしたいからという理由でそこからずっと続いている感じである。
###最初の方の名前決め段階の話し
最初の方にSnowy UIを決めている段階で、useMeltsというフックがあって、それがアニメーションを担っていたのだが、某知り合いと相談して現Typedcssxの名前をMeltExtractにしようと言われていたのだが、MeltExtractだと融解抽出、固体の中から溶けた物質を取り出すプロセスを指すみたいで、どうやら静的抽出の名前から適任ではあったのだが、VanillaExtract(バニラエキス)と完全に似てしまうためさすがに却下してしまった(笑)。
その後 色々の経過を経てシンプルイズベスト、ということでTypedCSSという名前に決まったのだが、npmの関係上typed-cssが既に存在したためtypedcssxとして取得することになった。
###コンパイラーに関して
コンパイラーに関してだが、createなどの関数の中にビルドするための関数を叩いていたのだが、それだとどうしてもクライアントコンポーネントとして扱えるはずもなく、(ビルド関数は'use server'なため) ビルド関数をグローバルに切り出し、プロミスで待機してコンパイラーで関数をつつくときに一気にビルドする、という方法にしたらクライアントコンポーネントでも使えることが出来るようになった。
###Typed CSS Xのこれから
明らかに最後まで作れたのは某氏さんが相談に乗ってくれたり話聞いてくれたりがあったからで、その人との人付き合いは大切にしたいと思っている。
ついに開発?の最後の方にはts-nodeからtsxへ乗り換えNode.js22以上にも対応し、css.tsxとしてtsxファイルに直接記述できるようにもなっている。 そして型推論の速度向上(オートコンプリートの速さ)を図り、使っていてストレスを感じない程度には仕上げられたと思っている。 これからは、現在Next.jsだけでしか扱えないので、ViteプロジェクトやRemixなどとの統合も計っていきたいと思っている、特にAstroの.astroやSvelteでは使えるようになりたい。
まだスターが一つもついてないけど、npmではそこそこ使われているみたいで、Next.js使いのあなたにお勧めしてみたい