From 370a4ad4e2cffc568f46c916ecc8edfde04e4d95 Mon Sep 17 00:00:00 2001
From: Luna Wei <luwe@meta.com>
Date: Thu, 11 May 2023 17:50:22 -0700
Subject: [PATCH] Make the fabric-only CSS aliases experimental (#37338)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/37338

Changelog: [General] [Changed] - Change the way types for New Architecture/experimental APIs are exposed.

Reviewed By: NickGerleman

Differential Revision: D45699522

fbshipit-source-id: 8b74dd8cc7b111a91ef5b375acb2f6554e108c42
---
 .../Libraries/StyleSheet/StyleSheetTypes.d.ts |  21 +--
 packages/react-native/types/experimental.d.ts | 136 ++++++++++++++++++
 2 files changed, 137 insertions(+), 20 deletions(-)
 create mode 100644 packages/react-native/types/experimental.d.ts

diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts
index df6b5c4afdaf86..8eb5e3c1e76ec7 100644
--- a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts
+++ b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts
@@ -18,7 +18,7 @@ type FlexAlignType =
   | 'stretch'
   | 'baseline';
 
-type DimensionValue =
+export type DimensionValue =
   | number
   | 'auto'
   | `${number}%`
@@ -69,13 +69,6 @@ export interface FlexStyle {
   flexShrink?: number | undefined;
   flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse' | undefined;
   height?: DimensionValue | undefined;
-  inset?: DimensionValue | undefined;
-  insetBlock?: DimensionValue | undefined;
-  insetBlockEnd?: DimensionValue | undefined;
-  insetBlockStart?: DimensionValue | undefined;
-  insetInline?: DimensionValue | undefined;
-  insetInlineEnd?: DimensionValue | undefined;
-  insetInlineStart?: DimensionValue | undefined;
   justifyContent?:
     | 'flex-start'
     | 'flex-end'
@@ -86,15 +79,9 @@ export interface FlexStyle {
     | undefined;
   left?: DimensionValue | undefined;
   margin?: DimensionValue | undefined;
-  marginBlock?: DimensionValue | undefined;
-  marginBlockEnd?: DimensionValue | undefined;
-  marginBlockStart?: DimensionValue | undefined;
   marginBottom?: DimensionValue | undefined;
   marginEnd?: DimensionValue | undefined;
   marginHorizontal?: DimensionValue | undefined;
-  marginInline?: DimensionValue | undefined;
-  marginInlineEnd?: DimensionValue | undefined;
-  marginInlineStart?: DimensionValue | undefined;
   marginLeft?: DimensionValue | undefined;
   marginRight?: DimensionValue | undefined;
   marginStart?: DimensionValue | undefined;
@@ -107,14 +94,8 @@ export interface FlexStyle {
   overflow?: 'visible' | 'hidden' | 'scroll' | undefined;
   padding?: DimensionValue | undefined;
   paddingBottom?: DimensionValue | undefined;
-  paddingBlock?: DimensionValue | undefined;
-  paddingBlockEnd?: DimensionValue | undefined;
-  paddingBlockStart?: DimensionValue | undefined;
   paddingEnd?: DimensionValue | undefined;
   paddingHorizontal?: DimensionValue | undefined;
-  paddingInline?: DimensionValue | undefined;
-  paddingInlineEnd?: DimensionValue | undefined;
-  paddingInlineStart?: DimensionValue | undefined;
   paddingLeft?: DimensionValue | undefined;
   paddingRight?: DimensionValue | undefined;
   paddingStart?: DimensionValue | undefined;
diff --git a/packages/react-native/types/experimental.d.ts b/packages/react-native/types/experimental.d.ts
new file mode 100644
index 00000000000000..c58c9ffa10ac00
--- /dev/null
+++ b/packages/react-native/types/experimental.d.ts
@@ -0,0 +1,136 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+/**
+ * These are types for things that are present for New Architecture enabled apps
+ * which is currently considered experimental.
+ *
+ * To load the types declared here in an actual project, there are three ways.
+ *
+ * 1. If your `tsconfig.json` already has a `"types"` array in the `"compilerOptions"` section,
+ * is to add `"react-native/types/experimental"` to the `"types"` array.
+ *
+ * 2. Alternatively, a specific import syntax can to be used from a typescript file.
+ * This module does not exist in reality, which is why the {} is important:
+ *
+ * ```ts
+ * import {} from 'react-native/types/experimental'
+ * ```
+ *
+ * 3. It is also possible to include it through a triple-slash reference:
+ *
+ * ```ts
+ * /// <reference types="react-native/types/experimental" />
+ * ```
+ *
+ * Either the import or the reference only needs to appear once, anywhere in the project.
+ */
+
+import {DimensionValue} from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
+
+export {};
+
+declare module '.' {
+  export interface FlexStyle {
+    /**
+     * Equivalent to `top`, `bottom`, `right` and `left`
+     */
+    inset?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `top`, `bottom`
+     */
+    insetBlock?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `bottom`
+     */
+    insetBlockEnd?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `top`
+     */
+    insetBlockStart?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `right` and `left`
+     */
+    insetInline?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `right` or `left`
+     */
+    insetInlineEnd?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `right` or `left`
+     */
+    insetInlineStart?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `marginVertical`
+     */
+    marginBlock?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `marginBottom`
+     */
+    marginBlockEnd?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `marginTop`
+     */
+    marginBlockStart?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `marginHorizontal`
+     */
+    marginInline?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `marginEnd`
+     */
+    marginInlineEnd?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `marginStart`
+     */
+    marginInlineStart?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `paddingVertical`
+     */
+    paddingBlock?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `paddingBottom`
+     */
+    paddingBlockEnd?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `paddingTop`
+     */
+    paddingBlockStart?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `paddingHorizontal`
+     */
+    paddingInline?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `paddingEnd`
+     */
+    paddingInlineEnd?: DimensionValue | undefined;
+
+    /**
+     * Equivalent to `paddingStart`
+     */
+    paddingInlineStart?: DimensionValue | undefined;
+  }
+}