mediaquery not working in defineVars on real devices
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 32/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- javascript, react-native
- Domain
- mobile-dev
Research direction
Start with the tokens.stylex.ts and header.ts examples, then inspect the css.defineVars path for size-related media queries in native output. Reproduce on a real Android or iOS device using RN 0.78 and RSD 0.0.34, comparing it with an emulator and the color-scheme case. Done means the default token value is applied on real devices while the size media query remains supported.
Written by the indexing model from the issue text.
Description
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
- Dominant language
- JavaScript
- Stars
- 3.6k
- Forks
- 206
- PR merge metrics
- No merged PRs in 30d
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from react/react-strict-dom
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
react/react-strict-dom#467 · 1 comment ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
react/react-strict-dom#465 · 2 comments ·
-
Difficulty 5/5 Over a week Newbie friendliness 35/100
react/react-strict-dom#520 ·
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 35/100
react/react-strict-dom#505 · 2 reactions ·
-
bug
Difficulty 3/5 1-2 days Newbie friendliness 62/100
react/react-strict-dom#491 · 4 comments ·
All issues in react/react-strict-dom
Similar issues
-
awaiting triage bug Causes friction Hop Gui P1 P2 Transforms
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
georgestephanis/p2026#40 ·
-
Enatega Customer and Rider app: Add-ons price is not visible to customer after order is placed. Open
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Margaret-Petersen/food-delivery-app-clone-react-native#1981 ·