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

Aberta Para iniciantes
  • Algo errado?
#558 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 5 dias

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
2/5
Tempo estimado
1-3 horas
Facilidade para iniciantes
75/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
react-native, typescript
Domínio
developer-experience, testing

Direção de pesquisa

Comece por src/runtime.types.ts e compare a chamada a ResolveDotPath com sua declaração em src/utilities/dot-notation.types.ts; a issue identifica que os argumentos de tipo estão invertidos. Leia o teste de reprodução fornecido em src/__tests__/native/native-style-mapping-target.test.ts e execute-o com yarn test src/__tests__/native/native-style-mapping-target.test.ts. O trabalho está concluído quando o mapeamento do destino string é resolvido para o tipo da prop nomeada e o teste de reprodução passa.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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 resolves a string target with ResolveDotPath<T, ComponentProps<C>>, the path first, where ResolveDotPath<T, Path extends string> takes the props first and the path second. NativeStyleMapping's per-key branch, which keys a mapping by the target's style keys, so never applies to a string target, and inside its nativeStyleMapping an editor completes none of the style keys of the prop the target names.

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 two files added, src/__tests__/native/native-style-mapping-completions.test.ts and reproduce.sh: 
    git clone --branch repro/native-style-mapping-swapped-path https://github.com/YevheniiKotyrlo/react-native-css
cd react-native-css
  2. Run ./reproduce.sh. It runs yarn install --immutable and the test, which asks TypeScript's language service what it completes inside nativeStyleMapping: { } of styled(View, { className: { target: "style", nativeStyleMapping: { } } }), and ends with one line: DEFECT: … and exit status 1 while no style key is completed, FIXED: … and 0 once backgroundColor and opacity are, ERROR: … and 2 when the install fails or the test fails another way.

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

import { join } from "node:path";

import ts from "typescript";

const root = join(__dirname, "../../..").replaceAll("\\", "/");
const fileName = `${root}/src/__tests__/native/native-style-mapping-completions.fixture.tsx`;
const beforeCursor = [
  `import { View } from "react-native";`,
  `import { styled } from "react-native-css";`,
  `export const StyledView = styled(View, {`,
  `  className: { target: "style", nativeStyleMapping: { `,
].join("\n");
const text = `${beforeCursor} } },\n});\n`;

function completionsAtCursor(): readonly string[] {
  const { config } = ts.readConfigFile(`${root}/tsconfig.json`, (path) =>
    ts.sys.readFile(path),
  );
  const { options } = ts.parseJsonConfigFileContent(config, ts.sys, root);
  const service = ts.createLanguageService({
    getCompilationSettings: () => options,
    getScriptFileNames: () => [fileName],
    getScriptVersion: () => "1",
    getScriptSnapshot: (name) => {
      const content = name === fileName ? text : ts.sys.readFile(name);
      return content === undefined
        ? undefined
        : ts.ScriptSnapshot.fromString(content);
    },
    getCurrentDirectory: () => root,
    getDefaultLibFileName: (compilerOptions) =>
      ts.getDefaultLibFilePath(compilerOptions),
    fileExists: (name) => name === fileName || ts.sys.fileExists(name),
    readFile: (name) => (name === fileName ? text : ts.sys.readFile(name)),
    readDirectory: (...args) => ts.sys.readDirectory(...args),
    directoryExists: (name) => ts.sys.directoryExists(name),
    getDirectories: (name) => ts.sys.getDirectories(name),
  });
  const completions = service.getCompletionsAtPosition(
    fileName,
    beforeCursor.length,
    {},
  );
  return (completions?.entries ?? []).map(({ name }) => name);
}

test("nativeStyleMapping completes the style keys of the prop its target names", () => {
  expect(completionsAtCursor()).toEqual(
    expect.arrayContaining(["backgroundColor", "opacity"]),
  );
});

Expected: the language service completes the style keys of the prop the target names, backgroundColor and opacity among them, and any string key still type-checks, as the Record<string, …> that target: false brings allows. The script ends with FIXED: 1 of 1 cases pass and exits 0.

Actual: it completes only the names in scope (styled, StyledView, View, __DEV__, …) and no style key; the script ends with this line and exits 1:

DEFECT: nativeStyleMapping completes no style key of the prop its target names: 1 of 1 cases show it: nativeStyleMapping completes the style keys of the prop its target names
The run's output on main at df32ce3, Windows 11, Node 26.12.1 
System: MINGW64_NT-10.0-26300 3.6.10-5a1665c8.x86_64, Node v26.12.1, Yarn 4.9.2, react-native-css 86404a0
yarn install --immutable: done
FAIL src/__tests__/native/native-style-mapping-completions.test.ts (70.078 s)
  × nativeStyleMapping completes the style keys of the prop its target names (6598 ms)
  ● nativeStyleMapping completes the style keys of the prop its target names
    expect(received).toEqual(expected) // deep equality
    Expected: ArrayContaining ["backgroundColor", "opacity"]
    Received: ["styled", "StyledView", "View", "__BUNDLE_START_TIME__", "__DEV__", "__dirname", "__filename", "AbortController", "AbortSignal", "abstract", …]
Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
jest: ran src/__tests__/native/native-style-mapping-completions.test.ts
DEFECT: nativeStyleMapping completes no style key of the prop its target names: 1 of 1 cases show it: nativeStyleMapping completes the style keys of the prop its target names
Reproducible example repository

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

Linguagem predominante
TypeScript
Estrelas
166
Forks
45
Merge médio
12d 1h
PRs com merge (30d)
5

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de nativewind/react-native-css

Todas as issues de nativewind/react-native-css

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.