Support for styling using Platform.select or PlatformColor

[jaknas]

Hi. I wanted to ask if the css API in react-strict-dom supports usage of React Native features like Platform.select or PlatformColor? My main goal is to use iOS color tokens for iOS and in web fallback on something else.

Here's a small code example where I'm attempting to use platform-specific colors:

import { css } from 'react-strict-dom';
import { Platform, PlatformColor } from 'react-native';

const styles = css.create({
  ios: {
    backgroundColor: Platform.select({
      ios: PlatformColor('systemRedColor'),
      default: '#007bff'
    })
  },
});

This works fine and compiles on iOS (using the native system color as expected). But on the web, it fails during bundling with the following error:

Web Bundling failed 1230ms apps/examples/src/app/index.js (5012 modules)
 ERROR  src/app/stylex.css: /Users/jaknas/react-strict-dom/apps/examples/src/components/Button/Button.tsx: Unsupported expression: CallExpression


  42 | const styles = css.create({
  43 |   ios: {
> 44 |     backgroundColor: Platform.select({
     |                      ^
  45 |       ios: PlatformColor('systemRedColor'),
  47 |       default: '#007bff'

Is there built-in support for this, or a recommended workaround? I haven't seen any references for those APIs in the repo or any tests.

I'd appreciate any insights, examples, or plans for adding support if it's not there yet. Thanks!

[necolas]

Unlike StyleSheet in React Native, css.create (and other parts of the css API) is best thought of as a compilation target. In this case, the styles argument can't contain arbitrary functions (like Platform) or other imported values. However, you can currently bend this rule on native.

The way to do platform forking is to use separate files with the relevant platform file extensions - https://facebook.github.io/react-strict-dom/learn/setup/#platform-specific-files. In this case, I suggest creating a separate file (e.g., colors.stylex.js) and using defineConsts to define constant values for specific colors. Then you can create a native version that uses the PlatformColor. Give something like this a try:

// colors.stylex.js
import { css } from 'react-strict-dom';

export const colors = css.defineConsts({
  systemRedColor: '#007bff'
});

// colors.stylex.native.js
import { css } from 'react-strict-dom';
import { PlatformColor } from 'react-native';

export const colors = css.defineConsts({
  systemRedColor: PlatformColor('systemRedColor')
});

import { css } from 'react-strict-dom';
import { colors } from './colors.stylex';

const styles = css.create({
  root: {
    backgroundColor: colors.systemRedColor
  },
});