Metro bundles ESM and CommonJS runtimes; CSS variables inject into the wrong rootVariables family

[pauloedurezende]

Bug summary

With react-native-css@3.0.7, Expo 57 / React Native 0.86 / Metro 0.84 can bundle both dist/module and dist/commonjs copies of the native runtime. StyleCollection and VariableContext are globalized, but rootVariables / universalVariables are module-local.

The transformed CSS module is CommonJS and StyleCollection.inject() therefore closes over the CommonJS rootVariables family. Components rewritten from react-native use the ESM runtime, whose varResolver() reads the ESM family. The stylesheet rules are registered (because StyleCollection is shared), but any runtime var(...) resolves to undefined.

This makes direct/inlined utility values work while mode-aware CSS-variable-backed colors render transparent.

Version / environment

• react-native-css: 3.0.7
• nativewind: 5.0.0-preview.4
• Expo: 57.0.11
• React Native: 0.86.2
• Metro: 0.84.4
• pnpm: 11.17.0
• iOS simulator (same architecture should affect Android)

Runtime evidence

Using the React Native CDP inspector against the live app:

__r(337).StyleCollection === __r(1247).StyleCollection
// true

__r(337).rootVariables === __r(1247).rootVariables
// false

__r(337).rootVariables("color-surface-primary").get()
// undefined

__r(1247).rootVariables("color-surface-primary").get()
// "#fff"

Here module 337 is dist/module/native-internal/index.js, while 1247 is dist/commonjs/native-internal/index.js.

Both runtimes are present in the same bundle:

dist/module/native-internal/root.js
dist/commonjs/native-internal/root.js
dist/module/native/styles/variables.js
dist/commonjs/native/styles/variables.js

The CSS class itself is correctly registered:

globalThis.__react_native_css_style_collection
  .styles("bg-utility-neutral-900")
  .get()
// [{ d: [[[{ }, "var", "color-utility-neutral-900", 1], "backgroundColor", 1]], dv: 1, ... }]

Resolving the same rule through each runtime proves the split:

const get = observable => observable.get();
const rules = globalThis.__react_native_css_style_collection
  .styles("bg-utility-neutral-900")
  .get();

__r(730).calculateProps(get, rules).normal
// ESM calculate-props: { style: {} }

__r(1263).calculateProps(get, rules).normal
// CJS calculate-props: { style: { backgroundColor: "#171717" } }

The generated bundle shows the CSS injection module depending on the CommonJS native-internal module, while React Native wrappers and useNativeCss use ESM modules.

Why this happens

src/native-internal/style-collection.ts stores StyleCollection on globalThis, and variables.tsx similarly globalizes VariableContext. But src/native-internal/root.ts creates these per module instance:

export const rootVariables = rootVariableFamily();
export const universalVariables = rootVariableFamily();

So ESM/CJS duplication is survivable for registered styles but not variables.

Metro 0.84 intentionally resolves package conditional exports by source import vs require, so a package containing both forms can legitimately include both targets in one bundle.

Suggested fix

Make the root/universal variable families canonical across module formats, similar to StyleCollection and VariableContext (for example, store both on globalThis), and add a regression test/build fixture where CSS injection comes from the CommonJS export while rendering uses the ESM export.

A package-level alternative would be to expose one canonical React Native target above import/require in the exports map, but globalizing the variable registries would also defend against duplicate package instances.

[github-actions]

🤖 Auto-triage

Status: CONFIRMED
Type: bug
Version: v5

Findings

The reporter's analysis is accurate and matches the source. In src/native-internal/style-collection.ts and src/native-internal/variables.tsx, StyleCollection and VariableContext are stored on globalThis (making them singletons across module systems), but in src/native-internal/root.ts the rootVariables and universalVariables families are plain module-scoped const exports:

export const rootVariables = rootVariableFamily();
export const universalVariables = rootVariableFamily();

When Metro 0.84's conditional-exports resolution loads both dist/module (ESM) and dist/commonjs (CJS) copies of native-internal into the same bundle, StyleCollection.inject() writes variables into whichever instance the CSS injection module imported, while src/native/styles/variables.ts varResolver() reads from a different instance's rootVariables / universalVariables. Result: variables are registered but resolve to undefined, causing var(...)-backed colors to render transparent while inlined values still work.

What I tested

• Fetched issue body and runtime CDP evidence
• Read src/native-internal/root.ts — confirmed rootVariables/universalVariables are module-local
• Read src/native-internal/style-collection.ts — confirmed StyleCollection is on globalThis, and inject() writes to the module-local rootVariables imported from ./root
• Read src/native-internal/variables.tsx — confirmed VariableContext is on globalThis (asymmetric with variable families)
• Read src/native/styles/variables.ts — confirmed varResolver() reads from the module-local rootVariables/universalVariables imports
• Did not write a Jest repro: this bug requires Metro to load both ESM and CJS builds in the same bundle, which cannot be reproduced in the single-module Jest environment

Next steps

• Globalize rootVariables and universalVariables (e.g. globalThis.__react_native_css_root_variables ??= rootVariableFamily()) to match the StyleCollection/VariableContext pattern, so dual-instance bundles converge
• Move the rootVariables("__rn-css-rem") / __rn-css-color seeding behind the same ??= guard so subsequent module loads don't reset them
• Consider adding a build-level check or exports-map consolidation so Metro does not select both import and require targets simultaneously
• Add a regression fixture that loads both dist/module and dist/commonjs copies and asserts the variable families are the same object
• Needs Tier 2 to design the fix (which of globalThis vs a single canonical export path) and validate via example app

---

_{This is an automated triage. See auto-triage.yml.}