`nativeStyleMapping`'s type resolves a string target with `ResolveDotPath`'s arguments swapped, which is `never`

Ouverte Adaptée aux débutants
  • Quelque chose ne va pas ?
#558 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 5 jours

Personne n'a encore pris cette issue.

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
75/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
react-native, typescript
Domaine
developer-experience, testing

Piste de recherche

Commencez par src/runtime.types.ts et comparez l’appel à ResolveDotPath avec sa déclaration dans src/utilities/dot-notation.types.ts ; l’issue signale que les arguments de type sont inversés. Lisez le test de reproduction fourni dans src/__tests__/native/native-style-mapping-target.test.ts et exécutez-le avec yarn test src/__tests__/native/native-style-mapping-target.test.ts. Le travail est terminé lorsque le mapping de la cible de type chaîne se résout vers le type de prop nommé et que le test de reproduction réussit.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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

StyledConfigurationObject.nativeStyleMapping in src/runtime.types.ts resolves a string target with ResolveDotPath<T, ComponentProps<C>>, and src/utilities/dot-notation.types.ts declares ResolveDotPath<T, Path extends string>: the props first, the path second. With the path first it resolves to never, so NativeStyleMapping's per-key branch, which keys a mapping by the target's style keys, never applies to a string target, and a mapping type-checks only against the Record<string, …> that target: false brings. Inside the generic the swapped call raises no constraint error; with View's props it reports Type 'ViewProps' does not satisfy the constraint 'string'.

Library version

main at df32ce3

Environment info
System:
  OS: Windows 11 10.0.26300
  CPU: "(32) x64 AMD Ryzen 9 9950X3D 16-Core Processor          "
  Memory: 160.57 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: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    Versions:
      - 10.0.19041.0
      - 10.0.26100.0
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 df32ce3 with one file added, src/__tests__/native/native-style-mapping-target.test.ts, and install: 
    git clone --branch repro/native-style-mapping-swapped-path https://github.com/YevheniiKotyrlo/react-native-css
cd react-native-css
yarn install
  2. Run yarn test src/__tests__/native/native-style-mapping-target.test.ts.

src/__tests__/native/native-style-mapping-target.test.ts:

import { join } from "node:path";

import ts from "typescript";

const root = join(__dirname, "../../..").replaceAll("\\", "/");
const fixtureName = `${root}/src/__tests__/native/native-style-mapping-target.fixture.ts`;

function diagnostics(text: string): readonly string[] {
  const { config } = ts.readConfigFile(`${root}/tsconfig.json`, (path) =>
    ts.sys.readFile(path),
  );
  const { options } = ts.parseJsonConfigFileContent(config, ts.sys, root);
  const host = ts.createCompilerHost(options, true);
  const program = ts.createProgram([fixtureName], options, {
    ...host,
    getCurrentDirectory: () => root,
    fileExists: (name) => name === fixtureName || host.fileExists(name),
    readFile: (name) => (name === fixtureName ? text : host.readFile(name)),
    getSourceFile: (name, languageVersion, ...rest) =>
      name === fixtureName
        ? ts.createSourceFile(name, text, languageVersion, true)
        : host.getSourceFile(name, languageVersion, ...rest),
  });
  return ts
    .getPreEmitDiagnostics(program, program.getSourceFile(fixtureName))
    .map(({ messageText }) =>
      ts.flattenDiagnosticMessageText(messageText, "\n"),
    );
}

const viewStyleOf = (resolved: string) =>
  [
    `import type { ComponentProps } from "react";`,
    `import type { View } from "react-native";`,
    `import type { ResolveDotPath } from "react-native-css/utilities";`,
    `type ViewProps = ComponentProps<typeof View>;`,
    `export const style: ${resolved} = { backgroundColor: "red" };`,
  ].join("\n");

test("a string target resolves to its prop's type as runtime.types.ts resolves it for nativeStyleMapping", () => {
  expect(
    diagnostics(viewStyleOf(`ResolveDotPath<"style", ViewProps>`)),
  ).toStrictEqual([]);
});

test("a string target resolves to its prop's type in the order ResolveDotPath declares", () => {
  expect(
    diagnostics(viewStyleOf(`ResolveDotPath<ViewProps, "style">`)),
  ).toStrictEqual([]);
});

Expected: both cases pass: a string target resolves to the type of the prop it names in either test.

Actual: the declared order passes; the order runtime.types.ts uses reports Type '{ backgroundColor: string; }' is not assignable to type 'never'. and Type 'ViewProps' does not satisfy the constraint 'string'.

The run's output on main at df32ce3, Windows 11, Node 26.12.1 
FAIL src/__tests__/native/native-style-mapping-target.test.ts (13.621 s)
  × a string target resolves to its prop's type as runtime.types.ts resolves it for nativeStyleMapping (1296 ms)
  √ a string target resolves to its prop's type in the order ResolveDotPath declares (1045 ms)
  ● a string target resolves to its prop's type as runtime.types.ts resolves it for nativeStyleMapping
    expect(received).toStrictEqual(expected) // deep equality
    - Expected  - 1
    + Received  + 4
    - Array []
    + Array [
    +   "Type '{ backgroundColor: string; }' is not assignable to type 'never'.",
    +   "Type 'ViewProps' does not satisfy the constraint 'string'.",
    + ]
Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 passed, 2 total
Reproducible example repository

https://github.com/YevheniiKotyrlo/react-native-css/tree/repro/native-style-mapping-swapped-path

Langage dominant
TypeScript
Étoiles
166
Forks
45
Merge moyen
10 j 1 h
PR mergées (30 j)
4

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de nativewind/react-native-css

Toutes les issues de nativewind/react-native-css

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.