Panda v1 Roadmap読む
Patterns pandaのRoadmap出たので、Panda v1 Roadmap - Segun Adebayoを読む
概要
Roadmapの出来たことと進行中
roadmapどこかになかったけ？
これ。Panda Feedback
ark ui:
Chakra UI: Chakra UI Feedback
今vなんぼ？
@pandacss/dev@0.27.3
Runtime JS Optimization (実行時 JS の最適化) : DONE
Panda によって出力される JS コードは軽量ですが
そうね。ちょっとだけあるから、減らしてほしかったしありがたい。
Integrate LightningCSS(LightningCSS の統合): DONE
内部スタイル生成エンジンをPostCSSからLightningCSSに切り替えました。
LightningCSS最近良く見るようになったな。
PostCSS偶に問題起きて、デバッグしたりするから代替ありがたいな。
flag設定すれば、すぐ利用できるんだ。利用しよう。
Panda Studio :In Progress
Panda Studio は、設計トークンの自動ドキュメントを提供するライブ Astro サーバーです。目標は、Storybook ストーリーを作成することなく、チームがトークンを簡単に視覚化してテストできるようにすることです。
Storybook ストーリーを作成すること、チームがトークンを簡単に視覚化してテスト
これいいな。
細かいDesign TokensってComponent コンポーネント codeで書かないから、Storybookファイルをわざわざ書かないと見えないけどその手間防げるのいいな。
一応使えるんだったら、試してみるか。
同じレポジトリののホスティングどうするんだろう？
Color opacity Modifiers: In Progress
カラー不透明度修飾子は TailwindCSS によって普及し、プリミティブ カラーまたはセマンティック カラーの透明度をすばやく調整する優れた方法です
Color opacity Modifiers カラー不透明度修飾子に書いたけど、便利そう。
Container Queries CSS: In Progress
ほしい。
今でも、'@container (min-width: 300px)': {},でできるけど。
理想はこれ
code: ex.jsx
<nav className={cq({ name: 'sidebar' })}>
<div
className={css({
// When the sidebar container reaches the sm size
// change font size to md
fontSize: { base: 'lg', '@sidebar/sm': 'md' },
})}
/>
わかりやすい。
Config Validation : 途中？構想中？
パンダ構成は、ライブラリの動作をカスタマイズする強力な方法です。ただし、構成を記述するときは間違いを犯しやすいです。
コンパイル プロセスを開始する前に、構成が正しいことを確認するための検証ステップを構成に追加しています。この検証ロジックは以下に適用されます。...
config周り難しいのは分かる。公式Doc検索して見様見真似でやっている。
Token Formatters: In Review
code:ex.js
export default defineConfig({
// red, 300 => $red300 (just like Stitches)
formatTokenName: (path) => $${path.join('')},
// $red300 => red300 (ensure cleaner class names)
formatClassName: (token) => token.replace(/\$/, ''),
});
ちょっと難しそう。まだ、いまいち利用イメージついてない。
Stitchesとかから移行する人はいいらしい？
Debug Log File
あると嬉しそう。
色んな人が使ってると、環境違いよるデバッグはありそう。