Skip to content

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

Open

Description

@YevheniiKotyrlo

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 two files added, src/__tests__/native/jest-helper-options.test.ts and reproduce.sh:
    git clone --branch repro/jest-helper-option-types https://github.com/YevheniiKotyrlo/react-native-css
    cd react-native-css
  2. Run ./reproduce.sh. It runs yarn install --immutable and the test, and ends with one line: DEFECT: … and exit status 1 while either case fails as described below, FIXED: … and 0 once both pass, ERROR: … and 2 when the install fails or a case fails another way.

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, as compileWithAutoDebug already takes it, and registerCSS's logger receives the messages compile's does; debug: true and false keep their meaning, and with no logger registerCSS logs as it does now. The script ends with FIXED: 2 of 2 cases pass and exits 0.

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 script ends with this line and exits 1:

DEFECT: registerCSS rejects debug: "verbose" or drops the logger it is given: 2 of 2 cases show it: registerCSS takes the debug: "verbose" it hands compileWithAutoDebug; registerCSS calls the logger it is given, as compile does
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 fabbd8a
yarn install --immutable: done
FAIL src/__tests__/native/jest-helper-options.test.ts (33.591 s)
  × registerCSS takes the debug: "verbose" it hands compileWithAutoDebug (2120 ms)
  × registerCSS calls the logger it is given, as compile does (14 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
jest: ran src/__tests__/native/jest-helper-options.test.ts
DEFECT: registerCSS rejects debug: "verbose" or drops the logger it is given: 2 of 2 cases show it: registerCSS takes the debug: "verbose" it hands compileWithAutoDebug; registerCSS calls the logger it is given, as compile does

Reproducible example repository

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions