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

A media `resolution` in `dpi` or `dpcm` converts to dppx at 160 dpi, so `(min-resolution: 300dpi)` matches a 2x screen

Abierto Apto para principiantes
  • ¿Algo no está bien?
#544 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 3 días

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
78/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react-native, typescript
Área
testing

Línea de trabajo

Empieza por parseMediaFeatureValue en src/compiler/media-query.ts, que, según indica el issue, convierte los valores dpi y dpcm para compararlos con PixelRatio.get(). Ejecuta la prueba de reproducción en src/__tests__/native/media-resolution-units.test.tsx; muestra qué casos de resolución pasan y cuáles fallan. Se considera terminado cuando los casos 300dpi y 100dpcm no coincidan con una pantalla 2x, mientras que 2dppx, 192dpi y 75dpcm sigan coincidiendo.

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

Descripción

Before submitting a new issue
  • I tested using the latest version of the library, as the bug might be already fixed.
  • I tested using a supported version of react native.
  • I checked for possible duplicate issues, with possible answers.
Bug summary

parseMediaFeatureValue (src/compiler/media-query.ts) turns a resolution into dots per px for the runtime to compare with PixelRatio.get(), dividing dpi by 160 ("Mobile devices use 160 as a standard") and dpcm by 160 × 2.54. css-values-4 fixes 1dppx at 96dpi, and a dot per centimetre is 2.54 dots per inch, so (min-resolution: 300dpi), 3.125dppx, matches a 2x screen, and so does (min-resolution: 100dpcm), 2.65dppx.

The 300dpi and 100dpcm cases fail, matching a screen below their resolution; the 2dppx, 192dpi and 75dpcm cases pass.

Library version

main at 2421ea7 (0.0.0-nightly.2421ea7)

Environment info
System:
  OS: Windows 11 10.0.26300
  CPU: "(32) x64 AMD Ryzen 9 9950X3D 16-Core Processor          "
  Memory: 155.26 GB / 255.67 GB
Binaries:
  Node:
    version: 26.12.1
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 4.9.2
    path: C:\Users\<user>\AppData\Roaming\npm\yarn.CMD
  npm:
    version: 12.2.1
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK:
    API Levels:
      - "33"
      - "35"
      - "35"
      - "35"
      - "36"
      - "37"
    Build Tools:
      - 35.0.0
      - 36.0.0
      - 36.1.0
      - 37.0.0
    System Images:
      - android-26 | Google APIs Intel x86_64 Atom
      - android-28 | Google APIs Intel x86_64 Atom
      - android-29 | Google APIs Intel x86_64 Atom
      - android-30 | Google APIs Intel x86_64 Atom
      - android-31 | Google APIs Intel x86_64 Atom
      - android-32 | Google APIs Intel x86_64 Atom
      - android-33 | Google APIs Intel x86_64 Atom
      - android-34 | Google APIs Intel x86_64 Atom
      - android-35 | Google APIs Intel x86_64 Atom
      - android-36.1 | Google Play Intel x86_64 Atom
      - android-36.1 | Pre-Release 16 KB Page Size Google Play Intel x86_64 Atom
      - android-37.0 | Google APIs Intel x86_64 Atom
    Android NDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: AI-262.9437.185.2621.16467767
  Visual Studio: Not Found
Languages:
  Java:
    version: 17.0.20.1
    path: C:\Program Files\Microsoft\jdk-17.0.20.101-hotspot\bin\javac.EXE
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 19.2.3
    wanted: 19.2.3
  react-native:
    installed: 0.86.3
    wanted: 0.86.3
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found
Steps to reproduce
  1. Clone the reproducer branch, which is main at 2421ea7 with one file added, src/__tests__/native/media-resolution-units.test.tsx, and install: 
    git clone --branch repro/544-media-resolution-units https://github.com/YevheniiKotyrlo/react-native-css
cd react-native-css
yarn install
  2. Run yarn jest src/__tests__/native/media-resolution-units.test.tsx.

src/__tests__/native/media-resolution-units.test.tsx:

import { PixelRatio } from "react-native";

import { render, screen } from "@testing-library/react-native";
import { View } from "react-native-css/components/View";
import { registerCSS, testID } from "react-native-css/jest";

test.each([
  ["(min-resolution: 2dppx)", true],
  ["(min-resolution: 192dpi)", true],
  ["(min-resolution: 300dpi)", false],
  ["(min-resolution: 75dpcm)", true],
  ["(min-resolution: 100dpcm)", false],
])(`on a ${PixelRatio.get()}x screen, @media %s matches: %s`, (condition, expected) => {
  registerCSS(`.a { width: 10px; } @media ${condition} { .a { width: 37px; } }`);
  render(<View testID={testID} className="a" />);
  expect(screen.getByTestId(testID).props.style.width === 37).toBe(expected);
});

Expected: (min-resolution: 300dpi), 3.125dppx, and (min-resolution: 100dpcm) do not match a 2x screen.

Actual: both match a 2x screen, read at 160 dpi to the dppx.

The run's output on main at 2421ea7, Windows 11, Node 26.12.1 
FAIL src/__tests__/native/media-resolution-units.test.tsx
  √ on a 2x screen, @media (min-resolution: 2dppx) matches: true (17 ms)
  √ on a 2x screen, @media (min-resolution: 192dpi) matches: true (4 ms)
  × on a 2x screen, @media (min-resolution: 300dpi) matches: false (3 ms)
  √ on a 2x screen, @media (min-resolution: 75dpcm) matches: true (1 ms)
  × on a 2x screen, @media (min-resolution: 100dpcm) matches: false (1 ms)
  ● on a 2x screen, @media (min-resolution: 300dpi) matches: false
    expect(received).toBe(expected) // Object.is equality
    Expected: false
    Received: true
      14 |   registerCSS(`.a { width: 10px; } @media ${condition} { .a { width: 37px; } }`);
      15 |   render(<View testID={testID} className="a" />);
    > 16 |   expect(screen.getByTestId(testID).props.style.width === 37).toBe(expected);
         |                                                               ^
      17 | });
      18 |
      at toBe (src/__tests__/native/media-resolution-units.test.tsx:16:63)
  ● on a 2x screen, @media (min-resolution: 100dpcm) matches: false
    expect(received).toBe(expected) // Object.is equality
    Expected: false
    Received: true
      14 |   registerCSS(`.a { width: 10px; } @media ${condition} { .a { width: 37px; } }`);
      15 |   render(<View testID={testID} className="a" />);
    > 16 |   expect(screen.getByTestId(testID).props.style.width === 37).toBe(expected);
         |                                                               ^
      17 | });
      18 |
      at toBe (src/__tests__/native/media-resolution-units.test.tsx:16:63)
Test Suites: 1 failed, 1 total
Tests:       2 failed, 3 passed, 5 total
Snapshots:   0 total
Time:        1.087 s, estimated 2 s
Ran all test suites matching /src\\__tests__\\native\\media-resolution-units.test.tsx/i.
Reproducible example repository

https://github.com/YevheniiKotyrlo/react-native-css/tree/repro/544-media-resolution-units

Lenguaje dominante
TypeScript
Estrellas
166
Forks
45
Merge medio
13 d 14 h
PR fusionados (30 d)
1

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 nativewind/react-native-css

Todos los issues de nativewind/react-native-css

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.