Panda CSS - The Origin Story を読む
このscrapboxは、大分省略しているので、あくまで自分の理解用に書いている。
TODO: コンセプトキーワードはScrapbox化して利用するようにしたい。
課題感
課題解決方針は2つ
2. 新規でプロジェクトを作成する
Static Extraction cannot fully replace Dynamic CSS-in-JS
静的抽出は動的 CSS-in-JS を完全に置き換えることはできません
2. Supporting more JS frameworks
作り変える労力を投資する場合、他のJSフレームワークでも機能する方法にしたい。
3. Building bundler plugins can be tedious
バンドラー プラグインの構築は面倒な場合があります
Chakra UIのみの対応の解決方法の場合、Next.js、Babel、Rollup、Webpack、Vite などのバンドラー プラグインを作成する必要があった。
それは大変。
目的は、現在の Chakra UI スタイリング エンジンの最初の概念実証 (PoC) を構築するために、内部で Vanilla Extract をどのように使用できる可能性があるか
Mark 氏は、静的な制限を課す必要がある可能性があるため、DX への期待をより適切に管理するには、これを別のプロジェクトとして構築するのが最善である可能性があると指摘
概念実証の構築
Vanilla Extract で複製するのが非常に難しい領域が分かった。
our component theming systems (コンポーネントのテーマ設定システム)
automatic RTL support (自動 RTL サポート)
マークダウン ファイルを抽出してタイプセーフなドキュメントを作成する方法
マークダウン コンテンツからタイピングと JSON ファイルを自動的に生成
最初のバージョン
次のようなエンジンを構築することを目的
スタイルの使用法とスタイル プロパティを抽出するコンパイラが含まれています
提供された構成から型を生成し、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さんがここで合流
Polishing DX with Chris
私たちは最終的に「関数と JSX」の二重性の概念にたどり着きました。これは、関数 API で実行できることはすべて、JSX でも実行できることを意味します。
例
className={css({ color: 'pink.500' })}
className={stack()
Planning the Launch with Esther
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 テクノロジーの分野に有意義な足跡を残すことです。
感想
良かった。
いつの間にか、どんどん開発が進んで、利用させてもらっていたけど、こんな背景があったのか。。。
課題ベースで、同じ課題感を持つメンバーが集まって取り組んでいるのがいいね。