@stylexjs/babel-plugin 0.11.1 → 0.13.0

package/lib/shared/preprocess-rules/legacy-expand-shorthands.js.flow

@@ -0,0 +1,144 @@
+/**
+ * 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 { TStyleValue } from '../common-types';
+
+// TODO: to be added later.
+// const aliases = {
+//   marginInlineStart: (rawValue) => [['marginStart', rawValue]],
+//   marginInlineEnd: (rawValue) => [['marginEnd', rawValue]],
+//   marginInline: (rawValue) => [
+//     ['marginStart', rawValue],
+//     ['marginEnd', rawValue],
+//   ],
+//   paddingInlineStart: (rawValue) => [['paddingStart', rawValue]],
+//   paddingInlineEnd: (rawValue) => [['paddingEnd', rawValue]],
+//   paddingInline: (rawValue) => [
+//     ['paddingStart', rawValue],
+//     ['paddingEnd', rawValue],
+//   ],
+//   // 'borderInlineStart': (rawValue) => [['borderStart', rawValue]],
+//   // 'borderInlineEnd': (rawValue) => [['borderEnd', rawValue]],
+//   // // This will need to change.
+//   // 'borderInline': (rawValue) => [
+//   //   ['borderStart', rawValue],
+//   //   ['borderEnd', rawValue],
+//   // ],
+// };
+
+/**
+ * Shorthand properties:
+ * - [x] all - Should be banned
+ * - [ ] animation
+ * - [ ] background
+ * - [-] border
+ * - [x] border-block-end
+ * - [x] border-block-start
+ * - [ ] border-bottom
+ * - [x] border-color
+ * - [x] border-image
+ * - [x] border-inline-end
+ * - [x] border-inline-start
+ * - [ ] border-left
+ * - [x] border-radius
+ * - [ ] border-right
+ * - [x] border-style
+ * - [ ] border-top
+ * - [x] border-width
+ * - [ ] column-rule
+ * - [ ] columns
+ * - [ ] flex
+ * - [ ] flex-flow
+ * - [ ] font
+ * - [ ] gap
+ * - [ ] grid
+ * - [ ] grid-area
+ * - [ ] grid-column
+ * - [ ] grid-row
+ * - [ ] grid-template
+ * - [ ] list-style
+ * - [x] margin
+ * - [ ] mask
+ * - [ ] offset
+ * - [ ] outline
+ * - [x] overflow
+ * - [x] padding
+ * - [ ] place-content
+ * - [ ] place-items
+ * - [ ] place-self
+ * - [ ] scroll-margin
+ * - [ ] scroll-padding
+ * - [ ] text-decoration
+ * - [ ] text-emphasis
+ * - [ ] transition
+ */
+
+type TReturn = $ReadOnlyArray<[string, TStyleValue]>;
+
+declare const shorthands: $ReadOnly<{
+  [key: string]: (TStyleValue) => TReturn,
+}>;
+
+declare const aliases: {
+  insetBlockStart: (val: TStyleValue) => TReturn,
+  insetBlockEnd: (val: TStyleValue) => TReturn,
+  insetInlineStart: $FlowFixMe,
+  insetInlineEnd: $FlowFixMe,
+  blockSize: (val: TStyleValue) => TReturn,
+  inlineSize: (val: TStyleValue) => TReturn,
+  minBlockSize: (val: TStyleValue) => TReturn,
+  minInlineSize: (val: TStyleValue) => TReturn,
+  maxBlockSize: (val: TStyleValue) => TReturn,
+  maxInlineSize: (val: TStyleValue) => TReturn,
+  borderBlockWidth: $FlowFixMe,
+  borderBlockStyle: $FlowFixMe,
+  borderBlockColor: $FlowFixMe,
+  borderBlockStartWidth: (val: TStyleValue) => TReturn,
+  borderBlockStartStyle: (val: TStyleValue) => TReturn,
+  borderBlockStartColor: (val: TStyleValue) => TReturn,
+  borderBlockEndWidth: (val: TStyleValue) => TReturn,
+  borderBlockEndStyle: (val: TStyleValue) => TReturn,
+  borderBlockEndColor: (val: TStyleValue) => TReturn,
+  borderInlineWidth: $FlowFixMe,
+  borderInlineStyle: $FlowFixMe,
+  borderInlineColor: $FlowFixMe,
+  borderInlineStartWidth: (val: TStyleValue) => TReturn,
+  borderInlineStartStyle: (val: TStyleValue) => TReturn,
+  borderInlineStartColor: (val: TStyleValue) => TReturn,
+  borderInlineEndWidth: (val: TStyleValue) => TReturn,
+  borderInlineEndStyle: (val: TStyleValue) => TReturn,
+  borderInlineEndColor: (val: TStyleValue) => TReturn,
+  borderStartStartRadius: (val: TStyleValue) => TReturn,
+  borderStartEndRadius: (val: TStyleValue) => TReturn,
+  borderEndStartRadius: (val: TStyleValue) => TReturn,
+  borderEndEndRadius: (val: TStyleValue) => TReturn,
+  gridGap: $FlowFixMe,
+  gridRowGap: (value: TStyleValue) => TReturn,
+  gridColumnGap: (value: TStyleValue) => TReturn,
+  marginBlock: $FlowFixMe,
+  marginBlockStart: (val: TStyleValue) => TReturn,
+  marginBlockEnd: (val: TStyleValue) => TReturn,
+  marginInline: $FlowFixMe,
+  marginInlineStart: (val: TStyleValue) => TReturn,
+  marginInlineEnd: (val: TStyleValue) => TReturn,
+  overflowBlock: (value: TStyleValue) => TReturn,
+  overflowInline: (value: TStyleValue) => TReturn,
+  paddingBlock: $FlowFixMe,
+  paddingBlockStart: (val: TStyleValue) => TReturn,
+  paddingBlockEnd: (val: TStyleValue) => TReturn,
+  paddingInline: $FlowFixMe,
+  paddingInlineStart: (val: TStyleValue) => TReturn,
+  paddingInlineEnd: (val: TStyleValue) => TReturn,
+  scrollMarginBlockStart: (value: TStyleValue) => TReturn,
+  scrollMarginBlockEnd: (value: TStyleValue) => TReturn,
+};
+
+declare const expansions: { ...shorthands, ...aliases };
+
+declare export default typeof expansions;

package/lib/shared/preprocess-rules/property-specificity.d.ts

@@ -0,0 +1,78 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+import type { TStyleValue } from '../common-types';
+type TReturn = ReadonlyArray<[string, TStyleValue]>;
+declare const shorthands: Readonly<{
+  [key: string]: ($$PARAM_0$$: TStyleValue) => TReturn;
+}>;
+declare const aliases: {
+  borderHorizontal: any;
+  borderVertical: any;
+  borderBlockStart: any;
+  borderEnd: any;
+  borderBlockEnd: any;
+  borderStart: any;
+  blockSize: (val: TStyleValue) => TReturn;
+  inlineSize: (val: TStyleValue) => TReturn;
+  minBlockSize: (val: TStyleValue) => TReturn;
+  minInlineSize: (val: TStyleValue) => TReturn;
+  maxBlockSize: (val: TStyleValue) => TReturn;
+  maxInlineSize: (val: TStyleValue) => TReturn;
+  borderHorizontalWidth: (val: TStyleValue) => TReturn;
+  borderHorizontalStyle: (val: TStyleValue) => TReturn;
+  borderHorizontalColor: (val: TStyleValue) => TReturn;
+  borderVerticalWidth: (val: TStyleValue) => TReturn;
+  borderVerticalStyle: (val: TStyleValue) => TReturn;
+  borderVerticalColor: (val: TStyleValue) => TReturn;
+  borderBlockStartColor: (value: TStyleValue) => TReturn;
+  borderBlockEndColor: (value: TStyleValue) => TReturn;
+  borderBlockStartStyle: (value: TStyleValue) => TReturn;
+  borderBlockEndStyle: (value: TStyleValue) => TReturn;
+  borderBlockStartWidth: (value: TStyleValue) => TReturn;
+  borderBlockEndWidth: (value: TStyleValue) => TReturn;
+  borderStartColor: (val: TStyleValue) => TReturn;
+  borderEndColor: (val: TStyleValue) => TReturn;
+  borderStartStyle: (val: TStyleValue) => TReturn;
+  borderEndStyle: (val: TStyleValue) => TReturn;
+  borderStartWidth: (val: TStyleValue) => TReturn;
+  borderEndWidth: (val: TStyleValue) => TReturn;
+  borderTopStartRadius: (value: TStyleValue) => TReturn;
+  borderTopEndRadius: (value: TStyleValue) => TReturn;
+  borderBottomStartRadius: (value: TStyleValue) => TReturn;
+  borderBottomEndRadius: (value: TStyleValue) => TReturn;
+  containIntrinsicBlockSize: (value: TStyleValue) => TReturn;
+  containIntrinsicInlineSize: (value: TStyleValue) => TReturn;
+  marginBlockStart: (value: TStyleValue) => TReturn;
+  marginBlockEnd: (value: TStyleValue) => TReturn;
+  marginStart: (val: TStyleValue) => TReturn;
+  marginEnd: (val: TStyleValue) => TReturn;
+  marginHorizontal: (val: TStyleValue) => TReturn;
+  marginVertical: (val: TStyleValue) => TReturn;
+  overflowBlock: (value: TStyleValue) => TReturn;
+  overflowInline: (value: TStyleValue) => TReturn;
+  paddingBlockStart: (rawValue: TStyleValue) => TReturn;
+  paddingBlockEnd: (rawValue: TStyleValue) => TReturn;
+  paddingStart: (val: TStyleValue) => TReturn;
+  paddingEnd: (val: TStyleValue) => TReturn;
+  paddingHorizontal: (val: TStyleValue) => TReturn;
+  paddingVertical: (val: TStyleValue) => TReturn;
+  scrollMarginBlockStart: (value: TStyleValue) => TReturn;
+  scrollMarginBlockEnd: (value: TStyleValue) => TReturn;
+  insetBlockStart: (value: TStyleValue) => TReturn;
+  insetBlockEnd: (value: TStyleValue) => TReturn;
+  start: (val: TStyleValue) => TReturn;
+  end: (val: TStyleValue) => TReturn;
+};
+declare const $$EXPORT_DEFAULT_DECLARATION$$: Readonly</**
+ * > 85 |   ...typeof shorthands,
+ *      |   ^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "object types with complex spreads" is currently not supported.
+ **/
+any>;
+export default $$EXPORT_DEFAULT_DECLARATION$$;

package/lib/shared/preprocess-rules/property-specificity.js.flow

@@ -0,0 +1,87 @@
+/**
+ * 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 { TStyleValue } from '../common-types';
+
+/// # Handle CSS shorthands in a React Native compatible way.
+///
+/// This means:
+/// - disallowing certain properties altogether by throwing errors
+/// - disallowing multiple values within many shorthands
+/// - Treating certain non-standard properties as aliases for real CSS properties
+
+type TReturn = $ReadOnlyArray<[string, TStyleValue]>;
+
+declare const shorthands: $ReadOnly<{
+  [key: string]: (TStyleValue) => TReturn,
+}>;
+
+declare const aliases: {
+  borderHorizontal: $FlowFixMe,
+  borderVertical: $FlowFixMe,
+  borderBlockStart: $FlowFixMe,
+  borderEnd: $FlowFixMe,
+  borderBlockEnd: $FlowFixMe,
+  borderStart: $FlowFixMe,
+  blockSize: (val: TStyleValue) => TReturn,
+  inlineSize: (val: TStyleValue) => TReturn,
+  minBlockSize: (val: TStyleValue) => TReturn,
+  minInlineSize: (val: TStyleValue) => TReturn,
+  maxBlockSize: (val: TStyleValue) => TReturn,
+  maxInlineSize: (val: TStyleValue) => TReturn,
+  borderHorizontalWidth: (val: TStyleValue) => TReturn,
+  borderHorizontalStyle: (val: TStyleValue) => TReturn,
+  borderHorizontalColor: (val: TStyleValue) => TReturn,
+  borderVerticalWidth: (val: TStyleValue) => TReturn,
+  borderVerticalStyle: (val: TStyleValue) => TReturn,
+  borderVerticalColor: (val: TStyleValue) => TReturn,
+  borderBlockStartColor: (value: TStyleValue) => TReturn,
+  borderBlockEndColor: (value: TStyleValue) => TReturn,
+  borderBlockStartStyle: (value: TStyleValue) => TReturn,
+  borderBlockEndStyle: (value: TStyleValue) => TReturn,
+  borderBlockStartWidth: (value: TStyleValue) => TReturn,
+  borderBlockEndWidth: (value: TStyleValue) => TReturn,
+  borderStartColor: (val: TStyleValue) => TReturn,
+  borderEndColor: (val: TStyleValue) => TReturn,
+  borderStartStyle: (val: TStyleValue) => TReturn,
+  borderEndStyle: (val: TStyleValue) => TReturn,
+  borderStartWidth: (val: TStyleValue) => TReturn,
+  borderEndWidth: (val: TStyleValue) => TReturn,
+  borderTopStartRadius: (value: TStyleValue) => TReturn,
+  borderTopEndRadius: (value: TStyleValue) => TReturn,
+  borderBottomStartRadius: (value: TStyleValue) => TReturn,
+  borderBottomEndRadius: (value: TStyleValue) => TReturn,
+  containIntrinsicBlockSize: (value: TStyleValue) => TReturn,
+  containIntrinsicInlineSize: (value: TStyleValue) => TReturn,
+  marginBlockStart: (value: TStyleValue) => TReturn,
+  marginBlockEnd: (value: TStyleValue) => TReturn,
+  marginStart: (val: TStyleValue) => TReturn,
+  marginEnd: (val: TStyleValue) => TReturn,
+  marginHorizontal: (val: TStyleValue) => TReturn,
+  marginVertical: (val: TStyleValue) => TReturn,
+  overflowBlock: (value: TStyleValue) => TReturn,
+  overflowInline: (value: TStyleValue) => TReturn,
+  paddingBlockStart: (rawValue: TStyleValue) => TReturn,
+  paddingBlockEnd: (rawValue: TStyleValue) => TReturn,
+  paddingStart: (val: TStyleValue) => TReturn,
+  paddingEnd: (val: TStyleValue) => TReturn,
+  paddingHorizontal: (val: TStyleValue) => TReturn,
+  paddingVertical: (val: TStyleValue) => TReturn,
+  scrollMarginBlockStart: (value: TStyleValue) => TReturn,
+  scrollMarginBlockEnd: (value: TStyleValue) => TReturn,
+  insetBlockStart: (value: TStyleValue) => TReturn,
+  insetBlockEnd: (value: TStyleValue) => TReturn,
+  start: (val: TStyleValue) => TReturn,
+  end: (val: TStyleValue) => TReturn,
+};
+
+declare export default $ReadOnly<{
+  ...typeof shorthands,
+  ...typeof aliases,
+}>;

package/lib/shared/stylex-consts-utils.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+export type ConstsConfigValue = string | number;
+export type ConstsConfig = Readonly<{ [$$Key$$: string]: ConstsConfigValue }>;

package/lib/shared/stylex-consts-utils.js.flow

@@ -0,0 +1,14 @@
+/**
+ * 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 ConstsConfigValue = string | number;
+
+export type ConstsConfig = $ReadOnly<{
+  [string]: ConstsConfigValue,
+}>;

package/lib/shared/stylex-create-theme.d.ts

@@ -0,0 +1,26 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+import type { InjectableStyle, StyleXOptions } from './common-types';
+declare function styleXCreateTheme(
+  themeVars: {
+    readonly __themeName__: string;
+    readonly [$$Key$$: string]: string;
+  },
+  variables: {
+    readonly [$$Key$$: string]:
+      | string
+      | { default: string; readonly [$$Key$$: string]: string };
+  },
+  options?: StyleXOptions,
+): [
+  { $$css: true; readonly [$$Key$$: string]: string },
+  { [$$Key$$: string]: InjectableStyle },
+];
+export default styleXCreateTheme;

package/lib/shared/stylex-create-theme.js.flow

@@ -0,0 +1,19 @@
+/**
+ * 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 { InjectableStyle, StyleXOptions } from './common-types';
+
+// It takes an object of variables with their values and the original set of variables to override
+// and returns a hashed className with variables overrides.
+//
+declare export default function styleXCreateTheme(
+  themeVars: { +__themeName__: string, +[string]: string },
+  variables: { +[string]: string | { default: string, +[string]: string } },
+  options?: StyleXOptions,
+): [{ $$css: true, +[string]: string }, { [string]: InjectableStyle }];

package/lib/shared/stylex-create.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+import type {
+  RawStyles,
+  InjectableStyle,
+  StyleXOptions,
+  FlatCompiledStyles,
+} from './common-types';
+type ClassPathsInNamespace = {
+  readonly [className: string]: ReadonlyArray<string>;
+};
+declare function styleXCreateSet(
+  namespaces: { readonly [$$Key$$: string]: RawStyles },
+  options?: StyleXOptions,
+): [
+  { [$$Key$$: string]: FlatCompiledStyles },
+  { [$$Key$$: string]: InjectableStyle },
+  { readonly [$$Key$$: string]: ClassPathsInNamespace },
+];
+export default styleXCreateSet;

package/lib/shared/stylex-create.js.flow

@@ -0,0 +1,37 @@
+/**
+ * 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 {
+  RawStyles,
+  InjectableStyle,
+  StyleXOptions,
+  FlatCompiledStyles,
+} from './common-types';
+type ClassPathsInNamespace = {
+  +[className: string]: $ReadOnlyArray<string>,
+};
+
+// This takes the object of styles passed to `stylex.create` and transforms it.
+//   The transformation replaces style values with classNames.
+//
+// It also collects all injected styles along the way.
+// It then returns a tuple of the transformed style Object and an object of injected styles.
+//
+// This function does some basic validation, and then uses `styleXCreateNamespace` to transform
+// each namespace within,
+//
+// Before returning, it ensures that there are no duplicate styles being injected.
+declare export default function styleXCreateSet(
+  namespaces: { +[string]: RawStyles },
+  options?: StyleXOptions,
+): [
+  { [string]: FlatCompiledStyles },
+  { [string]: InjectableStyle },
+  { +[string]: ClassPathsInNamespace },
+];

package/lib/shared/stylex-define-consts.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+import type { InjectableConstStyle, StyleXOptions } from './common-types';
+import type { ConstsConfig } from './stylex-consts-utils';
+declare function styleXDefineConsts<Vars extends ConstsConfig>(
+  constants: Vars,
+  options: Readonly<
+    Omit<Partial<StyleXOptions>, keyof ({ themeName: string })> & {
+      themeName: string;
+    }
+  >,
+): [
+  { [$$Key$$: string]: string | number },
+  { [$$Key$$: string]: InjectableConstStyle },
+];
+export default styleXDefineConsts;

package/lib/shared/stylex-define-consts.js.flow

@@ -0,0 +1,19 @@
+/**
+ * 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 { InjectableConstStyle, StyleXOptions } from './common-types';
+import type { ConstsConfig } from './stylex-consts-utils';
+
+declare export default function styleXDefineConsts<Vars: ConstsConfig>(
+  constants: Vars,
+  options: $ReadOnly<{ ...Partial<StyleXOptions>, themeName: string, ... }>,
+): [
+  { [string]: string | number }, // jsOutput JS output
+  { [string]: InjectableConstStyle }, // metadata for registerinjectableStyles
+];

package/lib/shared/stylex-define-vars.d.ts

@@ -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.
+ *
+ *
+ */
+
+import type { InjectableStyle, StyleXOptions } from './common-types';
+import type { VarsConfig } from './stylex-vars-utils';
+type VarsKeysWithStringValues<Vars extends VarsConfig> = Readonly<{
+  [$$Key$$: keyof Vars]: string;
+}>;
+type VarsObject<Vars extends VarsConfig> = Readonly<
+  Omit<VarsKeysWithStringValues<Vars>, keyof ({ __themeName__: string })> & {
+    __themeName__: string;
+  }
+>;
+declare function styleXDefineVars<Vars extends VarsConfig>(
+  variables: Vars,
+  options: Readonly<
+    Omit<Partial<StyleXOptions>, keyof ({ themeName: string })> & {
+      themeName: string;
+    }
+  >,
+): [VarsObject<Vars>, { [$$Key$$: string]: InjectableStyle }];
+export default styleXDefineVars;

package/lib/shared/stylex-define-vars.js.flow

@@ -0,0 +1,26 @@
+/**
+ * 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 { InjectableStyle, StyleXOptions } from './common-types';
+import type { VarsConfig } from './stylex-vars-utils';
+type VarsKeysWithStringValues<Vars: VarsConfig> = $ReadOnly<{
+  [$Keys<Vars>]: string,
+}>;
+
+type VarsObject<Vars: VarsConfig> = $ReadOnly<{
+  ...VarsKeysWithStringValues<Vars>,
+  __themeName__: string,
+}>;
+
+// Similar to `stylex.create` it takes an object of variables with their values
+// and returns a string after hashing it.
+declare export default function styleXDefineVars<Vars: VarsConfig>(
+  variables: Vars,
+  options: $ReadOnly<{ ...Partial<StyleXOptions>, themeName: string, ... }>,
+): [VarsObject<Vars>, { [string]: InjectableStyle }];

package/lib/shared/stylex-first-that-works.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+declare function stylexFirstThatWorks(
+  ...args: ReadonlyArray<string>
+): ReadonlyArray<string> | string;
+export default stylexFirstThatWorks;

package/lib/shared/stylex-first-that-works.js.flow

@@ -0,0 +1,12 @@
+/**
+ * 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
+ */
+
+declare export default function stylexFirstThatWorks(
+  ...args: $ReadOnlyArray<string>
+): $ReadOnlyArray<string> | string;

package/lib/shared/stylex-keyframes.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+import type { InjectableStyle, StyleXOptions } from './common-types';
+declare function styleXKeyframes(
+  frames: {
+    readonly [$$Key$$: string]: { readonly [$$Key$$: string]: string | number };
+  },
+  options: StyleXOptions,
+): [string, InjectableStyle];
+export default styleXKeyframes;

package/lib/shared/stylex-keyframes.js.flow

@@ -0,0 +1,20 @@
+/**
+ * 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 { InjectableStyle, StyleXOptions } from './common-types';
+
+// Similar to `stylex.create` it takes an object of keyframes
+// and returns a string after hashing it.
+//
+// It also expands shorthand properties to maintain parity with
+// `stylex.create`.
+declare export default function styleXKeyframes(
+  frames: { +[string]: { +[string]: string | number } },
+  options: StyleXOptions,
+): [string, InjectableStyle];

package/lib/shared/stylex-position-try.d.ts

@@ -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.
+ *
+ *
+ */
+
+import type { InjectableStyle, StyleXOptions } from './common-types';
+declare function styleXPositionTry(
+  styles: { readonly [$$Key$$: string]: string | number },
+  options: StyleXOptions,
+): [string, InjectableStyle];
+export default styleXPositionTry;

package/lib/shared/stylex-position-try.js.flow

@@ -0,0 +1,18 @@
+/**
+ * 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 { InjectableStyle, StyleXOptions } from './common-types';
+
+// Similar to `stylex.keyframes` but for position-try-fallbacks
+// Takes an object of positioning properties and returns a string after hashing it
+// The generated string must be prefixed with -- for anchor positioning
+declare export default function styleXPositionTry(
+  styles: { +[string]: string | number },
+  options: StyleXOptions,
+): [string, InjectableStyle];