Issue with `css.defineVars` in React Native when using `react-strict-dom` in monorepo

Describe the issue

We are using react-strict-dom in our React web app and React Native app, and everything works great in the web app. However, we are encountering issues in the React Native app when using css.defineVars from our styling package. Interestingly, the issue seems to be resolved when using ...css.props([]) instead of style=[].

We are bundling the app with Metro and have applied unstable_enablePackageExports to resolve potential export issues.

App Structure:

• Packages Folder:

  • styling-generator: Imports Figma tokens and generates Stylex files for colors, typography, spacings, etc.
  • ui: Contains components used by both React and React Native apps.

• Apps Folder:

  • Web: React web app.
  • React Native: React Native app.

Example (Simplified):

spacings.stylex.ts (exported from ui-generated):

import {css} from 'react-strict-dom';

export const spacing = css.defineVars({
  s8: 8,
  s16: 16,
  s32: 32,
});

Gap.tsx (exported from ui):

import {memo} from 'react';
import {css, html} from 'react-strict-dom';

import { spacing } from 'ui-generated/spacings.stylex';

const styles = css.create({
  small: {
    height: spacing.s8,
  },
  medium: {
    height: spacing.s16,
  },
  large: {
    height: spacing.s32,
  },
});

type Props = {
  size?: 'small' | 'medium' | 'large';
};

export const Gap = memo(({size}: Props) => {
  return <html.div style={[size && styles[size]]} />;
});

Issue:

• In React Native, the styles defined using css.create() and passed through style=[] are not applied as expected (the height is undefined). Even though it works correctly in the web app.
• Interestingly, if we use ...css.props([]) instead of style=[], the issue is resolved in React Native.
• We are also seeing the following warning in the console:
  [warn] React Strict DOM: unrecognized custom property "--s16__id__202". This indicates that a custom CSS property is being used, but it's not recognized in React Strict DOM.

Any insight into why style=[] behaves differently in React Native would be greatly appreciated!

Expected behavior

• Styles created with css.create that use vars should work correctly in both React and React Native when passed to style=[].

Steps to reproduce

"react": "18.3.1",
"react-native": "0.75.4",
"react-strict-dom": "0.0.33"

1. Set up the project as described, with react-strict-dom in both the React and React Native apps.
2. Use css.create to generate styles in the Gap component (as shown in the example).
3. Observe the issue in the React Native app, where the styles are not applied correctly when using style=[].
4. Replace style=[] with ...css.props([]) and verify that the issue is resolved in React Native.

Test case

No response

Additional comments

• The issue appears only in React Native, and everything works as expected on the web.
• The styling generator relies on Figma tokens, and stylex files are shared across both platforms.
• The mono repo structure includes separate packages for the styling generator and UI components.
• We are bundling with Metro and have applied unstable_enablePackageExports to resolve potential export issues.

Start with the reproduced examples in spacings.stylex.ts and Gap.tsx, then run the React Native app with the listed React, React Native, and react-strict-dom versions under Metro. Compare the style=[] path with the ...css.props([]) path and inspect the reported custom-property warning. Done means css.defineVars styles apply through style=[] in React Native without the warning while preserving web behavior.