Change `styled()` types so that it works with libraries like Framer Motion
まだ誰も着手していません。
評価
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 初心者へのやさしさ
- 35/100
- issue の種類
- 機能追加
- 明瞭さ
- おおむね明確
- 活発さ
- 停滞
- 技術スタック
- react, typescript
- 領域
- frontend
調査の方向性
packages/react/src/styled.ts の styled() の型定義から始め、特にリンク先の行にある CSSProperties の要件を確認してください。その要件を、issue で参照されている Framer Motion のスタイル型と比較し、カスタムコンポーネントが docs/BASICS.md でどのようにドキュメント化されているかを確認してください。Framer Motion を使用した該当する TypeScript の記述が、意図されたカスタムプロパティの動作を弱めることなく受け入れられれば完了です。
索引モデルが issue の本文から書いたものです。
説明
Describe the enhancement
When extending custom components, Linaria's types require that component to have the style prop [link] (kudos for setting that requirement in the type system - really helpful and solid 💪).
This works with usual custom components, but fails to work with e.g. Framer Motion. I believe this is a result of 2 things:
- Linaria requiring the
stylesprop to beCSSProperties[link] (which is fair), - Framer Motion's
styleprop to be an extension ofCSSPropertiesallowing for passing motion values tostyles[link].
Granted, the problem lies probably more on the FM's extension of styles, but I figured it'd be easier for Linaria to relax the styles type requirement, considering that (if I understand correctly) the only purpose that Linaria requires styles is for is setting the custom properties. So the type could be relaxed to a mere Record<string, unknown> maybe?
Motivation
Framer Motion is a great animation library with an api allowing for fantastic components composition/extension with the api that Linaria (and similar css-in-js libs) provide. Would be great if Linaria's types worked with it seamlessly, just like e.g. Styled Components' types do.
- 主要言語
- TypeScript
- スター
- 12.4k
- フォーク
- 413
- 平均マージ
- 3日 4時間
- マージ済み PR（30日）
- 2
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
callstack/linaria のほかの issue
-
enhancement: proposal 💬 needs: triage 🏷
難易度 4/5 3〜5日 初心者へのやさしさ 45/100
-
feature: proposal 💬 needs: triage 🏷
難易度 5/5 1週間以上 初心者へのやさしさ 35/100
-
cat: modules aliasing 🔗 enhancement: proposal 💬 needs: triage 🏷
難易度 3/5 1〜2日 初心者へのやさしさ 35/100
-
bug report 🦗 bundler: webpack 📦 needs: complete repro 🖥️
難易度 3/5 1〜2日 初心者へのやさしさ 35/100
-
feature: proposal 💬 needs: triage 🏷
難易度 5/5 1週間以上 初心者へのやさしさ 25/100
callstack/linaria の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 77/100
apache/rocketmq-dashboard#6610 ·
メンテナーはふだん 3 日以内に返信
-
nextjs-tracking
難易度 2/5 1〜3時間 初心者へのやさしさ 69/100
cloudflare/vinext#3920 ·
メンテナーはふだん 1 日以内に返信
-
Team:Dashboards
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
elastic/kibana#297299 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
analytics beginner friendly community contributions-welcome good first issue hacktoberfest help wanted up-for-grabs
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
メンテナーはふだん 1 日以内に返信
-
affected/v17 affected/v18 area/frontend type/bug
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
umbraco/Umbraco-CMS#24186 ·
メンテナーはふだん 2 日以内に返信