Panda CSS - The Origin Story を読む
Panda CSSのの公式記事 https://www.adebayosegun.com/blog/panda-css-the-origin-story　を読む
このscrapboxは、大分省略しているので、あくまで自分の理解用に書いている。
TODO: コンセプトキーワードはScrapbox化して利用するようにしたい。
課題感
Chakra UIにおけるWebPlatformApp Performanceの課題があった。
課題解決方針は２つ
1. Chakra UIを直接update
2. 新規でプロジェクトを作成する
Chakra UIのみしか解決しない、1. Chakra UIを直接updateは、以下の理由から説得力を感じなかった。
1. Static Extraction 静的抽出 cannot fully replace Dynamic CSS-in-JS
Static Extraction cannot fully replace Dynamic CSS-in-JS
静的抽出は動的 CSS-in-JS を完全に置き換えることはできません
置き換える場合、Chakra UIを破壊的変更することになるので、既存chakra uiユーザーが苦しむ。
2. Supporting more JS frameworks
chakra uiは、Reactのみ対応していた。
作り変える労力を投資する場合、他のJSフレームワークでも機能する方法にしたい。
inspiration vite
3. Building bundler plugins can be tedious
バンドラー プラグインの構築は面倒な場合があります
Chakra UIのみの対応の解決方法の場合、Next.js、Babel、Rollup、Webpack、Vite などのバンドラー プラグインを作成する必要があった。
それは大変。
1か２かは、決定する前に、linariaやvanilla-extractなどの既存ソリューリョンを検討
特にvanilla-extractのやり方を気に入り、作者と話す。
目的は、現在の Chakra UI スタイリング エンジンの最初の概念実証 (PoC) を構築するために、内部で Vanilla Extract をどのように使用できる可能性があるか
Mark 氏は、静的な制限を課す必要がある可能性があるため、DX への期待をより適切に管理するには、これを別のプロジェクトとして構築するのが最善である可能性があると指摘
概念実証の構築
vanilla-extractベースで検証してみて、
Vanilla Extract で複製するのが非常に難しい領域が分かった。
our component theming systems (コンポーネントのテーマ設定システム)
automatic RTL support (自動 RTL サポート)
RTL right-to-left supportとは？: 右読みの言語をサポート
contentlayerからinspiration
マークダウン ファイルを抽出してタイプセーフなドキュメントを作成する方法
マークダウン コンテンツからタイピングと JSON ファイルを自動的に生成
最終的に、Chakra UI のアイデアと Contentlayer、vanilla-extract、Stitchesのパターンを統合
最初のバージョン
次のようなエンジンを構築することを目的
スタイルの使用法とスタイル プロパティを抽出するコンパイラが含まれています
提供された構成から型を生成し、TypeScript 推論の必要性を減らします。
スタイリング エンジンの柔軟な構成が可能
パフォーマンスを向上させ、スタイルの重複を排除するためにアトミック CSS を出力します。
次に、システムの構成ファイルの初稿を作成
目標
デザイントークンのカスタマイズ
カスタム CSS プロパティの作成
生成されたクラスとスタイルの制御
チームと話して次のconceptに
1. Utilities
Configurable custom properties to style elements, such as mt and pt, and their generated styles.
2. Conditions
Configurable css selectors and media queries, like _hover, _active and more.
3. Recipes
Authoring style variations for a component
4. Layout Patterns
Primitives for managing layouts like stack, hstack, vstack.
チームの構築
プロジェクトの持続可能性と成長を確実にするために、Panda CSS を中心としたチームを構築する必要があることがわかりました。プロジェクトに情熱を持ち、プロジェクトの成長に貢献できるチームを作りたいと考えていました。
感想: 大事。ありがたい。
Improving the Compiler with Alex
よく改修してくれているAlexさんがここで合流
近しい課題感を持っていて、vanilla-extract関連の改善Projectをやっていて、考えも近かったので連絡。
Polishing DX with Chris
最近だとark ui、park uiを作っているChrisさんがここで合流
私たちは最終的に「関数と JSX」の二重性の概念にたどり着きました。これは、関数 API で実行できることはすべて、JSX でも実行できることを意味します。
例
className={css({ color: 'pink.500' })}
className={stack()
Planning the Launch with Esther
Panda CSSのチュートリアル動画など上げてくれている方
Managing the release with Abraham
いつもリリースのお知らせなど上げてくれている方
Choosing the name "Panda"
I typically name projects based on cartoons, quotes or books I enjoy.
Chakra: based on my favorite anime, Naruto
Zag: based on my favorite quote "when everyone zigs, you zag."
ある夜、私は人気のあるカンフー・パンダのアニメを見ました。とても楽しかったです。 「パンダ」に関連するドメインを検索したところ、「パンダ CSS」に行き着きました。
Conclusion
チームがデザイン システムまたは SaaS 製品の構築を検討している場合は、Panda CSS を使用することをお勧めします。私たちは、設計システムを構築するための信頼性の高い堅牢なツールにするために多大な努力を払ってきました。
Panda CSS の進歩に本当に満足しています。それは学習、コラボレーション、成長の旅でした。オープンソース プロジェクトを構築する私の主な動機は、有意義な問題を解決することで Web テクノロジーの分野に有意義な足跡を残すことです。
感想
良かった。
いつの間にか、どんどん開発が進んで、利用させてもらっていたけど、こんな背景があったのか。。。
課題ベースで、同じ課題感を持つメンバーが集まって取り組んでいるのがいいね。
安直にChakra UIを作り直しているわけでなく、段階的に検証しているのがいいね。