From e30b8577d2b6825c8fd41bbce6103ef195d66c4c Mon Sep 17 00:00:00 2001
From: Naman Goel <nmn@users.noreply.github.com>
Date: Fri, 17 Jan 2025 16:38:35 -0800
Subject: [PATCH 1/2] feat: exported return types of 'stylex.types.*' fns

---
 packages/stylex/src/stylex.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/stylex/src/stylex.js b/packages/stylex/src/stylex.js
index 9d01cae2..471e5c11 100644
--- a/packages/stylex/src/stylex.js
+++ b/packages/stylex/src/stylex.js
@@ -36,6 +36,22 @@ import type {
   TransformFunction,
   TransformList,
 } from './VarTypes';
+export type {
+  ValueWithDefault,
+  Angle,
+  Color,
+  Url,
+  Image,
+  Integer,
+  LengthPercentage,
+  Length,
+  Percentage,
+  Num,
+  Resolution,
+  Time,
+  TransformFunction,
+  TransformList,
+} from './VarTypes';
 
 export type {
   VarGroup,

From 72ab4b3f1d57e4e3419da953884c7718b5e78a2a Mon Sep 17 00:00:00 2001
From: Naman Goel <nmn@users.noreply.github.com>
Date: Tue, 21 Jan 2025 19:41:30 -0800
Subject: [PATCH 2/2] chore: move type Types to stylex.Types.*

---
 packages/stylex/src/VarTypes.js             |  7 +------
 packages/stylex/src/stylex.js               | 19 ++-----------------
 packages/stylex/src/util-types.js           | 15 +++++++++++++++
 packages/stylex/type-tests/theming1.js.flow | 13 +++++++++++--
 4 files changed, 29 insertions(+), 25 deletions(-)
 create mode 100644 packages/stylex/src/util-types.js

diff --git a/packages/stylex/src/VarTypes.js b/packages/stylex/src/VarTypes.js
index bda409b0..9e9cb0f0 100644
--- a/packages/stylex/src/VarTypes.js
+++ b/packages/stylex/src/VarTypes.js
@@ -7,12 +7,7 @@
  * @flow strict
  */
 
-export type ValueWithDefault<+T> =
-  | T
-  | $ReadOnly<{
-      default: ValueWithDefault<T>,
-      [string]: ValueWithDefault<T>,
-    }>;
+import type { ValueWithDefault } from './util-types';
 
 export type CSSSyntax =
   | '*'
diff --git a/packages/stylex/src/stylex.js b/packages/stylex/src/stylex.js
index 471e5c11..9d5f8352 100644
--- a/packages/stylex/src/stylex.js
+++ b/packages/stylex/src/stylex.js
@@ -21,23 +21,6 @@ import type {
   MapNamespaces,
 } from './StyleXTypes';
 import type {
-  ValueWithDefault,
-  Angle,
-  Color,
-  Url,
-  Image,
-  Integer,
-  LengthPercentage,
-  Length,
-  Percentage,
-  Num,
-  Resolution,
-  Time,
-  TransformFunction,
-  TransformList,
-} from './VarTypes';
-export type {
-  ValueWithDefault,
   Angle,
   Color,
   Url,
@@ -52,6 +35,8 @@ export type {
   TransformFunction,
   TransformList,
 } from './VarTypes';
+import type { ValueWithDefault } from './util-types';
+export * as Types from './VarTypes';
 
 export type {
   VarGroup,
diff --git a/packages/stylex/src/util-types.js b/packages/stylex/src/util-types.js
new file mode 100644
index 00000000..ae8029d1
--- /dev/null
+++ b/packages/stylex/src/util-types.js
@@ -0,0 +1,15 @@
+/**
+ * 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
+ */
+
+export type ValueWithDefault<+T> =
+  | T
+  | $ReadOnly<{
+      default: ValueWithDefault<T>,
+      [string]: ValueWithDefault<T>,
+    }>;
diff --git a/packages/stylex/type-tests/theming1.js.flow b/packages/stylex/type-tests/theming1.js.flow
index c2e63f6e..897b3b0e 100644
--- a/packages/stylex/type-tests/theming1.js.flow
+++ b/packages/stylex/type-tests/theming1.js.flow
@@ -10,7 +10,8 @@
 /* eslint-disable no-unused-vars */
 
 import * as React from 'react';
-import stylex from '../src/stylex';
+import * as stylex from '../src/stylex';
+import stylexLegacy from '../src/stylex';
 import type { StyleXVar, VarGroup, Theme } from '../src/StyleXTypes';
 
 const DARK = '@media (prefers-color-scheme: dark)';
@@ -52,7 +53,7 @@ const correctTheme = stylex.createTheme(buttonTokens, {
 
 correctTheme as Theme<typeof buttonTokens, string>;
 
-const result: string = stylex(correctTheme);
+const result: string = stylexLegacy(correctTheme);
 const result2: $ReadOnly<{
   className?: string,
   style?: $ReadOnly<{ [string]: string | number }>,
@@ -141,6 +142,14 @@ const typedTokens = stylex.defineVars({
   shortAnimation: stylex.types.time<string | 0>('0.5s'),
 });
 
+const _bgColor: StyleXVar<stylex.Types.Color<string>> = typedTokens.bgColor;
+const _cornerRadius: StyleXVar<stylex.Types.Length<string | number>> =
+  typedTokens.cornerRadius;
+const _translucent: StyleXVar<stylex.Types.Num<number>> =
+  typedTokens.translucent;
+const _shortAnimation: StyleXVar<stylex.Types.Time<string | 0>> =
+  typedTokens.shortAnimation;
+
 const correctlyTypedTheme = stylex.createTheme(typedTokens, {
   bgColor: stylex.types.color('red'),
   cornerRadius: stylex.types.length('4px'),