Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

mediaquery not working in defineVars on real devices

Abierto
  • ¿Algo no está bien?
#283 4 comentarios 1 reacción 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
32/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
javascript, react-native
Área
mobile-dev

Línea de trabajo

Comienza con los ejemplos tokens.stylex.ts y header.ts y, después, inspecciona la ruta css.defineVars para las media queries relacionadas con el tamaño en la salida nativa. Reprodúcelo en un dispositivo Android o iOS real usando RN 0.78 y RSD 0.0.34, comparándolo con un emulador y con el caso del esquema de color. Se considera terminado cuando el valor predeterminado del token se aplica en dispositivos reales, mientras la media query de tamaño sigue siendo compatible.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
JavaScript
Estrellas
3.6k
Forks
208
Sin PR fusionados en 30 d

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de react/react-strict-dom

Todos los issues de react/react-strict-dom

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.