[YevheniiKotyrlo]

Problem

Closes #424.

On main, compile(css).warnings() collects everything the compiler could not translate, but src/metro/metro-transformer.ts calls .stylesheet() and discards the rest of the compile result. So a dropped float or z-index: auto is silent in every build.

lightningcss also warns about input it cannot parse, such as an unknown at-rule or an unrecognised pseudo-element. lightningcss passes the rule through, the visitor finds nothing in it, and the rule disappears. The compiler never reads those warnings.

Solution

• The transformer hands .warnings() to reportCompilerWarnings, which prints one block per stylesheet:

  react-native-css: src/global.css - 3 declarations dropped, no React Native equivalent
    properties: columns, float
    values: z-index: auto
  

  A file's block prints when its set of warnings changes, so an incremental rebuild that changes nothing about them stays quiet. Warnings never fail a build.

• A warnings option on withReactNativeCSS sets how much is printed. Issue compile().warnings() is unreachable from a real build: no Metro consumer #424 offered three shapes, and this PR implements option 1 with option 2's escape hatch:

  • "summary" (the default) caps each channel at ten entries;
  • "verbose" lists everything;
  • "none" prints nothing.

  An opt-in default would leave the channel unseen by anyone who doesn't read the docs. If you'd rather it defaulted to "none", that's a one-word change.

• lightningcss's parse warnings from the first pass go to a new syntax channel. It is kept apart from what React Native cannot express, because the fix for it is in the author's stylesheet. The block counts them as syntax warnings and quotes each message, since a warning does not say what became of its rule: one message covers every repeat of a mistake, and with fix(compiler): recover from a rule lightningcss cannot parse #493's error recovery a media query whose feature value lightningcss refuses still compiles. This package's own @nativeMapping is not reported.

• Every recorded value is text, so CompilerWarnings.values is Record<string, string[]>. The one number the compiler recorded, a percentage line-height, is recorded as the ratio it resolved to.

• The README documents the option and the syntax warnings.

main refuses @react-native blocks outright, so the filter for this package's own at-rules covers only @nativeMapping.

Tests

• src/__tests__/metro/warnings.test.ts builds its fixtures from real compile() results and covers:
  • the formatting, with value entries in the same code-unit order as every other channel;
  • the caps;
  • the syntax clause, which counts warnings rather than the rules they name;
  • re-printing only on a change;
  • a file that stops warning and warns again;
  • paths inside and outside the project root.
• src/__tests__/metro/metro-transformer.test.ts drives the transformer with a stand-in for Expo's transform worker, and checks that the level and the file reach the report. It also checks that web and non-CSS files never print.
• src/__tests__/compiler/warnings.test.ts covers the syntax channel: an unknown at-rule and an unrecognised pseudo-element, each dropping its rule; a correctly spelled control; this package's own at-rule, and a misspelling of it, which is reported; and a repeated mistake.
• On main, 7 of the 15 cases in the files that load there fail; warnings.test.ts exercises the new module. Each of 33 mutations fails its own cases.
• yarn example expo export --platform android prints the block for the example's global.css: 42 declarations from Tailwind's preflight.
• On a 76 KB Tailwind stylesheet whose compile drops 441 declarations, a native transform takes 102.4 ms with the report, between two runs of main at 101.5 ms and 103.2 ms.

Verification

Every ci.yml job, with this branch merged into main: the Linux jobs on Ubuntu with Node 22.18.0, yarn test at 1379 passed, and build-ios-dev on macOS with Xcode 27.1, where ci.yml pins 26.6.

This PR's cases, run on main and here: #430 (comment)

Merge order

#379 changes the same lines of metro/metro-transformer.ts; whichever lands second rebases.

#493 is stacked on this branch.

[YevheniiKotyrlo]

No device frame

The change is terminal output, and the description shows the block a build prints.

This PR's cases — main against this PR

This PR's test files, run on main (2421ea77) and here, merged into main:

suite	fail on main	fail here
compiler/warnings.test.ts, new	4 of 8	0 of 8
metro/metro-transformer.test.ts, new	3 of 7	0 of 7
metro/warnings.test.ts, new	does not load: src/metro/warnings.ts is not on main	0 of 23

Run through the repo's jest on Ubuntu with Node 22.18.0.

[sammoore]

This is a solid improvement and default for consumers of react-native-css, but probably not something we want to ship in nativewind by default.

We should follow this up with a PR to nativewind (once a new version of react-native-css is published, so that it has the new warnings config key defined) that updates its call to withReactNativeCSS to configure warnings: 'none' by default.

cc @danstepanov