react-native-windows 0.79.5 → 0.80.0-preview.10

package/Libraries/StyleSheet/StyleSheetExports.js

@@ -0,0 +1,210 @@
+/**
+ * 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
+ * @format
+ */
+
+'use strict';
+
+import type {____Styles_Internal} from './StyleSheetTypes';
+
+import composeStyles from '../../src/private/styles/composeStyles';
+import flatten from './flattenStyle';
+
+const ReactNativeStyleAttributes =
+  require('../Components/View/ReactNativeStyleAttributes').default;
+const PixelRatio = require('../Utilities/PixelRatio').default;
+
+let hairlineWidth: number = PixelRatio.roundToNearestPixel(0.4);
+if (hairlineWidth === 0) {
+  hairlineWidth = 1 / PixelRatio.get();
+}
+
+const absoluteFill: {
+  +bottom: 0,
+  +left: 0,
+  +position: 'absolute',
+  +right: 0,
+  +top: 0,
+} = {
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+};
+if (__DEV__) {
+  Object.freeze(absoluteFill);
+}
+
+/**
+ * A StyleSheet is an abstraction similar to CSS StyleSheets
+ *
+ * Create a new StyleSheet:
+ *
+ * ```
+ * const styles = StyleSheet.create({
+ *   container: {
+ *     borderRadius: 4,
+ *     borderWidth: 0.5,
+ *     borderColor: '#d6d7da',
+ *   },
+ *   title: {
+ *     fontSize: 19,
+ *     fontWeight: 'bold',
+ *   },
+ *   activeTitle: {
+ *     color: 'red',
+ *   },
+ * });
+ * ```
+ *
+ * Use a StyleSheet:
+ *
+ * ```
+ * <View style={styles.container}>
+ *   <Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
+ * </View>
+ * ```
+ *
+ * Code quality:
+ *
+ *  - By moving styles away from the render function, you're making the code
+ *    easier to understand.
+ *  - Naming the styles is a good way to add meaning to the low level components
+ *  in the render function, and encourage reuse.
+ *  - In most IDEs, using `StyleSheet.create()` will offer static type checking
+ *  and suggestions to help you write valid styles.
+ *
+ */
+export default {
+  /**
+   * This is defined as the width of a thin line on the platform. It can be
+   * used as the thickness of a border or division between two elements.
+   * Example:
+   * ```
+   *   {
+   *     borderBottomColor: '#bbb',
+   *     borderBottomWidth: StyleSheet.hairlineWidth
+   *   }
+   * ```
+   *
+   * This constant will always be a round number of pixels (so a line defined
+   * by it look crisp) and will try to match the standard width of a thin line
+   * on the underlying platform. However, you should not rely on it being a
+   * constant size, because on different platforms and screen densities its
+   * value may be calculated differently.
+   *
+   * A line with hairline width may not be visible if your simulator is downscaled.
+   */
+  hairlineWidth,
+
+  /**
+   * A very common pattern is to create overlays with position absolute and zero positioning,
+   * so `absoluteFill` can be used for convenience and to reduce duplication of these repeated
+   * styles.
+   */
+  absoluteFill: (absoluteFill: any), // TODO: This should be updated after we fix downstream Flow sites.
+
+  /**
+   * Sometimes you may want `absoluteFill` but with a couple tweaks - `absoluteFillObject` can be
+   * used to create a customized entry in a `StyleSheet`, e.g.:
+   *
+   *   const styles = StyleSheet.create({
+   *     wrapper: {
+   *       ...StyleSheet.absoluteFillObject,
+   *       top: 10,
+   *       backgroundColor: 'transparent',
+   *     },
+   *   });
+   */
+  absoluteFillObject: absoluteFill,
+
+  /**
+   * Combines two styles such that `style2` will override any styles in `style1`.
+   * If either style is falsy, the other one is returned without allocating an
+   * array, saving allocations and maintaining reference equality for
+   * PureComponent checks.
+   */
+  compose: composeStyles,
+
+  /**
+   * Flattens an array of style objects, into one aggregated style object.
+   *
+   * Example:
+   * ```
+   * const styles = StyleSheet.create({
+   *   listItem: {
+   *     flex: 1,
+   *     fontSize: 16,
+   *     color: 'white'
+   *   },
+   *   selectedListItem: {
+   *     color: 'green'
+   *   }
+   * });
+   *
+   * StyleSheet.flatten([styles.listItem, styles.selectedListItem])
+   * // returns { flex: 1, fontSize: 16, color: 'green' }
+   * ```
+   */
+  flatten,
+
+  /**
+   * WARNING: EXPERIMENTAL. Breaking changes will probably happen a lot and will
+   * not be reliably announced. The whole thing might be deleted, who knows? Use
+   * at your own risk.
+   *
+   * Sets a function to use to pre-process a style property value. This is used
+   * internally to process color and transform values. You should not use this
+   * unless you really know what you are doing and have exhausted other options.
+   */
+  setStyleAttributePreprocessor(
+    property: string,
+    process: (nextProp: mixed) => mixed,
+  ) {
+    let value;
+
+    if (ReactNativeStyleAttributes[property] === true) {
+      value = {process};
+    } else if (typeof ReactNativeStyleAttributes[property] === 'object') {
+      value = {...ReactNativeStyleAttributes[property], process};
+    } else {
+      console.error(`${property} is not a valid style attribute`);
+      return;
+    }
+
+    if (
+      __DEV__ &&
+      typeof value.process === 'function' &&
+      typeof ReactNativeStyleAttributes[property]?.process === 'function' &&
+      value.process !== ReactNativeStyleAttributes[property]?.process
+    ) {
+      console.warn(`Overwriting ${property} style attribute preprocessor`);
+    }
+
+    ReactNativeStyleAttributes[property] = value;
+  },
+
+  /**
+   * An identity function for creating style sheets.
+   */
+  // $FlowFixMe[unsupported-variance-annotation]
+  create<+S: ____Styles_Internal>(obj: S): $ReadOnly<S> {
+    // TODO: This should return S as the return type. But first,
+    // we need to codemod all the callsites that are typing this
+    // return value as a number (even though it was opaque).
+    if (__DEV__) {
+      for (const key in obj) {
+        if (obj[key]) {
+          Object.freeze(obj[key]);
+        }
+      }
+    }
+    return obj;
+  },
+};

package/Libraries/StyleSheet/StyleSheetExports.js.flow

@@ -0,0 +1,112 @@
+/**
+ * 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
+ * @format
+ */
+
+import type {____Styles_Internal} from './StyleSheetTypes';
+
+import composeStyles from '../../src/private/styles/composeStyles';
+import flattenStyle from './flattenStyle';
+
+/**
+ * This is defined as the width of a thin line on the platform. It can be
+ * used as the thickness of a border or division between two elements.
+ * Example:
+ * ```
+ *   {
+ *     borderBottomColor: '#bbb',
+ *     borderBottomWidth: StyleSheet.hairlineWidth
+ *   }
+ * ```
+ *
+ * This constant will always be a round number of pixels (so a line defined
+ * by it look crisp) and will try to match the standard width of a thin line
+ * on the underlying platform. However, you should not rely on it being a
+ * constant size, because on different platforms and screen densities its
+ * value may be calculated differently.
+ */
+declare export const hairlineWidth: number;
+
+/**
+ * A very common pattern is to create overlays with position absolute and zero positioning,
+ * so `absoluteFill` can be used for convenience and to reduce duplication of these repeated
+ * styles.
+ */
+declare export const absoluteFill: any;
+
+/**
+ * Sometimes you may want `absoluteFill` but with a couple tweaks - `absoluteFillObject` can be
+ * used to create a customized entry in a `StyleSheet`, e.g.:
+ *
+ *   const styles = StyleSheet.create({
+ *     wrapper: {
+ *       ...StyleSheet.absoluteFillObject,
+ *       top: 10,
+ *       backgroundColor: 'transparent',
+ *     },
+ *   });
+ */
+declare export const absoluteFillObject: {
+  +bottom: 0,
+  +left: 0,
+  +position: 'absolute',
+  +right: 0,
+  +top: 0,
+};
+
+/**
+ * Combines two styles such that style2 will override any styles in style1.
+ * If either style is falsy, the other one is returned without allocating
+ * an array, saving allocations and maintaining reference equality for
+ * PureComponent checks.
+ */
+declare export const compose: typeof composeStyles;
+
+/**
+ * Flattens an array of style objects, into one aggregated style object.
+ *
+ * Example:
+ * ```
+ * const styles = StyleSheet.create({
+ *   listItem: {
+ *     flex: 1,
+ *     fontSize: 16,
+ *     color: 'white'
+ *   },
+ *   selectedListItem: {
+ *     color: 'green'
+ *   }
+ * });
+ *
+ * StyleSheet.flatten([styles.listItem, styles.selectedListItem])
+ * // returns { flex: 1, fontSize: 16, color: 'green' }
+ * ```
+ */
+declare export const flatten: typeof flattenStyle;
+
+/**
+ * WARNING: EXPERIMENTAL. Breaking changes will probably happen a lot and will
+ * not be reliably announced. The whole thing might be deleted, who knows? Use
+ * at your own risk.
+ *
+ * Sets a function to use to pre-process a style property value. This is used
+ * internally to process color and transform values. You should not use this
+ * unless you really know what you are doing and have exhausted other options.
+ */
+declare export const setStyleAttributePreprocessor: (
+  property: string,
+  process: (nextProp: any) => any,
+) => void;
+
+/**
+ * An identity function for creating style sheets.
+ */
+// $FlowFixMe[unsupported-variance-annotation]
+declare export const create: <+S: ____Styles_Internal>(
+  obj: S & ____Styles_Internal,
+) => $ReadOnly<S>;

package/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -368,7 +368,7 @@ export type BlendMode =
   | 'luminosity';
 
 export type GradientValue = {
-  type: 'linearGradient';
+  type: 'linear-gradient';
   // Angle or direction enums
   direction?: string | undefined;
   colorStops: ReadonlyArray<{

package/Libraries/StyleSheet/StyleSheetTypes.js

@@ -10,6 +10,7 @@
 
 'use strict';
 
+import type {WithAnimatedValue} from '../Animated/createAnimatedComponent';
 import type AnimatedNode from '../Animated/nodes/AnimatedNode';
 import type {ImageResizeMode} from './../Image/ImageResizeMode';
 import type {
@@ -20,6 +21,9 @@ import type {
   ____ViewStyle_InternalOverrides,
 } from './private/_StyleSheetTypesOverrides';
 import type {____TransformStyle_Internal} from './private/_TransformStyle';
+import type {ColorValue} from './StyleSheet';
+
+export type {____TransformStyle_Internal};
 
 declare export opaque type NativeColorValue;
 export type ____ColorValue_Internal = null | string | number | NativeColorValue;
@@ -35,8 +39,7 @@ export type EdgeInsetsValue = {
   bottom: number,
 };
 
-export type DimensionValue = number | string | 'auto' | AnimatedNode | null;
-export type AnimatableNumericValue = number | AnimatedNode;
+export type DimensionValue = number | string | 'auto' | null;
 
 export type CursorValue = 'auto' | 'pointer';
 
@@ -691,7 +694,7 @@ export type ____ShadowStyle_InternalCore = $ReadOnly<{
    * Sets the drop shadow opacity (multiplied by the color's alpha component)
    * @platform ios
    */
-  shadowOpacity?: AnimatableNumericValue,
+  shadowOpacity?: number,
   /**
    * Sets the drop shadow blur radius
    * @platform ios
@@ -723,8 +726,8 @@ export type DropShadowValue = {
   color?: ____ColorValue_Internal,
 };
 
-export type GradientValue = {
-  type: 'linearGradient',
+type LinearGradientValue = {
+  type: 'linear-gradient',
   // Angle or direction enums
   direction?: string,
   colorStops: $ReadOnlyArray<{
@@ -733,6 +736,50 @@ export type GradientValue = {
   }>,
 };
 
+type RadialExtent =
+  | 'closest-corner'
+  | 'closest-side'
+  | 'farthest-corner'
+  | 'farthest-side';
+export type RadialGradientPosition =
+  | {
+      top: number | string,
+      left: number | string,
+    }
+  | {
+      top: number | string,
+      right: number | string,
+    }
+  | {
+      bottom: number | string,
+      left: number | string,
+    }
+  | {
+      bottom: number | string,
+      right: number | string,
+    };
+
+export type RadialGradientShape = 'circle' | 'ellipse';
+export type RadialGradientSize =
+  | RadialExtent
+  | {
+      x: string | number,
+      y: string | number,
+    };
+
+type RadialGradientValue = {
+  type: 'radial-gradient',
+  shape: RadialGradientShape,
+  size: RadialGradientSize,
+  position: RadialGradientPosition,
+  colorStops: $ReadOnlyArray<{
+    color: ____ColorValue_Internal,
+    positions?: $ReadOnlyArray<string>,
+  }>,
+};
+
+export type BackgroundImageValue = LinearGradientValue | RadialGradientValue;
+
 export type BoxShadowValue = {
   offsetX: number | string,
   offsetY: number | string,
@@ -760,10 +807,7 @@ type ____BlendMode_Internal =
   | 'color'
   | 'luminosity';
 
-export type ____ViewStyle_InternalCore = $ReadOnly<{
-  ...$Exact<____LayoutStyle_Internal>,
-  ...$Exact<____ShadowStyle_Internal>,
-  ...$Exact<____TransformStyle_Internal>,
+export type ____ViewStyle_InternalBase = $ReadOnly<{
   backfaceVisibility?: 'visible' | 'hidden',
   backgroundColor?: ____ColorValue_Internal,
   borderColor?: ____ColorValue_Internal,
@@ -777,42 +821,49 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
   borderBlockColor?: ____ColorValue_Internal,
   borderBlockEndColor?: ____ColorValue_Internal,
   borderBlockStartColor?: ____ColorValue_Internal,
-  borderRadius?: AnimatableNumericValue | string,
-  borderBottomEndRadius?: AnimatableNumericValue | string,
-  borderBottomLeftRadius?: AnimatableNumericValue | string,
-  borderBottomRightRadius?: AnimatableNumericValue | string,
-  borderBottomStartRadius?: AnimatableNumericValue | string,
-  borderEndEndRadius?: AnimatableNumericValue | string,
-  borderEndStartRadius?: AnimatableNumericValue | string,
-  borderStartEndRadius?: AnimatableNumericValue | string,
-  borderStartStartRadius?: AnimatableNumericValue | string,
-  borderTopEndRadius?: AnimatableNumericValue | string,
-  borderTopLeftRadius?: AnimatableNumericValue | string,
-  borderTopRightRadius?: AnimatableNumericValue | string,
-  borderTopStartRadius?: AnimatableNumericValue | string,
+  borderRadius?: number | string,
+  borderBottomEndRadius?: number | string,
+  borderBottomLeftRadius?: number | string,
+  borderBottomRightRadius?: number | string,
+  borderBottomStartRadius?: number | string,
+  borderEndEndRadius?: number | string,
+  borderEndStartRadius?: number | string,
+  borderStartEndRadius?: number | string,
+  borderStartStartRadius?: number | string,
+  borderTopEndRadius?: number | string,
+  borderTopLeftRadius?: number | string,
+  borderTopRightRadius?: number | string,
+  borderTopStartRadius?: number | string,
   borderStyle?: 'solid' | 'dotted' | 'dashed',
-  borderWidth?: AnimatableNumericValue,
-  borderBottomWidth?: AnimatableNumericValue,
-  borderEndWidth?: AnimatableNumericValue,
-  borderLeftWidth?: AnimatableNumericValue,
-  borderRightWidth?: AnimatableNumericValue,
-  borderStartWidth?: AnimatableNumericValue,
-  borderTopWidth?: AnimatableNumericValue,
-  opacity?: AnimatableNumericValue,
+  borderWidth?: number,
+  borderBottomWidth?: number,
+  borderEndWidth?: number,
+  borderLeftWidth?: number,
+  borderRightWidth?: number,
+  borderStartWidth?: number,
+  borderTopWidth?: number,
+  opacity?: number,
   outlineColor?: ____ColorValue_Internal,
-  outlineOffset?: AnimatableNumericValue,
+  outlineOffset?: number,
   outlineStyle?: 'solid' | 'dotted' | 'dashed',
-  outlineWidth?: AnimatableNumericValue,
+  outlineWidth?: number,
   elevation?: number,
   pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only',
   cursor?: CursorValue,
   boxShadow?: $ReadOnlyArray<BoxShadowValue> | string,
   filter?: $ReadOnlyArray<FilterFunction> | string,
   mixBlendMode?: ____BlendMode_Internal,
-  experimental_backgroundImage?: $ReadOnlyArray<GradientValue> | string,
+  experimental_backgroundImage?: $ReadOnlyArray<BackgroundImageValue> | string,
   isolation?: 'auto' | 'isolate',
 }>;
 
+export type ____ViewStyle_InternalCore = $ReadOnly<{
+  ...$Exact<____LayoutStyle_Internal>,
+  ...$Exact<____ShadowStyle_Internal>,
+  ...$Exact<____TransformStyle_Internal>,
+  ...____ViewStyle_InternalBase,
+}>;
+
 export type ____ViewStyle_Internal = $ReadOnly<{
   ...____ViewStyle_InternalCore,
   ...____ViewStyle_InternalOverrides,
@@ -867,7 +918,7 @@ export type ____FontWeight_Internal =
   | 'heavy'
   | 'black';
 
-export type ____FontVariantArray_Internal = $ReadOnlyArray<
+export type ____FontVariant_Internal =
   | 'small-caps'
   | 'oldstyle-nums'
   | 'lining-nums'
@@ -900,11 +951,12 @@ export type ____FontVariantArray_Internal = $ReadOnlyArray<
   | 'stylistic-seventeen'
   | 'stylistic-eighteen'
   | 'stylistic-nineteen'
-  | 'stylistic-twenty',
->;
+  | 'stylistic-twenty';
 
-export type ____TextStyle_InternalCore = $ReadOnly<{
-  ...$Exact<____ViewStyle_Internal>,
+export type ____FontVariantArray_Internal =
+  $ReadOnlyArray<____FontVariant_Internal>;
+
+type ____TextStyle_InternalBase = $ReadOnly<{
   color?: ____ColorValue_Internal,
   fontFamily?: string,
   fontSize?: number,
@@ -935,6 +987,11 @@ export type ____TextStyle_InternalCore = $ReadOnly<{
   writingDirection?: 'auto' | 'ltr' | 'rtl',
 }>;
 
+export type ____TextStyle_InternalCore = $ReadOnly<{
+  ...$Exact<____ViewStyle_Internal>,
+  ...____TextStyle_InternalBase,
+}>;
+
 export type ____TextStyle_Internal = $ReadOnly<{
   ...____TextStyle_InternalCore,
   ...____TextStyle_InternalOverrides,
@@ -945,7 +1002,8 @@ export type ____ImageStyle_InternalCore = $ReadOnly<{
   resizeMode?: ImageResizeMode,
   objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none',
   tintColor?: ____ColorValue_Internal,
-  overlayColor?: string,
+  overlayColor?: ColorValue,
+  overflow?: 'visible' | 'hidden',
 }>;
 
 export type ____ImageStyle_Internal = $ReadOnly<{
@@ -958,7 +1016,7 @@ export type ____DangerouslyImpreciseStyle_InternalCore = $ReadOnly<{
   resizeMode?: ImageResizeMode,
   objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none',
   tintColor?: ____ColorValue_Internal,
-  overlayColor?: string,
+  overlayColor?: ColorValue,
 }>;
 
 export type ____DangerouslyImpreciseStyle_Internal = $ReadOnly<{
@@ -967,24 +1025,28 @@ export type ____DangerouslyImpreciseStyle_Internal = $ReadOnly<{
   ...
 }>;
 
-type GenericStyleProp<+T> =
+export type StyleProp<+T> =
   | null
   | void
   | T
   | false
   | ''
-  | $ReadOnlyArray<GenericStyleProp<T>>;
+  | $ReadOnlyArray<StyleProp<T>>;
 
-export type ____DangerouslyImpreciseStyleProp_Internal = GenericStyleProp<
+export type ____DangerouslyImpreciseStyleProp_Internal = StyleProp<
   Partial<____DangerouslyImpreciseStyle_Internal>,
 >;
-export type ____ViewStyleProp_Internal = GenericStyleProp<
+
+export type ____DangerouslyImpreciseAnimatedStyleProp_Internal =
+  WithAnimatedValue<StyleProp<Partial<____DangerouslyImpreciseStyle_Internal>>>;
+
+export type ____ViewStyleProp_Internal = StyleProp<
   $ReadOnly<Partial<____ViewStyle_Internal>>,
 >;
-export type ____TextStyleProp_Internal = GenericStyleProp<
+export type ____TextStyleProp_Internal = StyleProp<
   $ReadOnly<Partial<____TextStyle_Internal>>,
 >;
-export type ____ImageStyleProp_Internal = GenericStyleProp<
+export type ____ImageStyleProp_Internal = StyleProp<
   $ReadOnly<Partial<____ImageStyle_Internal>>,
 >;
 
@@ -995,10 +1057,26 @@ export type ____Styles_Internal = {
   ...
 };
 
-export type ____FlattenStyleProp_Internal<
-  +TStyleProp: GenericStyleProp<mixed>,
-> = TStyleProp extends null | void | false | ''
+// A depth limiter, to avoid TS2589 in TypeScript. This and
+// ____FlattenStyleProp_Helper should be considered internal.
+type FlattenDepthLimiter = [void, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+type ____FlattenStyleProp_Helper<
+  +TStyleProp: StyleProp<mixed>,
+  Depth: $Values<FlattenDepthLimiter> = 9,
+> = Depth extends 0
   ? empty
-  : TStyleProp extends $ReadOnlyArray<infer V>
-    ? ____FlattenStyleProp_Internal<V>
-    : TStyleProp;
+  : TStyleProp extends null | void | false | ''
+    ? empty
+    : // When TStyleProp is an array, recurse with decremented Depth
+      TStyleProp extends $ReadOnlyArray<infer V>
+      ? ____FlattenStyleProp_Helper<
+          V,
+          Depth extends number ? FlattenDepthLimiter[Depth] : 0,
+        >
+      : TStyleProp;
+
+export type ____FlattenStyleProp_Internal<+TStyleProp: StyleProp<mixed>> =
+  ____FlattenStyleProp_Helper<TStyleProp> extends empty
+    ? // $FlowFixMe[unclear-type]
+      any
+    : ____FlattenStyleProp_Helper<TStyleProp>;

package/Libraries/StyleSheet/flattenStyle.js

@@ -10,13 +10,22 @@
 
 'use strict';
 
-import type {DangerouslyImpreciseStyleProp} from './StyleSheet';
-import type {____FlattenStyleProp_Internal} from './StyleSheetTypes';
+import type AnimatedNode from '../Animated/nodes/AnimatedNode';
+import type {
+  ____DangerouslyImpreciseAnimatedStyleProp_Internal,
+  ____FlattenStyleProp_Internal,
+} from './StyleSheetTypes';
 
-function flattenStyle<TStyleProp: DangerouslyImpreciseStyleProp>(
+type NonAnimatedNodeObject<TStyleProp> = TStyleProp extends AnimatedNode
+  ? empty
+  : TStyleProp;
+
+function flattenStyle<
+  TStyleProp: ____DangerouslyImpreciseAnimatedStyleProp_Internal,
+>(
   style: ?TStyleProp,
   // $FlowFixMe[underconstrained-implicit-instantiation]
-): ?____FlattenStyleProp_Internal<TStyleProp> {
+): ?NonAnimatedNodeObject<____FlattenStyleProp_Internal<TStyleProp>> {
   if (style === null || typeof style !== 'object') {
     return undefined;
   }
@@ -35,6 +44,7 @@ function flattenStyle<TStyleProp: DangerouslyImpreciseStyleProp>(
       for (const key in computedStyle) {
         // $FlowFixMe[incompatible-use]
         // $FlowFixMe[invalid-computed-prop]
+        // $FlowFixMe[prop-missing]
         result[key] = computedStyle[key];
       }
     }