Repository navigation
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 foundSteps to reproduce
- Clone the reproducer branch, which is
mainat df32ce3 with two files added,src/__tests__/native/jest-helper-options.test.tsandreproduce.sh:git clone --branch repro/jest-helper-option-types https://github.com/YevheniiKotyrlo/react-native-css cd react-native-css - Run
./reproduce.sh. It runsyarn install --immutableand 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