Add support for setting a custom viewport width

martinbooth · martinbooth · commit a78c2a3c9ce4 · 2025-07-24T15:12:06.000-07:00
diff --git a/packages/react-strict-dom/src/native/index.js b/packages/react-strict-dom/src/native/index.js
@@ -18,10 +18,13 @@ import type {
 import typeof * as TStyleX from '@stylexjs/stylex';
 
 import * as React from 'react';
+import { useMemo } from 'react';
 import * as compat from './compat';
 import * as html from './html';
 import * as stylex from './stylex';
 import { ProvideCustomProperties } from './modules/ContextCustomProperties';
+import { ProvideViewportScale } from './modules/ContextViewportScale';
+import * as ReactNative from './react-native';
 
 type StyleTheme<V, T> = Theme<V, T>;
 type StyleVars<T> = VarGroup<T>;
@@ -35,6 +38,11 @@ type ProviderProps = $ReadOnly<{
   customProperties: ProviderValue
 }>;
 
+type ViewportProviderProps = $ReadOnly<{
+  children: React.Node,
+  viewportWidth: number
+}>;
+
 export type { StaticStyles, StyleTheme, StyleVars, Styles, StylesWithout };
 
 function ThemeProvider(props: ProviderProps): React.Node {
@@ -47,8 +55,29 @@ function ThemeProvider(props: ProviderProps): React.Node {
   );
 }
 
+function ViewportProvider({
+  viewportWidth: logicalViewportWidth,
+  children
+}: ViewportProviderProps): React.Node {
+  const { width: viewportWidth } = ReactNative.useWindowDimensions();
+
+  const viewportScale = useMemo(
+    () => ({
+      scale: viewportWidth / logicalViewportWidth
+    }),
+    [logicalViewportWidth, viewportWidth]
+  );
+
+  return (
+    <ProvideViewportScale value={viewportScale}>
+      {children}
+    </ProvideViewportScale>
+  );
+}
+
 const contexts = {
-  ThemeProvider: ThemeProvider as typeof ThemeProvider
+  ThemeProvider: ThemeProvider as typeof ThemeProvider,
+  ViewportProvider: ViewportProvider as typeof ViewportProvider
 };
 
 // Export using StyleX types as the shim has divergent types internally.
diff --git a/packages/react-strict-dom/src/native/modules/ContextViewportScale.js b/packages/react-strict-dom/src/native/modules/ContextViewportScale.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+import React from 'react';
+
+type ViewportScale = $ReadOnly<{
+  scale: number
+}>;
+
+const ContextViewportScale: React.Context<ViewportScale> = React.createContext({
+  scale: 1
+});
+
+if (__DEV__) {
+  ContextViewportScale.displayName = 'ContextViewportScale';
+}
+
+export const ProvideViewportScale = ContextViewportScale.Provider;
+
+export function useViewportScale(): ViewportScale {
+  return React.useContext(ContextViewportScale);
+}
diff --git a/packages/react-strict-dom/src/native/modules/useStrictDOMElement.js b/packages/react-strict-dom/src/native/modules/useStrictDOMElement.js
@@ -13,6 +13,7 @@ import * as React from 'react';
 
 import { useElementCallback } from '../../shared/useElementCallback';
 import { errorMsg } from '../../shared/logUtils';
+import { useViewportScale } from './ContextViewportScale';
 
 function errorUnimplemented(name: string) {
   if (__DEV__) {
@@ -33,6 +34,7 @@ type Options = {
 };
 
 export function useStrictDOMElement<T>({ tagName }: Options): CallbackRef<T> {
+  const { scale: viewportScale } = useViewportScale();
   const elementCallback = useElementCallback(
     React.useCallback(
       // $FlowFixMe[unclear-type]
@@ -83,6 +85,20 @@ export function useStrictDOMElement<T>({ tagName }: Options): CallbackRef<T> {
           };
         }
 
+        if (viewportScale !== 1) {
+          const getBoundingClientRect = node.getBoundingClientRect;
+          node.getBoundingClientRect = function () {
+            const rect = getBoundingClientRect.call(node);
+
+            return new DOMRect(
+              rect.x / viewportScale,
+              rect.y / viewportScale,
+              rect.width / viewportScale,
+              rect.height / viewportScale
+            );
+          };
+        }
+
         const { getRootNode } = node;
         if (getRootNode == null) {
           node.getRootNode = () => errorUnimplemented('getRootNode');
@@ -157,7 +173,7 @@ export function useStrictDOMElement<T>({ tagName }: Options): CallbackRef<T> {
           }
         }
       },
-      [tagName]
+      [tagName, viewportScale]
     )
   );
 
diff --git a/packages/react-strict-dom/src/native/modules/useStyleProps.js b/packages/react-strict-dom/src/native/modules/useStyleProps.js
@@ -20,6 +20,7 @@ import { flattenStyle } from './flattenStyle';
 import { useInheritedStyles } from './ContextInheritedStyles';
 import { usePseudoStates } from './usePseudoStates';
 import { useStyleTransition } from './useStyleTransition';
+import { useViewportScale } from './ContextViewportScale';
 
 type StyleOptions = {
   customProperties: ?CustomProperties,
@@ -66,6 +67,7 @@ export function useStyleProps(
 
   const { fontScale, height, width } = ReactNative.useWindowDimensions();
   const colorScheme = ReactNative.useColorScheme();
+  const { scale: viewportScale } = useViewportScale();
 
   // These values are already computed
   const {
@@ -104,6 +106,7 @@ export function useStyleProps(
       inheritedFontSize:
         typeof inheritedFontSize === 'number' ? inheritedFontSize : undefined,
       viewportHeight: height,
+      viewportScale,
       viewportWidth: width
     },
     flatStyle as $FlowFixMe
diff --git a/packages/react-strict-dom/src/native/stylex/CSSLengthUnitValue.js b/packages/react-strict-dom/src/native/stylex/CSSLengthUnitValue.js
@@ -17,6 +17,7 @@ type ResolvePixelValueOptions = $ReadOnly<{
   fontScale: number | void,
   inheritedFontSize: ?number,
   viewportHeight: number,
+  viewportScale: number,
   viewportWidth: number
 }>;
 
@@ -58,7 +59,8 @@ export class CSSLengthUnitValue {
       viewportWidth,
       viewportHeight,
       fontScale = 1,
-      inheritedFontSize
+      inheritedFontSize,
+      viewportScale
     } = options;
     const unit = this.unit;
     const value = this.value;
@@ -72,10 +74,10 @@ export class CSSLengthUnitValue {
         }
       }
       case 'px': {
-        return value;
+        return value * viewportScale;
       }
       case 'rem': {
-        return fontScale * 16 * value;
+        return fontScale * 16 * value * viewportScale;
       }
       case 'vh': {
         return viewportHeight * valuePercent;
diff --git a/packages/react-strict-dom/src/native/stylex/CSSTransformValue.js b/packages/react-strict-dom/src/native/stylex/CSSTransformValue.js
@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+import type { ReactNativeTransform } from '../../types/renderer.native';
+
+export class CSSTransformValue {
+  value: $ReadOnlyArray<ReactNativeTransform>;
+  cachedScaledTransform: void | {
+    viewportScale: number,
+    value: $ReadOnlyArray<ReactNativeTransform>
+  };
+
+  constructor(value: $ReadOnlyArray<ReactNativeTransform>) {
+    this.value = value;
+  }
+
+  resolveTransformValue(
+    viewportScale: number
+  ): $ReadOnlyArray<ReactNativeTransform> {
+    if (viewportScale === 1) {
+      return this.value;
+    }
+    if (
+      this.cachedScaledTransform != null &&
+      this.cachedScaledTransform.viewportScale === viewportScale
+    ) {
+      return this.cachedScaledTransform.value;
+    }
+
+    const scaledTransform = this.value.map((transform) => {
+      if (
+        transform.translateX != null &&
+        typeof transform.translateX === 'number'
+      ) {
+        return { translateX: transform.translateX * viewportScale };
+      }
+      if (
+        transform.translateY != null &&
+        typeof transform.translateY === 'number'
+      ) {
+        return { translateY: transform.translateY * viewportScale };
+      }
+      return transform;
+    });
+
+    this.cachedScaledTransform = {
+      viewportScale,
+      value: scaledTransform
+    };
+
+    return scaledTransform;
+  }
+}
diff --git a/packages/react-strict-dom/src/native/stylex/__tests__/parseTransform-test.js b/packages/react-strict-dom/src/native/stylex/__tests__/parseTransform-test.js
@@ -5,7 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { parseTransform } from '../parseTransform';
+import { parseTransform as parseTransformImpl } from '../parseTransform';
+
+function parseTransform(transform) {
+  return parseTransformImpl(transform).resolveTransformValue(1);
+}
 
 describe('parseTransform', () => {
   test('perspective', () => {
diff --git a/packages/react-strict-dom/src/native/stylex/index.js b/packages/react-strict-dom/src/native/stylex/index.js
@@ -34,6 +34,8 @@ import {
   stringContainsVariables
 } from './customProperties';
 import { version } from '../modules/version';
+import { CSSTransformValue } from './CSSTransformValue';
+// import { LENGTH_PROPS } from './lengthProps';
 
 type ResolveStyleOptions = $ReadOnly<{
   active?: ?boolean,
@@ -44,6 +46,7 @@ type ResolveStyleOptions = $ReadOnly<{
   hover?: ?boolean,
   inheritedFontSize: ?number,
   viewportHeight: number,
+  viewportScale: number,
   viewportWidth: number,
   writingDirection?: ?'ltr' | 'rtl'
 }>;
@@ -295,6 +298,7 @@ function resolveStyle(
     hover,
     inheritedFontSize,
     viewportHeight,
+    viewportScale,
     viewportWidth
   } = options;
   const colorScheme = options.colorScheme || 'light';
@@ -331,6 +335,7 @@ function resolveStyle(
           fontScale,
           inheritedFontSize: inheritedFontSize,
           viewportHeight,
+          viewportScale,
           viewportWidth
         });
         continue;
@@ -343,6 +348,7 @@ function resolveStyle(
             fontScale,
             inheritedFontSize: fontSize,
             viewportHeight,
+            viewportScale,
             viewportWidth
           });
         } else {
@@ -352,6 +358,19 @@ function resolveStyle(
       }
     }
 
+    if (styleValue instanceof CSSTransformValue) {
+      result[propName] = styleValue.resolveTransformValue(viewportScale);
+      continue;
+    }
+    // if (
+    //   viewportScale !== 1 &&
+    //   typeof styleValue === 'number' &&
+    //   LENGTH_PROPS.has(propName)
+    // ) {
+    //   result[propName] = styleValue * viewportScale;
+    //   continue;
+    // }
+
     // Resolve the stylex object-value syntax
     if (
       styleValue != null &&
diff --git a/packages/react-strict-dom/src/native/stylex/lengthProps.js b/packages/react-strict-dom/src/native/stylex/lengthProps.js
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+function allSides(fn: (side: 'Top' | 'Right' | 'Bottom' | 'Left') => string) {
+  return [fn('Top'), fn('Right'), fn('Bottom'), fn('Left')];
+}
+
+export const LENGTH_PROPS: Set<string> = new Set([
+  'margin',
+  ...allSides((prop) => `margin${prop}`),
+  'padding',
+  ...allSides((prop) => `padding${prop}`),
+  ...allSides((prop) => prop.toLowerCase()),
+  'maxHeight',
+  'maxWidth',
+  'minHeight',
+  'minWidth',
+  'height',
+  'width',
+  'marginInline',
+  'marginBlock',
+  'marginBlockStart',
+  'marginBlockEnd',
+  'marginInlineStart',
+  'marginInlineEnd',
+  'paddingInline',
+  'paddingBlock',
+  'paddingBlockStart',
+  'paddingBlockEnd',
+  'paddingInlineStart',
+  'paddingInlineEnd',
+  'borderWidth',
+  ...allSides((prop) => `border${prop}Width`),
+  'borderRadius',
+  'borderTopLeftRadius',
+  'borderTopRightRadius',
+  'borderBottomLeftRadius',
+  'borderBottomRightRadius',
+  'outlineWidth',
+  ...allSides((prop) => `outline${prop}Width`),
+  'outlineOffset',
+  ...allSides((prop) => `${prop}Offset`),
+  'gap',
+  'columnGap',
+  'rowGap'
+]);
diff --git a/packages/react-strict-dom/src/native/stylex/parseTransform.js b/packages/react-strict-dom/src/native/stylex/parseTransform.js
diff --git a/packages/react-strict-dom/tests/__snapshots__/html-test.native.js.snap-native b/packages/react-strict-dom/tests/__snapshots__/html-test.native.js.snap-native
diff --git a/packages/react-strict-dom/tests/css-test.native.js b/packages/react-strict-dom/tests/css-test.native.js
diff --git a/packages/react-strict-dom/tests/html-test.native.js b/packages/react-strict-dom/tests/html-test.native.js
