Missing `css.types` Polyfill in Native `stylex` Export Blocks Cross-Platform Usage

[christianbach]

Description

We're using react-strict-dom (v0.0.39) to enable theming for web and react-native apps. After upgrading, we began using css.types with defineVars to help enforce type safety and linting (per stylex docs). The eslint plugin for stylex encourages this usage.

Problem

On native, stylex is polyfilled, but the exported css object does not include a polyfill for css.types.*.

• css.types is undefined on native and breaks code that expects it.
• The eslint plugin throws errors when using color/number/etc values without css.types, but there’s no way to fix this due to the missing polyfill.

Relevant lines and files:

• index.js export:

 const css: TStyleX = stylex as $FlowFixMe;

In the dist/native/index.js this resolves to:

var stylex = /*#__PURE__*/Object.freeze({
  __proto__: null,
  __customProperties: __customProperties,
  create: create,
  createTheme: createTheme,
  defineConsts: defineConsts,
  defineVars: defineVars,
  firstThatWorks: firstThatWorks,
  keyframes: keyframes,
  positionTry: positionTry,
  props: props
});

Here, stylex/css does not have a types property on native.

Request for Guidance

What is the recommended path forward for unified cross-platform usage?

• Should we polyfill css.types on native (e.g., returning the color/number/etc values as on web), or is there a better approach?
• Are there best practices for handling theming and typing for native with stylex and react-strict-dom?

Additional Notes:

• The eslint plugin is very helpful for enforcing best practices, but the current gap with css.types on native is a blocker.
• Our goal is a unified codebase for web and native.

[necolas]

Should we polyfill css.types on native

I think so. Maybe there's no need to return anything other than the provided value on native. So it would exist just for compat with web use.

Are there best practices for handling theming

Yes, documented here https://facebook.github.io/react-strict-dom/learn/themes/

[necolas]

#337 adds a shim for these functions. Please give it a review and let me know of any concerns. Thanks!

[christianbach]

@necolas looks good! unfortunately I’m not that good at reading flow.

Thanks for fixing this!