mediaquery not working in defineVars on real devices
还没有人认领这个 Issue。
评估
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 新手友好度
- 32/100
- Issue 类型
- 缺陷
- 描述清晰度
- 基本清楚
- 活跃度
- 停滞
- 技术栈
- javascript, react-native
- 领域
- mobile-dev
调研方向
先从 tokens.stylex.ts 和 header.ts 示例开始，然后检查原生输出中与尺寸相关的媒体查询所经过的 css.defineVars 路径。在使用 RN 0.78 和 RSD 0.0.34 的真实 Android 或 iOS 设备上复现，并与模拟器和配色方案的情况进行比较。当默认 token 值在真实设备上生效，同时尺寸媒体查询仍受支持时，即表示完成。
由索引模型根据 Issue 内容生成。
描述
Describe the issue
Bit of a long shot and not sure how to easily reproduce (let me know if I can use some predefined "snack" or codeSandbox to reproduce, but would be tricky as it needs to be checked specifically on a real device). But basically I encountered this strange behavior:
when a css.defineVars variable is defined using screen size media queries, its value works correctly on emulators, but not on real devices where it is completely ignored (style is not passed at all).
Everything works fine on emulator and on web css output.
Expected behavior
the default value of the token should be used on a real mobile device
Steps to reproduce
RN version 0.78
RSD: 0.0.34
(not using expo, but own App bundled with metro and babel/postss config as per documentation)
Issue seems consistent on both Android and iOS devices
Something like:
// tokens.stylex.ts
export const tokens = css.defineVars({
myFontSize: { default: "1rem", "@media (min-width: 1024px)": "2rem" }
});
//header.ts
import { tokens } from "./tokens.stylex";
export const Header = () => <h.span style={styles.base}>Header</h.span>;
const styles = css.create({
base: { fontSize: tokens.myFontSize }
});
Test case
No response
Additional comments
if I use a an unrelated color scheme mediaquery:
// tokens.stylex.ts
export const tokens = css.defineVars({
myFontSize: { default: "1rem", "@media (prefers-color-scheme: dark)": "2rem" }
});
everything seems to work correctly, so maybe the issue seems limited to the parsing or application of size related media queries
The issue seems specific to css.defineVars on the stylex file, it works as expected with styles made using css.create
- 主要语言
- JavaScript
- 星标
- 3.6k
- 派生
- 208
- PR 合并指标
- 30 天内没有已合并 PR
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 没有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
react/react-strict-dom 的其他 Issue
-
Outline styles aren't parsed in React Native可能已有人在做 @hoangvvo 于 149 天前认领。 未关闭bug
难度 2/5 1-3 小时 新手友好度 65/100
react/react-strict-dom#467 · 1 条评论 ·
-
难度 2/5 1-3 小时 新手友好度 68/100
react/react-strict-dom#465 · 2 条评论 ·
-
postcss plugin re-transforms every included file on each rebuild under Turbopack (minutes-long HMR in large projects)可能已有人在做 @borisyankov 于 19 天前认领。 未关闭
难度 5/5 一周以上 新手友好度 35/100
react/react-strict-dom#520 ·
-
bug
难度 2/5 1-3 小时 新手友好度 35/100
react/react-strict-dom#505 · 2 个 reaction ·
-
Button remains unclickable after disabled state changes可能已有人在做 @MoOx 于 132 天前认领。 未关闭bug
难度 3/5 1-2 天 新手友好度 62/100
react/react-strict-dom#491 · 4 条评论 ·
查看 react/react-strict-dom 的全部 Issue
相似的 Issue
-
channels:add check:passed
难度 1/5 1 小时以内 新手友好度 72/100
维护者通常 9 天内回复
-
documentation
难度 1/5 1 小时以内 新手友好度 88/100
githubnext/gh-aw-workshop#4496 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 76/100
swc-project/swc#12516 ·
维护者通常 1 天内回复
-
Opening Files on a demo drive logs you out可能已有人在做 @RChang06 今天认领。 未关闭
难度 2/5 1-3 小时 新手友好度 65/100
维护者通常 2 天内回复
-
feature-request
难度 2/5 1-3 小时 新手友好度 72/100
omegaup/omegaup#10323 · 1 条评论 ·
维护者通常 5 天内回复