`registerCSS` rejects the `debug: "verbose"` it passes on, and never calls a `logger` it is given

Ouverte Adaptée aux débutants
  • Quelque chose ne va pas ?
#562 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
78/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/jest/index.ts et suivez la manière dont registerCSS spécifie le type de ses options et les transmet à compileWithAutoDebug. Le cas de reproduction indique src/__tests__/native/jest-helper-options.test.ts et donne deux vérifications : debug: "verbose" devrait passer la vérification de types, et un logger fourni devrait recevoir les mêmes messages que compile.

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

registerCSS(css, options) in src/jest/index.ts types options as CompilerOptions & { debug?: boolean } and passes them to compileWithAutoDebug, which takes debug?: boolean | "verbose" and prints the rule log only for "verbose", so registerCSS(css, { debug: "verbose" }) fails to type-check. Both accept CompilerOptions.logger, and compileWithAutoDebug returns compile(css, { ...options, logger }), which replaces it, so a logger handed to either is never called.

The test harnesses' registerCSS(output, { debug: Boolean(debug) }), reported in #545 and nativewind/nativewind#1878, turns "verbose" into true at that call.

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/jest-helper-options.test.ts, and install: 
    git clone --branch repro/jest-helper-option-types https://github.com/YevheniiKotyrlo/react-native-css
cd react-native-css
yarn install
  2. Run yarn test src/__tests__/native/jest-helper-options.test.ts.

src/__tests__/native/jest-helper-options.test.ts:

import { join } from "node:path";

import { compile } from "react-native-css/compiler";
import { registerCSS } from "react-native-css/jest";
import ts from "typescript";

const root = join(__dirname, "../../..").replaceAll("\\", "/");
const fixtureName = `${root}/src/__tests__/native/jest-helper-options.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"),
    );
}

test('registerCSS takes the debug: "verbose" it hands compileWithAutoDebug', () => {
  expect(
    diagnostics(
      [
        `import { registerCSS } from "react-native-css/jest";`,
        `registerCSS(".a { color: red; }", { debug: "verbose" });`,
      ].join("\n"),
    ),
  ).toStrictEqual([]);
});

test("registerCSS calls the logger it is given, as compile does", () => {
  const css = ".a { color: red; }";
  const compileMessages: string[] = [];
  const registerMessages: string[] = [];

  compile(css, {
    logger: (message: string) => {
      compileMessages.push(message);
    },
  });
  registerCSS(css, {
    logger: (message: string) => {
      registerMessages.push(message);
    },
  });

  expect(registerMessages).toStrictEqual(compileMessages);
});

Expected: both cases pass: debug: "verbose" type-checks, and registerCSS's logger receives the messages compile's does.

Actual: the type check reports Type 'string' is not assignable to type 'boolean | undefined'. for debug: "verbose", and registerCSS's logger receives none of the messages compile's receives.

The run's output on main at df32ce3, Windows 11, Node 26.12.1 
FAIL src/__tests__/native/jest-helper-options.test.ts (30.993 s)
  × registerCSS takes the debug: "verbose" it hands compileWithAutoDebug (2495 ms)
  × registerCSS calls the logger it is given, as compile does (27 ms)
  ● registerCSS takes the debug: "verbose" it hands compileWithAutoDebug
    expect(received).toStrictEqual(expected) // deep equality
    - Expected  - 1
    + Received  + 3
    - Array []
    + Array [
    +   "Type 'string' is not assignable to type 'boolean | undefined'.",
    + ]
  ● registerCSS calls the logger it is given, as compile does
    expect(received).toStrictEqual(expected) // deep equality
    - Expected  - 47
    + Received  +  1
    - Array [
    -   "Features {}",
    -   "Lightningcss first pass",
    -   ".a {
    -   "Lightningcss second pass",
    -   "Found 1 rules to process",
    -   "[
    -   "Exiting lightningcss",
    - ]
    + Array []
Test Suites: 1 failed, 1 total
Tests:       2 failed, 2 total
Reproducible example repository

https://github.com/YevheniiKotyrlo/react-native-css/tree/repro/jest-helper-option-types

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.