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

A dashed ident in a custom property's value is dropped: `--v: --foo, width` stores `width`

Abierto Apto para principiantes
  • ¿Algo no está bien?
#528 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
83/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
typescript
Área
frontend

Línea de trabajo

Empieza en src/compiler/declarations.ts, donde parseCustomDeclaration pasa los tokens de valor a parseUnparsed; el issue identifica la falta de tratamiento de un token dashed-ident. Usa el reproductor en src/__tests__/native/dashed-ident.test.tsx y ejecuta yarn jest src/__tests__/native/dashed-ident.test.tsx. El trabajo estará listo cuando --foo se conserve en los valores de propiedades personalizadas y los casos reportados produzcan los valores esperados sin advertencias.

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

A dashed ident in a custom property's value is dropped when the sheet compiles: --v: --foo stores nothing and --v: --foo, width stores width, so transition-property: var(--v) reads width where the written list names both, and the list's other entries move off their index. Chromium 156, Firefox 157 and WebKit 27.2 keep --foo through the variable. Each case is .a { --v: <value>; transition-property: var(--v); } beside .b { transition-property: <value>; }, compiled with inlineVariables: false.

--v: --foo -> a={"s":[1,1],"d":[[[{},"var","v",1],"transitionProperty",1]],"dv":1} b=[{"transitionProperty":[]}] warnings={}
--v: --foo, width -> a={"s":[1,1],"v":[["v","width"]],"d":[[[{},"var","v",1],"transitionProperty",1]],"dv":1} b=[{"transitionProperty":["width"]}] warnings={}
--v: width, --foo -> a={"s":[1,1],"v":[["v","width"]],"d":[[[{},"var","v",1],"transitionProperty",1]],"dv":1} b=[{"transitionProperty":["width"]}] warnings={}

Expected: .a's v holds --foo (and ["--foo", "width"]), with no warning either way. parseCustomDeclaration hands the value's tokens to parseUnparsed (src/compiler/declarations.ts), whose switch returns nothing for a dashed-ident token.

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/dashed-ident.test.tsx, and install: 
    git clone --branch repro/528-custom-property-drops-a-dashed-ident https://github.com/YevheniiKotyrlo/react-native-css
cd react-native-css
yarn install
  2. Run yarn jest src/__tests__/native/dashed-ident.test.tsx.

src/__tests__/native/dashed-ident.test.tsx:

// Run from a react-native-css checkout: copy to src/__tests__/native/dashed-ident.test.tsx, then `yarn jest` it.
import { compile } from "react-native-css/compiler";

test.each(["--foo", "--foo, width", "width, --foo"])("--v: %s", (value) => {
  const compiled = compile(`.a { --v: ${value}; transition-property: var(--v); } .b { transition-property: ${value}; }`, { inlineVariables: false });
  console.log(`--v: ${value} -> a=${JSON.stringify(compiled.stylesheet().s?.find(([n]) => n === "a")?.[1][0])} b=${JSON.stringify(compiled.stylesheet().s?.find(([n]) => n === "b")?.[1][0]?.d)} warnings=${JSON.stringify(compiled.warnings())}`);
});

Expected: the dashed ident is kept: --v: --foo, width makes transition-property: var(--v) read both names, as the written list does.

Actual: --foo is dropped, and width moves to its index.

The run's output on main at 2421ea7, Windows 11, Node 26.12.1 
  console.log
    --v: --foo -> a={"s":[1,1],"d":[[[{},"var","v",1],"transitionProperty",1]],"dv":1} b=[{"transitionProperty":[]}] warnings={}
      at log (src/__tests__/native/dashed-ident.test.tsx:6:11)
  console.log
    --v: --foo, width -> a={"s":[1,1],"v":[["v","width"]],"d":[[[{},"var","v",1],"transitionProperty",1]],"dv":1} b=[{"transitionProperty":["width"]}] warnings={}
      at log (src/__tests__/native/dashed-ident.test.tsx:6:11)
  console.log
    --v: width, --foo -> a={"s":[1,1],"v":[["v","width"]],"d":[[[{},"var","v",1],"transitionProperty",1]],"dv":1} b=[{"transitionProperty":["width"]}] warnings={}
      at log (src/__tests__/native/dashed-ident.test.tsx:6:11)
PASS src/__tests__/native/dashed-ident.test.tsx
  √ --v: --foo (15 ms)
  √ --v: --foo, width (2 ms)
  √ --v: width, --foo (1 ms)
Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        0.927 s, estimated 3 s
Ran all test suites matching /src\\__tests__\\native\\dashed-ident.test.tsx/i.
Reproducible example repository

https://github.com/YevheniiKotyrlo/react-native-css/tree/repro/528-custom-property-drops-a-dashed-ident

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.