mediaquery not working in defineVars on real devices

[axyz]

Describe the issue

Bit of a long shot and not sure how to easily reproduce (let me know if I can use some predefined "snack" or codeSandbox to reproduce, but would be tricky as it needs to be checked specifically on a real device). But basically I encountered this strange behavior:

when a css.defineVars variable is defined using screen size media queries, its value works correctly on emulators, but not on real devices where it is completely ignored (style is not passed at all).

Everything works fine on emulator and on web css output.

Expected behavior

the default value of the token should be used on a real mobile device

Steps to reproduce

RN version 0.78 RSD: 0.0.34 (not using expo, but own App bundled with metro and babel/postss config as per documentation) Issue seems consistent on both Android and iOS devices

Something like:

// tokens.stylex.ts
export const tokens = css.defineVars({
  myFontSize: { default: "1rem", "@media (min-width: 1024px)": "2rem" }
});

//header.ts
import { tokens } from "./tokens.stylex";

export const Header = () => <h.span style={styles.base}>Header</h.span>;

const styles = css.create({
  base: { fontSize: tokens.myFontSize }
});

Test case

No response

Additional comments

if I use a an unrelated color scheme mediaquery:

// tokens.stylex.ts
export const tokens = css.defineVars({
  myFontSize: { default: "1rem", "@media (prefers-color-scheme: dark)": "2rem" }
});

everything seems to work correctly, so maybe the issue seems limited to the parsing or application of size related media queries

The issue seems specific to css.defineVars on the stylex file, it works as expected with styles made using css.create

[necolas]

If you can make an Expo snack with the reproduction, that would be helpful. Thanks

[axyz]

If you can make an Expo snack with the reproduction, that would be helpful. Thanks

Is there a template for expo snack with react-strict-dom ? I've been trying to build one, but it cannot resolve "react-strict-dom" in the package.json (tried versions from 0.0.34 to 0.0.29)

I get an error like:

package.json (3:5)
Failed to resolve dependency '[email protected]' (Can't resolve '' in '/tmp/snackager/snackager/buildStatus/1/[email protected],android,web/package')

[necolas]

Maybe a recent bug in snack? Or maybe it can't resolve packages that use Node exports? cc @EvanBacon

[necolas]

I think snack can't resolve RSD since it switched to using Node.js package exports. It works for 0.0.27 but not 0.0.28 upwards (when it switched to exports). I'm guessing any package using exports has the same issue.