Iterate on viewport scaling polyfill

* Add scaling for default 'em' unit polyfill.
* Move scale context provider into context file.
* Expand list of length style properties.

Author: necolas

packages/react-strict-dom/src/native/index.js

@@ -18,13 +18,11 @@ 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>;
@@ -38,11 +36,6 @@ 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 {
@@ -55,29 +48,9 @@ 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,
-  ViewportProvider: ViewportProvider as typeof ViewportProvider
+  ViewportProvider: ProvideViewportScale as typeof ProvideViewportScale
 };
 
 // Export using StyleX types as the shim has divergent types internally.

packages/react-strict-dom/src/native/modules/ContextViewportScale.js

@@ -4,25 +4,49 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict
+ * @flow strict-local
  */
 
-import React from 'react';
+import * as React from 'react';
+import * as ReactNative from '../react-native';
 
-type ViewportScale = $ReadOnly<{
+type Value = $ReadOnly<{
   scale: number
 }>;
 
-const ContextViewportScale: React.Context<ViewportScale> = React.createContext({
-  scale: 1
-});
+type ProviderProps = $ReadOnly<{
+  children: React.Node,
+  viewportWidth: number
+}>;
+
+const defaultContext = { scale: 1 };
+const ContextViewportScale: React.Context<Value> =
+  React.createContext(defaultContext);
 
 if (__DEV__) {
   ContextViewportScale.displayName = 'ContextViewportScale';
 }
 
-export const ProvideViewportScale = ContextViewportScale.Provider;
+export function ProvideViewportScale({
+  viewportWidth: logicalViewportWidth,
+  children
+}: ProviderProps): React.Node {
+  const { width: viewportWidth } = ReactNative.useWindowDimensions();
+
+  const viewportScale = React.useMemo(
+    () => ({
+      scale: viewportWidth / logicalViewportWidth
+    }),
+    [logicalViewportWidth, viewportWidth]
+  );
+
+  return (
+    <ContextViewportScale.Provider value={viewportScale}>
+      {children}
+    </ContextViewportScale.Provider>
+  );
+}
 
-export function useViewportScale(): ViewportScale {
+export function useViewportScale(): Value {
   return React.useContext(ContextViewportScale);
 }

packages/react-strict-dom/src/native/modules/useStrictDOMElement.js

@@ -4,15 +4,15 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict
+ * @flow strict-local
  */
 
 import type { CallbackRef } from '../../types/react';
 
 import * as React from 'react';
 
-import { useElementCallback } from '../../shared/useElementCallback';
 import { errorMsg } from '../../shared/logUtils';
+import { useElementCallback } from '../../shared/useElementCallback';
 import { useViewportScale } from './ContextViewportScale';
 
 function errorUnimplemented(name: string) {

packages/react-strict-dom/src/native/stylex/CSSLengthUnitValue.js

@@ -54,19 +54,19 @@ export class CSSLengthUnitValue {
 
   resolvePixelValue(options: ResolvePixelValueOptions): number {
     const {
-      viewportWidth,
-      viewportHeight,
       fontScale = 1,
       inheritedFontSize,
-      viewportScale
+      viewportHeight,
+      viewportScale,
+      viewportWidth
     } = options;
     const unit = this.unit;
     const value = this.value;
     const valuePercent = value / 100;
     switch (unit) {
       case 'em': {
         if (inheritedFontSize == null) {
-          return fontScale * 16 * value;
+          return fontScale * 16 * value * viewportScale;
         } else {
           return inheritedFontSize * value;
         }

packages/react-strict-dom/src/native/stylex/index.js

@@ -19,12 +19,14 @@ import type {
 } from '../../types/styles';
 
 import { CSSLengthUnitValue } from './CSSLengthUnitValue';
+import { CSSTransformValue } from './CSSTransformValue';
 import { CSSUnparsedValue } from './typed-om/CSSUnparsedValue';
 import { errorMsg, warnMsg } from '../../shared/logUtils';
 import { fixContentBox } from './fixContentBox';
 import { flattenStyle } from './flattenStyleXStyles';
 import { isAllowedShortFormValue } from './isAllowedShortFormValue';
 import { isAllowedStyleKey } from './isAllowedStyleKey';
+import { lengthStyleKeySet } from './isLengthStyleKey';
 import { mediaQueryMatches } from './mediaQueryMatches';
 import { parseTextShadow } from './parseTextShadow';
 import { parseTimeValue } from './parseTimeValue';
@@ -34,8 +36,6 @@ import {
   stringContainsVariables
 } from './customProperties';
 import { version } from '../modules/version';
-import { CSSTransformValue } from './CSSTransformValue';
-import { LENGTH_PROPS } from './lengthProps';
 
 type ResolveStyleOptions = $ReadOnly<{
   active?: ?boolean,
@@ -365,7 +365,7 @@ function resolveStyle(
     if (
       viewportScale !== 1 &&
       typeof styleValue === 'number' &&
-      LENGTH_PROPS.has(propName)
+      lengthStyleKeySet.has(propName)
     ) {
       result[propName] = styleValue * viewportScale;
       continue;

packages/react-strict-dom/src/native/stylex/isLengthStyleKey.js

@@ -0,0 +1,86 @@
+/**
+ * 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 { version } from '../modules/version';
+
+export const lengthStyleKeySet: Set<string> = new Set([
+  'blockSize',
+  'borderBottomLeftRadius',
+  'borderBottomRightRadius',
+  'borderBottomWidth',
+  'borderBlockWidth',
+  'borderBlockEndWidth',
+  'borderBlockStartWidth',
+  'borderEndEndRadius',
+  'borderEndStartRadius',
+  'borderInlineWidth',
+  'borderInlineEndWidth',
+  'borderInlineStartWidth',
+  'borderLeftWidth',
+  'borderRadius',
+  'borderRightWidth',
+  'borderStartEndRadius',
+  'borderStartStartRadius',
+  'borderTopLeftRadius',
+  'borderTopRightRadius',
+  'borderTopWidth',
+  'borderWidth',
+  'bottom',
+  'columnGap',
+  'gap',
+  'height',
+  'inlineSize',
+  'inset',
+  'insetBlock',
+  'insetBlockEnd',
+  'insetBlockStart',
+  'insetInline',
+  'insetInlineEnd',
+  'insetInlineStart',
+  'left',
+  'margin',
+  'marginBlock',
+  'marginBlockEnd',
+  'marginBlockStart',
+  'marginBottom',
+  'marginInline',
+  'marginInlineEnd',
+  'marginInlineStart',
+  'marginLeft',
+  'marginRight',
+  'marginTop',
+  'maxBlockSize',
+  'maxHeight',
+  'maxInlineSize',
+  'maxWidth',
+  'minBlockSize',
+  'minHeight',
+  'minInlineSize',
+  'minWidth',
+  'padding',
+  'paddingBlock',
+  'paddingBlockEnd',
+  'paddingBlockStart',
+  'paddingBottom',
+  'paddingInline',
+  'paddingInlineEnd',
+  'paddingInlineStart',
+  'paddingLeft',
+  'paddingRight',
+  'paddingTop',
+  'right',
+  'rowGap',
+  'top',
+  'width'
+]);
+
+if (version.experimental) {
+  lengthStyleKeySet.add('outlineOffset');
+  lengthStyleKeySet.add('outlineWidth');
+}

packages/react-strict-dom/src/native/stylex/lengthProps.js

@@ -2028,11 +2028,11 @@ exports[`<html.*> viewport width lengths are scaled according to viewport width:
   ref={[Function]}
   style={
     {
-      "borderWidth": 3.75,
+      "borderWidth": 0.75,
       "boxSizing": "content-box",
       "height": 75,
       "margin": 15,
-      "padding": 11.25,
+      "padding": 24,
       "position": "static",
       "transform": [
         {
@@ -2051,6 +2051,8 @@ exports[`<html.*> viewport width lengths are scaled according to viewport width:
     style={
       {
         "boxSizing": "content-box",
+        "fontSize": 24,
+        "lineHeight": 24,
         "position": "static",
       }
     }

packages/react-strict-dom/tests/__snapshots__/html-test.native.js.snap-native

@@ -1641,12 +1641,16 @@ describe('<html.*>', () => {
 
       const styles = css.create({
         container: {
+          borderWidth: '1px',
+          height: '100px',
           margin: '20px',
-          padding: '15px',
+          padding: '2em',
           width: '200px',
-          height: '100px',
-          borderWidth: '5px',
           transform: 'translateX(10px) translateY(20px)'
+        },
+        text: {
+          fontSize: '2rem',
+          lineHeight: '1em'
         }
       });
 
@@ -1655,12 +1659,13 @@ describe('<html.*>', () => {
         root = create(
           <ViewportProvider viewportWidth={1280}>
             <html.div style={styles.container}>
-              <html.span>Scaled content</html.span>
+              <html.span style={styles.text}>Scaled content</html.span>
             </html.div>
           </ViewportProvider>
         );
       });
 
+      // scale factor 0.75
       expect(root.toJSON()).toMatchSnapshot('scaled lengths');
 
       ReactNative.useWindowDimensions.mockRestore();