@stylexjs/stylex 0.11.1 → 0.13.0

package/lib/es/types/StyleXOpaqueTypes.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 declare type StyleXVar<_Val extends unknown> = string;
+export declare type StyleXClassNameFor<_K, _V> = string;

package/lib/es/types/StyleXOpaqueTypes.js.flow

@@ -0,0 +1,16 @@
+/**
+ * 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 class Var<+T> {
+//   value: T;
+// }
+// This is the type for the variables object
+declare export opaque type StyleXVar<+_Val: mixed>: string;
+
+declare export opaque type StyleXClassNameFor<+_K, +_V>: string;

package/lib/es/types/StyleXTypes.d.ts

@@ -0,0 +1,292 @@
+/**
+ * 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 { CSSType } from './VarTypes';
+import type { CSSProperties } from './StyleXCSSTypes';
+
+// Using an opaque type to declare ClassNames generated by stylex.
+declare const StyleXClassNameTag: unique symbol;
+export type StyleXClassNameFor<K, V> = string & {
+  _opaque: typeof StyleXClassNameTag;
+  _key: K;
+  _value: V;
+};
+declare const StyleXVarTag: unique symbol;
+declare class _StyleXVar<out Val> {
+  private _opaque: typeof StyleXVarTag;
+  private _value: Val;
+}
+export type StyleXVar<Val> = _StyleXVar<Val> & string;
+
+export type StyleXClassNameForValue<V> = StyleXClassNameFor<any, V>;
+export type StyleXClassNameForKey<K> = StyleXClassNameFor<K, any>;
+export type StyleXClassName = StyleXClassNameFor<any, any>;
+// Type for arbitrarily nested Array.
+export type StyleXArray<T> = T | ReadonlyArray<StyleXArray<T>>;
+
+type PseudoClassStr = `:${string}`;
+type AtRuleStr = `@${string}`;
+
+type CondStr = PseudoClassStr | AtRuleStr;
+
+type CSSPropertiesWithExtras = Partial<
+  Readonly<
+    CSSProperties & {
+      '::after': CSSProperties;
+      '::backdrop': CSSProperties;
+      '::before': CSSProperties;
+      '::cue': CSSProperties;
+      '::cue-region': CSSProperties;
+      '::first-letter': CSSProperties;
+      '::first-line': CSSProperties;
+      '::file-selector-button': CSSProperties;
+      '::grammar-error': CSSProperties;
+      '::marker': CSSProperties;
+      // This is a pattern and not a static key so it cannot be typed correctly.
+      // [key: `::part(${string})` | `::slotted(${string})`]: CSSProperties;
+      '::placeholder': CSSProperties;
+      '::selection': CSSProperties;
+      // This is a pattern and not a static key so it cannot be typed correctly.
+      // '::slotted()': CSSProperties;
+      '::spelling-error': CSSProperties;
+      '::target-text': CSSProperties;
+      '::-webkit-scrollbar'?: CSSProperties;
+      '::-webkit-scrollbar-button'?: CSSProperties;
+      '::-webkit-scrollbar-thumb'?: CSSProperties;
+      '::-webkit-scrollbar-track'?: CSSProperties;
+      '::-webkit-scrollbar-track-piece'?: CSSProperties;
+      '::-webkit-scrollbar-corner'?: CSSProperties;
+      '::-webkit-resizer'?: CSSProperties;
+      // webkit styles used for Search in Safari
+      '::-webkit-search-decoration'?: CSSProperties;
+      '::-webkit-search-cancel-button'?: CSSProperties;
+      '::-webkit-search-results-button'?: CSSProperties;
+      '::-webkit-search-results-decoration'?: CSSProperties;
+      // For input ranges in Chromium
+      '::-webkit-slider-thumb'?: CSSProperties;
+      '::-webkit-slider-runnable-track'?: CSSProperties;
+      // For input ranges in Firefox
+      '::-moz-range-thumb'?: CSSProperties;
+      '::-moz-range-track'?: CSSProperties;
+      '::-moz-range-progress'?: CSSProperties;
+    }
+  >
+>;
+
+export type NestedCSSPropTypes = Partial<
+  Readonly<{
+    [Key in keyof CSSPropertiesWithExtras]: StyleXClassNameFor<
+      Key,
+      CSSPropertiesWithExtras[Key]
+    >;
+  }>
+>;
+
+type UserAuthoredStyles = CSSPropertiesWithExtras | { [key: string]: unknown };
+export type StyleXSingleStyle = false | (null | undefined | NestedCSSPropTypes);
+// NOTE: `XStyle` has been deprecated in favor of `StaticStyles` and `StyleXStyles`.
+
+export type Keyframes = Readonly<{ [name: string]: CSSProperties }>;
+
+export type PositionTry = Readonly<{
+  // Anchor Positioning Properties
+  positionAnchor?: CSSProperties['positionAnchor'],
+  positionArea?: CSSProperties['positionArea'],
+  // inset Properties
+  top?: CSSProperties['top'],
+  right?: CSSProperties['right'],
+  bottom?: CSSProperties['bottom'],
+  left?: CSSProperties['left'],
+  inset?: CSSProperties['inset'],
+  insetBlock?: CSSProperties['insetBlock'],
+  insetBlockEnd?: CSSProperties['insetBlockEnd'],
+  insetBlockStart?: CSSProperties['insetBlockStart'],
+  insetInline?: CSSProperties['insetInline'],
+  insetInlineEnd?: CSSProperties['insetInlineEnd'],
+  insetInlineStart?: CSSProperties['insetInlineStart'],
+  // margin Properties
+  margin?: CSSProperties['margin'],
+  marginBlock?: CSSProperties['marginBlock'],
+  marginBlockEnd?: CSSProperties['marginBlockEnd'],
+  marginBlockStart?: CSSProperties['marginBlockStart'],
+  marginInline?: CSSProperties['marginInline'],
+  marginInlineEnd?: CSSProperties['marginInlineEnd'],
+  marginInlineStart?: CSSProperties['marginInlineStart'],
+  marginTop?: CSSProperties['marginTop'],
+  marginBottom?: CSSProperties['marginBottom'],
+  marginLeft?: CSSProperties['marginLeft'],
+  marginRight?: CSSProperties['marginRight'],
+  // size properties
+  width?: CSSProperties['width'],
+  height?: CSSProperties['height'],
+  minWidth?: CSSProperties['minWidth'],
+  minHeight?: CSSProperties['minHeight'],
+  maxWidth?: CSSProperties['maxWidth'],
+  maxHeight?: CSSProperties['maxHeight'],
+  blockSize?: CSSProperties['blockSize'],
+  inlineSize?: CSSProperties['inlineSize'],
+  minBlockSize?: CSSProperties['minBlockSize'],
+  minInlineSize?: CSSProperties['minInlineSize'],
+  maxBlockSize?: CSSProperties['maxBlockSize'],
+  maxInlineSize?: CSSProperties['maxInlineSize'],
+  // self alignment properties
+  alignSelf?: CSSProperties['alignSelf'],
+  justifySelf?: CSSProperties['justifySelf'],
+  placeSelf?: CSSProperties['placeSelf'],
+}>;
+
+export type LegacyThemeStyles = Readonly<{ [constantName: string]: string }>;
+
+type ComplexStyleValueType<T> =
+  T extends StyleXVar<infer U>
+    ? U
+    : T extends string | number | null
+      ? T
+      : T extends ReadonlyArray<infer U>
+        ? ComplexStyleValueType<U>
+        : T extends Readonly<{ default: infer A; [cond: CondStr]: infer B }>
+          ? ComplexStyleValueType<A> | ComplexStyleValueType<B>
+          : T;
+
+export type MapNamespace<CSS> = Readonly<{
+  [Key in keyof CSS]: StyleXClassNameFor<Key, ComplexStyleValueType<CSS[Key]>>;
+}>;
+
+export type MapNamespaces<
+  S extends {
+    [key: string]: UserAuthoredStyles | ((...args: any) => UserAuthoredStyles);
+  },
+> = Readonly<{
+  [Key in keyof S]: S[Key] extends (...args: infer Args) => infer Obj
+    ? (...args: Args) => Readonly<[MapNamespace<Obj>, InlineStyles]>
+    : MapNamespace<S[Key]>;
+}>;
+
+export type StyleX$Create = <
+  const S extends {
+    [key: string]: UserAuthoredStyles | ((...args: any) => UserAuthoredStyles);
+  },
+>(
+  styles: S,
+) => MapNamespaces<S>;
+
+export type CompiledStyles =
+  | Readonly<{
+      [key: string]: StyleXClassName | null | void | never;
+    }>
+  | Readonly<{
+      theme: StyleXClassName;
+    }>;
+
+declare const StyleXInlineStylesTag: unique symbol;
+
+export type InlineStyles = typeof StyleXInlineStylesTag;
+
+type _GenStylePropType<CSS extends UserAuthoredStyles> = Readonly<{
+  [Key in keyof CSS]: StyleXClassNameFor<Key, Readonly<CSS[Key]>>;
+}>;
+type GenStylePropType<CSS extends UserAuthoredStyles> = Readonly<
+  _GenStylePropType<CSS> &
+    Partial<{
+      [Key in Exclude<keyof CSSPropertiesWithExtras, keyof CSS>]: never;
+    }>
+>;
+
+// Replace `XStyle` with this.
+export type StaticStyles<
+  CSS extends UserAuthoredStyles = CSSPropertiesWithExtras,
+> = StyleXArray<false | null | undefined | GenStylePropType<CSS>>;
+
+export type StaticStylesWithout<CSS extends UserAuthoredStyles> = StaticStyles<
+  Omit<CSSPropertiesWithExtras, keyof CSS>
+>;
+
+export type StyleXStyles<
+  CSS extends UserAuthoredStyles = CSSPropertiesWithExtras,
+> = StyleXArray<
+  | null
+  | undefined
+  | false
+  | GenStylePropType<CSS>
+  | Readonly<[GenStylePropType<CSS>, InlineStyles]>
+>;
+export type StyleXStylesWithout<CSS extends UserAuthoredStyles> = StyleXStyles<
+  Omit<CSSPropertiesWithExtras, keyof CSS>
+>;
+
+declare const StyleXVarGroupTag: unique symbol;
+export type VarGroup<
+  Tokens extends { [key: string]: any },
+  ID extends symbol = symbol,
+> = Readonly<{
+  [Key in keyof Tokens]: StyleXVar<Tokens[Key]>;
+}> &
+  Readonly<{
+    __opaqueId: ID;
+    __tokens: Tokens;
+  }> &
+  typeof StyleXVarGroupTag;
+
+export type TokensFromVarGroup<T extends VarGroup<{}>> = T['__tokens'];
+
+export type IDFromVarGroup<T extends VarGroup<{}>> =
+  T['__opaqueId'];
+
+type TTokens = Readonly<{
+  [key: string]: CSSType<null | string | number> | string | { [key: string]: string };
+}>;
+
+type UnwrapVars<T> = T extends StyleXVar<infer U> ? U : T;
+export type FlattenTokens<T extends TTokens> = Readonly<{
+  [Key in keyof T]: T[Key] extends { [key: string]: infer X }
+    ? UnwrapVars<X>
+    : UnwrapVars<T[Key]>;
+}>;
+
+type NestedVarObject<T> =
+  | T
+  | Readonly<{
+      default: NestedVarObject<T>;
+      [key: `@${string}`]: NestedVarObject<T>;
+    }>;
+
+export type StyleX$DefineConsts = <
+  DefaultTokens extends TTokens,
+  ID extends symbol = symbol,
+>(
+  tokens: DefaultTokens,
+) => VarGroup<FlattenTokens<DefaultTokens>, ID>;
+
+export type StyleX$DefineVars = <
+  DefaultTokens extends TTokens,
+  ID extends symbol = symbol,
+>(
+  tokens: DefaultTokens,
+) => VarGroup<FlattenTokens<DefaultTokens>, ID>;
+
+declare class ThemeKey<out VG extends VarGroup<{}>> extends String {
+  private varGroup: VG;
+}
+export type Theme<
+  T extends VarGroup<{}>,
+  Tag extends symbol = symbol,
+> = Tag &
+  Readonly<{
+    theme: StyleXClassNameFor<ThemeKey<T>, IDFromVarGroup<T>>;
+  }>;
+
+type OverridesForTokenType<Config extends { [key: string]: unknown }> = {
+  [Key in keyof Config]?: NestedVarObject<Config[Key]>;
+};
+
+export type StyleX$CreateTheme = <
+  TVars extends VarGroup<{}>,
+  ThemeID extends symbol = symbol,
+>(
+  baseTokens: TVars,
+  overrides: OverridesForTokenType<TokensFromVarGroup<TVars>>,
+) => Theme<TVars, ThemeID>;

package/lib/es/types/StyleXTypes.js.flow

@@ -0,0 +1,240 @@
+/**
+ * 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 { CSSProperties } from './StyleXCSSTypes';
+import type { StyleXClassNameFor, StyleXVar } from './StyleXOpaqueTypes';
+import type { CSSType } from './VarTypes';
+
+export type { StyleXClassNameFor, StyleXVar } from './StyleXOpaqueTypes';
+
+// Using an opaque type to declare ClassNames generated by stylex.
+export type StyleXClassNameForValue<+V> = StyleXClassNameFor<mixed, V>;
+export type StyleXClassNameForKey<+K> = StyleXClassNameFor<K, mixed>;
+export type StyleXClassName = StyleXClassNameFor<mixed, mixed>;
+
+// Type for arbitrarily nested Array.
+export type StyleXArray<+T> = T | $ReadOnlyArray<StyleXArray<T>>;
+
+type CSSPropertiesWithExtras = $ReadOnly<{
+  ...CSSProperties,
+  '::before'?: CSSProperties,
+  '::after'?: CSSProperties,
+  '::backdrop'?: CSSProperties,
+  '::cue'?: CSSProperties,
+  '::cue-region'?: CSSProperties,
+  '::first-letter'?: CSSProperties,
+  '::first-line'?: CSSProperties,
+  '::file-selector-button'?: CSSProperties,
+  '::grammar-error'?: CSSProperties,
+  '::marker'?: CSSProperties,
+  '::placeholder'?: CSSProperties,
+  '::selection'?: CSSProperties,
+  '::spelling-error'?: CSSProperties,
+  '::target-text'?: CSSProperties,
+  '::-webkit-scrollbar'?: CSSProperties,
+  // webkit styles used for Search in Safari
+  '::-webkit-search-decoration'?: CSSProperties,
+  '::-webkit-search-cancel-button'?: CSSProperties,
+  '::-webkit-search-results-button'?: CSSProperties,
+  '::-webkit-search-results-decoration'?: CSSProperties,
+}>;
+
+export type NestedCSSPropTypes = $ReadOnly<{
+  [Key in keyof CSSPropertiesWithExtras]?: StyleXClassNameForKey<Key>,
+}>;
+
+export type StyleXSingleStyle = false | ?NestedCSSPropTypes;
+export type XStyle<+T = NestedCSSPropTypes> = StyleXArray<
+  false | ?$ReadOnly<{ ...T, $$css: true }>,
+>;
+
+export type XStyleWithout<+T: { +[_K in keyof NestedCSSPropTypes]?: mixed }> =
+  XStyle<$ReadOnly<Omit<NestedCSSPropTypes, $Keys<T>>>>;
+
+export type Keyframes = $ReadOnly<{ [name: string]: CSSProperties, ... }>;
+
+export type PositionTry = $ReadOnly<{
+  // Anchor Positioning Properties
+  positionAnchor?: CSSProperties['positionAnchor'],
+  positionArea?: CSSProperties['positionArea'],
+  // inset Properties
+  top?: CSSProperties['top'],
+  right?: CSSProperties['right'],
+  bottom?: CSSProperties['bottom'],
+  left?: CSSProperties['left'],
+  inset?: CSSProperties['inset'],
+  insetBlock?: CSSProperties['insetBlock'],
+  insetBlockEnd?: CSSProperties['insetBlockEnd'],
+  insetBlockStart?: CSSProperties['insetBlockStart'],
+  insetInline?: CSSProperties['insetInline'],
+  insetInlineEnd?: CSSProperties['insetInlineEnd'],
+  insetInlineStart?: CSSProperties['insetInlineStart'],
+  // margin Properties
+  margin?: CSSProperties['margin'],
+  marginBlock?: CSSProperties['marginBlock'],
+  marginBlockEnd?: CSSProperties['marginBlockEnd'],
+  marginBlockStart?: CSSProperties['marginBlockStart'],
+  marginInline?: CSSProperties['marginInline'],
+  marginInlineEnd?: CSSProperties['marginInlineEnd'],
+  marginInlineStart?: CSSProperties['marginInlineStart'],
+  marginTop?: CSSProperties['marginTop'],
+  marginBottom?: CSSProperties['marginBottom'],
+  marginLeft?: CSSProperties['marginLeft'],
+  marginRight?: CSSProperties['marginRight'],
+  // size properties
+  width?: CSSProperties['width'],
+  height?: CSSProperties['height'],
+  minWidth?: CSSProperties['minWidth'],
+  minHeight?: CSSProperties['minHeight'],
+  maxWidth?: CSSProperties['maxWidth'],
+  maxHeight?: CSSProperties['maxHeight'],
+  blockSize?: CSSProperties['blockSize'],
+  inlineSize?: CSSProperties['inlineSize'],
+  minBlockSize?: CSSProperties['minBlockSize'],
+  minInlineSize?: CSSProperties['minInlineSize'],
+  maxBlockSize?: CSSProperties['maxBlockSize'],
+  maxInlineSize?: CSSProperties['maxInlineSize'],
+  // self alignment properties
+  alignSelf?: CSSProperties['alignSelf'],
+  justifySelf?: CSSProperties['justifySelf'],
+  placeSelf?: CSSProperties['placeSelf'],
+}>;
+
+export type LegacyThemeStyles = $ReadOnly<{
+  [constantName: string]: string,
+  ...
+}>;
+
+type ComplexStyleValueType<+T> =
+  T extends StyleXVar<infer U>
+    ? U
+    : T extends string | number | null
+      ? T
+      : T extends $ReadOnlyArray<infer U>
+        ? ComplexStyleValueType<U>
+        : T extends { +default: infer A, +[string]: infer B }
+          ? ComplexStyleValueType<A> | ComplexStyleValueType<B>
+          : $ReadOnly<T>;
+
+type _MapNamespace<+CSS: { +[string]: mixed }> = $ReadOnly<{
+  [Key in keyof CSS]: StyleXClassNameFor<Key, ComplexStyleValueType<CSS[Key]>>,
+}>;
+export type MapNamespace<+CSS: { +[string]: mixed }> = $ReadOnly<{
+  ..._MapNamespace<CSS>,
+  $$css: true,
+}>;
+export type MapNamespaces<+S: { +[string]: mixed }> = $ReadOnly<{
+  [Key in keyof S]: S[Key] extends (...args: infer Args) => infer Obj
+    ? (...args: Args) => $ReadOnly<[MapNamespace<Obj>, InlineStyles]>
+    : MapNamespace<S[Key]>,
+}>;
+export type StyleX$Create = <S: { +[string]: mixed }>(
+  styles: S,
+) => MapNamespaces<S>;
+
+export type CompiledStyles = $ReadOnly<{
+  $$css: true,
+  [key: string]: StyleXClassName,
+}>;
+export type InlineStyles = $ReadOnly<{
+  $$css?: void,
+  [key: string]: string,
+}>;
+
+type _GenStylePropType<+CSS: { +[string]: mixed }> = $ReadOnly<{
+  [Key in keyof CSS]: CSS[Key] extends { +[string]: mixed }
+    ? StyleXClassNameFor<Key, $ReadOnly<CSS[Key]>>
+    : StyleXClassNameFor<Key, CSS[Key]>,
+}>;
+type GenStylePropType<+CSS: { +[string]: mixed }> = $ReadOnly<{
+  ..._GenStylePropType<CSS>,
+  $$css: true,
+}>;
+
+// Replace `XStyle` with this.
+export type StaticStyles<+CSS: { +[string]: mixed } = CSSPropertiesWithExtras> =
+  StyleXArray<false | ?GenStylePropType<$ReadOnly<CSS>>>;
+
+export type StaticStylesWithout<+CSS: { +[string]: mixed }> = StaticStyles<
+  Omit<CSSPropertiesWithExtras, $Keys<CSS>>,
+>;
+
+export type StyleXStyles<+CSS: { +[string]: mixed } = CSSPropertiesWithExtras> =
+  StyleXArray<
+    | ?false
+    | GenStylePropType<$ReadOnly<CSS>>
+    | $ReadOnly<[GenStylePropType<$ReadOnly<CSS>>, InlineStyles]>,
+  >;
+
+export type StyleXStylesWithout<+CSS: { +[string]: mixed }> = StyleXStyles<
+  Omit<CSSPropertiesWithExtras, $Keys<CSS>>,
+>;
+
+export type VarGroup<+Tokens: { +[string]: mixed }, +_ID: string = string> = {
+  +[Key in keyof Tokens]: StyleXVar<Tokens[Key]>,
+};
+
+export type TokensFromVarGroup<+T: VarGroup<{ +[string]: mixed }>> = $ReadOnly<{
+  [Key in keyof T]: UnwrapVar<T[Key]>,
+}>;
+
+type IDFromVarGroup<+T: VarGroup<{ +[string]: mixed }>> =
+  T extends VarGroup<{ +[string]: mixed }, infer ID> ? ID : empty;
+
+type NestedVarObject<+T> =
+  | T
+  | $ReadOnly<{
+      default: NestedVarObject<T>,
+      [string]: NestedVarObject<T>,
+    }>;
+
+type TTokens = $ReadOnly<{
+  [string]:
+    | NestedVarObject<null | string | number>
+    | StyleXVar<null | string | number>
+    | CSSType<null | string | number>,
+}>;
+
+type UnwrapVar<+T> = T extends StyleXVar<infer U> ? U : T;
+export type FlattenTokens<+T: TTokens> = {
+  +[Key in keyof T]: T[Key] extends CSSType<string | number>
+    ? UnwrapVar<T[Key]>
+    : T[Key] extends { +default: infer X, +[string]: infer Y }
+      ? UnwrapVar<X | Y>
+      : UnwrapVar<T[Key]>,
+};
+
+export type StyleX$DefineVars = <DefaultTokens: TTokens, ID: string = string>(
+  tokens: DefaultTokens,
+) => VarGroup<FlattenTokens<DefaultTokens>, ID>;
+
+export type StyleX$DefineConsts = <DefaultTokens: TTokens, ID: string = string>(
+  tokens: DefaultTokens,
+) => VarGroup<FlattenTokens<DefaultTokens>, ID>;
+
+// opaque type ThemeKey<+_VG: VarGroup<{ +[string]: mixed }>>: string = string;
+declare export opaque type Theme<
+  +T: VarGroup<{ +[string]: mixed }, string>,
+  +_Tag: string = string,
+>: $ReadOnly<{
+  $$css: true,
+  theme: StyleXClassNameFor<'theme', IDFromVarGroup<T>>,
+}>;
+
+export type OverridesForTokenType<+Config: { +[string]: mixed }> = {
+  [Key in keyof Config]?: NestedVarObject<Config[Key]>,
+};
+
+export type StyleX$CreateTheme = <
+  BaseTokens: VarGroup<{ +[string]: mixed }>,
+  ID: string = string,
+>(
+  baseTokens: BaseTokens,
+  overrides: OverridesForTokenType<TokensFromVarGroup<BaseTokens>>,
+) => Theme<BaseTokens, ID>;

package/lib/es/types/StyleXUtils.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.
+ *
+ *
+ */
+
+export type ValueWithDefault<T> =
+  | T
+  | Readonly<{
+      default: ValueWithDefault<T>;
+      [$$Key$$: string]: ValueWithDefault<T>;
+    }>;

package/lib/es/types/StyleXUtils.js.flow

@@ -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>,
+    }>;

package/lib/es/types/VarTypes.d.ts

@@ -0,0 +1,104 @@
+/**
+ * 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 { ValueWithDefault } from './StyleXUtils';
+export type CSSSyntax =
+  | '*'
+  | '<length>'
+  | '<number>'
+  | '<percentage>'
+  | '<length-percentage>'
+  | '<color>'
+  | '<image>'
+  | '<url>'
+  | '<integer>'
+  | '<angle>'
+  | '<time>'
+  | '<resolution>'
+  | '<transform-function>'
+  | '<custom-ident>'
+  | '<transform-list>';
+type CSSSyntaxType = CSSSyntax;
+type InnerValue = null | string | number;
+interface ICSSType<_T extends InnerValue> {
+  readonly value: ValueWithDefault<string>;
+  readonly syntax: CSSSyntaxType;
+}
+export declare class Angle<T extends InnerValue> implements ICSSType<T> {
+  readonly value: ValueWithDefault<string>;
+  readonly syntax: CSSSyntaxType;
+}
+export declare class Color<T extends InnerValue> implements ICSSType<T> {
+  readonly value: ValueWithDefault<string>;
+  readonly syntax: CSSSyntaxType;
+}
+export declare class Url<T extends InnerValue> implements ICSSType<T> {
+  readonly value: ValueWithDefault<string>;
+  readonly syntax: CSSSyntaxType;
+}
+export declare class Image<T extends InnerValue> implements ICSSType<T> {
+  readonly value: ValueWithDefault<string>;
+  readonly syntax: CSSSyntaxType;
+}
+export declare class Integer<T extends InnerValue> implements ICSSType<T> {
+  readonly value: ValueWithDefault<string>;
+  readonly syntax: CSSSyntaxType;
+}
+export declare class LengthPercentage<T extends InnerValue>
+  implements ICSSType<T>
+{
+  readonly value: ValueWithDefault<string>;
+  readonly syntax: CSSSyntaxType;
+}
+export declare class Length<T extends InnerValue> implements ICSSType<T> {
+  readonly value: ValueWithDefault<string>;
+  readonly syntax: CSSSyntaxType;
+}
+export declare class Percentage<T extends InnerValue> implements ICSSType<T> {
+  readonly value: ValueWithDefault<string>;
+  readonly syntax: CSSSyntaxType;
+}
+export declare class Num<T extends InnerValue> implements ICSSType<T> {
+  readonly value: ValueWithDefault<string>;
+  readonly syntax: CSSSyntaxType;
+}
+export declare class Resolution<T extends InnerValue> implements ICSSType<T> {
+  readonly value: ValueWithDefault<string>;
+  readonly syntax: CSSSyntaxType;
+}
+export declare class Time<T extends InnerValue> implements ICSSType<T> {
+  readonly value: ValueWithDefault<string>;
+  readonly syntax: CSSSyntaxType;
+}
+export declare class TransformFunction<T extends InnerValue>
+  implements ICSSType<T>
+{
+  readonly value: ValueWithDefault<string>;
+  readonly syntax: CSSSyntaxType;
+}
+export declare class TransformList<T extends InnerValue>
+  implements ICSSType<T>
+{
+  readonly value: ValueWithDefault<string>;
+  readonly syntax: CSSSyntaxType;
+}
+export type CSSType<T extends InnerValue> =
+  | Angle<T>
+  | Color<T>
+  | Url<T>
+  | Image<T>
+  | Integer<T>
+  | LengthPercentage<T>
+  | Length<T>
+  | Percentage<T>
+  | Num<T>
+  | Resolution<T>
+  | Time<T>
+  | TransformFunction<T>
+  | TransformList<T>;