Change `styled()` types so that it works with libraries like Framer Motion
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 新手友好度
- 35/100
- Issue 类型
- 功能
- 描述清晰度
- 基本清楚
- 活跃度
- 停滞
- 技术栈
- react, typescript
- 领域
- frontend
调研方向
从 packages/react/src/styled.ts 中的 styled() 类型定义开始，尤其关注链接行中的 CSSProperties 要求。将该要求与 issue 中引用的 Framer Motion 样式类型进行比较，并检查 docs/BASICS.md 中如何记录自定义组件。完成的标准是：相关的 TypeScript 与 Framer Motion 用法能够在不弱化预期的自定义属性行为的情况下通过接受。
由索引模型根据 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
- 平均合并
- 1 天 49 分钟
- 30 天内合并 PR
- 14
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
callstack/linaria 的其他 Issue
-
enhancement: proposal 💬 needs: triage 🏷
难度 4/5 3-5 天 新手友好度 45/100
callstack/linaria#1460 · 4 条评论 · 2 个 reaction ·
维护者通常 1 天内回复
-
feature: proposal 💬 needs: triage 🏷
难度 5/5 一周以上 新手友好度 35/100
callstack/linaria#1427 · 3 条评论 · 5 个 reaction ·
维护者通常 1 天内回复
-
cat: modules aliasing 🔗 enhancement: proposal 💬 needs: triage 🏷
难度 3/5 1-2 天 新手友好度 35/100
callstack/linaria#1423 · 6 条评论 · 1 个 reaction ·
维护者通常 1 天内回复
-
bug report 🦗 bundler: webpack 📦 needs: complete repro 🖥️
难度 3/5 1-2 天 新手友好度 35/100
维护者通常 1 天内回复
-
feature: proposal 💬 needs: triage 🏷
难度 5/5 一周以上 新手友好度 25/100
callstack/linaria#1410 · 1 个 reaction ·
维护者通常 1 天内回复
查看 callstack/linaria 的全部 Issue
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 78/100
vercel-labs/durable-harness#53 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 82/100
维护者通常 1 天内回复
-
area/docs area/ui enhancement
难度 1/5 1-3 小时 新手友好度 88/100
melgarafael/DeskcommCRM#4098 ·
维护者通常 1 天内回复
-
bug ready-for-agent
难度 2/5 1-3 小时 新手友好度 86/100
kerti/balances-v2#801 ·
维护者通常 1 天内回复
-
lesson-submission pending-review
难度 1/5 1 小时以内 新手友好度 84/100
Ikalus1988/MisakaNet#4510 ·
维护者通常 1 天内回复