Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

mediaquery not working in defineVars on real devices

Aperta
  • Qualcosa non va?
#283 4 commenti 1 reazione 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
32/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
javascript, react-native
Ambito
mobile-dev

Direzione di ricerca

Inizia con gli esempi tokens.stylex.ts e header.ts, quindi esamina il percorso css.defineVars per le media query relative alle dimensioni nell'output nativo. Riproduci il problema su un dispositivo Android o iOS reale usando RN 0.78 e RSD 0.0.34, confrontandolo con un emulatore e con il caso dello schema di colori. Il lavoro è completato quando il valore predefinito del token viene applicato sui dispositivi reali, mentre la media query relativa alle dimensioni rimane supportata.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug
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

Lingua principale
JavaScript
Stelle
3.6k
Fork
206
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di react/react-strict-dom

Tutte le issue di react/react-strict-dom

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.