@stylexjs/babel-plugin 0.12.0 → 0.13.0

package/lib/shared/stylex-vars-utils.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 { CSSType } from './types';
+export type VarsConfigValue =
+  | string
+  | Readonly<{ default: VarsConfigValue; [$$Key$$: string]: VarsConfigValue }>;
+export type VarsConfig = Readonly<{
+  [$$Key$$: string]: VarsConfigValue | CSSType;
+}>;
+export declare function collectVarsByAtRule(
+  key: string,
+  $$PARAM_1$$: { readonly nameHash: string; readonly value: VarsConfigValue },
+  collection: { [$$Key$$: string]: Array<string> },
+  atRules: Array<string>,
+): void;
+export declare function wrapWithAtRules(ltr: string, atRule: string): string;
+export declare function priorityForAtRule(atRule: string): number;
+export declare function getDefaultValue(
+  value: VarsConfigValue,
+): null | undefined | string;

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

@@ -0,0 +1,31 @@
+/**
+ * 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 { CSSType } from './types';
+
+export type VarsConfigValue =
+  | string
+  | $ReadOnly<{ default: VarsConfigValue, [string]: VarsConfigValue }>;
+
+export type VarsConfig = $ReadOnly<{
+  [string]: VarsConfigValue | CSSType<>,
+}>;
+
+declare export function collectVarsByAtRule(
+  key: string,
+  { +nameHash: string, +value: VarsConfigValue },
+  collection: { [string]: Array<string> },
+  atRules: Array<string>,
+): void;
+
+declare export function wrapWithAtRules(ltr: string, atRule: string): string;
+
+declare export function priorityForAtRule(atRule: string): number;
+
+declare export function getDefaultValue(value: VarsConfigValue): ?string;

package/lib/shared/types/index.d.ts

@@ -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.
+ *
+ *
+ */
+
+type NestedWithNumbers =
+  | number
+  | string
+  | Readonly<{
+      default: NestedWithNumbers;
+      [$$Key$$: string]: NestedWithNumbers;
+    }>;
+type ValueWithDefault =
+  | string
+  | Readonly<{
+      default: ValueWithDefault;
+      [$$Key$$: string]: ValueWithDefault;
+    }>;
+type CSSSyntax =
+  | '*'
+  | '<length>'
+  | '<number>'
+  | '<percentage>'
+  | '<length-percentage>'
+  | '<color>'
+  | '<image>'
+  | '<url>'
+  | '<integer>'
+  | '<angle>'
+  | '<time>'
+  | '<resolution>'
+  | '<transform-function>'
+  | '<custom-ident>'
+  | '<transform-list>';
+type CSSSyntaxType = CSSSyntax;
+declare class BaseCSSType {
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault);
+}
+export interface CSSType<_T extends string | number = string | number> {
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+}
+export declare const isCSSType: (
+  value: unknown,
+) => value is CSSType<string | number>;
+type AngleValue = string;
+export declare class Angle<T extends AngleValue>
+  extends BaseCSSType
+  implements CSSType<T>
+{
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+  static readonly syntax: CSSSyntaxType;
+  static create<T extends AngleValue = AngleValue>(
+    value: ValueWithDefault,
+  ): Angle<T>;
+}
+export declare const angle: <T extends AngleValue = AngleValue>(
+  value: ValueWithDefault,
+) => Angle<T>;
+type ColorValue = string;
+export declare class Color<T extends ColorValue>
+  extends BaseCSSType
+  implements CSSType<T>
+{
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+  static create<T extends ColorValue = ColorValue>(
+    value: ValueWithDefault,
+  ): Color<T>;
+}
+export declare const color: <T extends ColorValue = ColorValue>(
+  value: ValueWithDefault,
+) => Color<T>;
+type URLValue = string;
+export declare class Url<T extends URLValue>
+  extends BaseCSSType
+  implements CSSType<T>
+{
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+  static create<T extends URLValue = URLValue>(value: ValueWithDefault): Url<T>;
+}
+export declare const url: <T extends URLValue = URLValue>(
+  value: ValueWithDefault,
+) => Url<T>;
+type ImageValue = string;
+export declare class Image<T extends ImageValue>
+  extends Url<T>
+  implements CSSType<T>
+{
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault);
+  static create<T extends ImageValue = ImageValue>(
+    value: ValueWithDefault,
+  ): Image<T>;
+}
+export declare const image: <T extends ImageValue = ImageValue>(
+  value: ValueWithDefault,
+) => Image<T>;
+type IntegerValue = number;
+export declare class Integer<T extends IntegerValue>
+  extends BaseCSSType
+  implements CSSType<T>
+{
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+  static create<T extends IntegerValue = IntegerValue>(value: T): Integer<T>;
+}
+export declare const integer: <T extends IntegerValue = IntegerValue>(
+  value: T,
+) => Integer<T>;
+type LengthPercentageValue = string;
+export declare class LengthPercentage<_T extends LengthPercentageValue>
+  extends BaseCSSType
+  implements CSSType<string>
+{
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+  static createLength<_T extends LengthPercentageValue | number>(
+    value: ValueWithDefault,
+  ): LengthPercentage<string>;
+  static createPercentage<_T extends LengthPercentageValue | number>(
+    value: ValueWithDefault,
+  ): LengthPercentage<string>;
+}
+export declare const lengthPercentage: <
+  _T extends LengthPercentageValue | number,
+>(
+  value: ValueWithDefault,
+) => LengthPercentage<string>;
+type LengthValue = number | string;
+export declare class Length<_T extends LengthValue>
+  extends LengthPercentage<string>
+  implements CSSType<string>
+{
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+  static create<T extends LengthValue = LengthValue>(
+    value: NestedWithNumbers,
+  ): Length<T>;
+}
+export declare const length: <T extends LengthValue = LengthValue>(
+  value: NestedWithNumbers,
+) => Length<T>;
+type PercentageValue = string | number;
+export declare class Percentage<_T extends PercentageValue>
+  extends LengthPercentage<string>
+  implements CSSType<string>
+{
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+  static create<T extends PercentageValue = PercentageValue>(
+    value: NestedWithNumbers,
+  ): Percentage<T>;
+}
+export declare const percentage: <T extends PercentageValue = PercentageValue>(
+  value: NestedWithNumbers,
+) => Percentage<T>;
+type NumberValue = number;
+export declare class Num<T extends NumberValue>
+  extends BaseCSSType
+  implements CSSType<T>
+{
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+  static create<T extends NumberValue = NumberValue>(
+    value: NestedWithNumbers,
+  ): Num<T>;
+}
+export declare const number: <T extends NumberValue = NumberValue>(
+  value: NestedWithNumbers,
+) => Num<T>;
+type ResolutionValue = string | 0;
+export declare class Resolution<T extends ResolutionValue>
+  extends BaseCSSType
+  implements CSSType<T>
+{
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+  static create<T extends ResolutionValue = ResolutionValue>(
+    value: ValueWithDefault,
+  ): Resolution<T>;
+}
+export declare const resolution: <T extends ResolutionValue = ResolutionValue>(
+  value: ValueWithDefault,
+) => Resolution<T>;
+type TimeValue = string | 0;
+export declare class Time<T extends TimeValue>
+  extends BaseCSSType
+  implements CSSType<T>
+{
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+  static create<T extends TimeValue = TimeValue>(
+    value: ValueWithDefault,
+  ): Time<T>;
+}
+export declare const time: <T extends TimeValue = TimeValue>(
+  value: ValueWithDefault,
+) => Time<T>;
+type TransformFunctionValue = string;
+export declare class TransformFunction<T extends TransformFunctionValue>
+  extends BaseCSSType
+  implements CSSType<T>
+{
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+  static create<T extends TransformFunctionValue = TransformFunctionValue>(
+    value: ValueWithDefault,
+  ): TransformFunction<T>;
+}
+export declare const transformFunction: <
+  T extends TransformFunctionValue = TransformFunctionValue,
+>(
+  value: ValueWithDefault,
+) => TransformFunction<T>;
+type TransformListValue = string;
+export declare class TransformList<T extends TransformListValue>
+  extends BaseCSSType
+  implements CSSType<T>
+{
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+  static create<T extends TransformListValue = TransformListValue>(
+    value: ValueWithDefault,
+  ): TransformList<T>;
+}
+export declare const transformList: <
+  T extends TransformListValue = TransformListValue,
+>(
+  value: ValueWithDefault,
+) => TransformList<T>;

package/lib/shared/types/index.js.flow

@@ -0,0 +1,280 @@
+/**
+ * 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 { Color as ColorType } from './stylex-types-color';
+
+// We want all in one file?
+// option 1, create interface an implement it in the class
+// why? All the types have a single base definition of props
+// We want on type that defines CSS Types
+// Option 2: Do a union type and make
+
+// interface CSSType {
+//   toString(): string;
+// }
+
+type NestedWithNumbers =
+  | number
+  | string
+  | $ReadOnly<{
+      default: NestedWithNumbers,
+      [string]: NestedWithNumbers,
+    }>;
+
+type ValueWithDefault =
+  | string
+  | $ReadOnly<{
+      default: ValueWithDefault,
+      [string]: ValueWithDefault,
+    }>;
+
+type CSSSyntax =
+  | '*'
+  | '<length>'
+  | '<number>'
+  | '<percentage>'
+  | '<length-percentage>'
+  | '<color>'
+  | '<image>'
+  | '<url>'
+  | '<integer>'
+  | '<angle>'
+  | '<time>'
+  | '<resolution>'
+  | '<transform-function>'
+  | '<custom-ident>'
+  | '<transform-list>';
+
+type CSSSyntaxType = CSSSyntax;
+
+declare class BaseCSSType {
+  +value: ValueWithDefault;
+  +syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault): void;
+}
+export interface CSSType<+_T: string | number = string | number> {
+  +value: ValueWithDefault;
+  +syntax: CSSSyntaxType;
+}
+
+declare export const isCSSType: (
+  value: mixed,
+) => implies value is CSSType<string | number>;
+
+type AngleValue = string;
+declare export class Angle<+T: AngleValue>
+  extends BaseCSSType
+  implements CSSType<T>
+{
+  +value: ValueWithDefault;
+  +syntax: CSSSyntaxType;
+  static +syntax: CSSSyntaxType;
+  static create<T: AngleValue = AngleValue>(value: ValueWithDefault): Angle<T>;
+}
+declare export const angle: <T: AngleValue = AngleValue>(
+  value: ValueWithDefault,
+  // $FlowIgnore[method-unbinding]
+) => Angle<T>;
+
+type ColorValue = string;
+declare export class Color<+T: ColorValue>
+  extends BaseCSSType
+  implements CSSType<T>
+{
+  +value: ValueWithDefault;
+  +syntax: CSSSyntaxType;
+  static create<T: ColorValue = ColorValue>(value: ValueWithDefault): Color<T>;
+}
+declare export const color: <T: ColorValue = ColorValue>(
+  value: ValueWithDefault,
+  // $FlowIgnore[method-unbinding]
+) => Color<T>;
+
+type URLValue = string;
+
+declare export class Url<+T: URLValue>
+  extends BaseCSSType
+  implements CSSType<T>
+{
+  +value: ValueWithDefault;
+  +syntax: CSSSyntaxType;
+  static create<T: URLValue = URLValue>(value: ValueWithDefault): Url<T>;
+}
+declare export const url: <T: URLValue = URLValue>(
+  value: ValueWithDefault,
+) => Url<T>;
+
+type ImageValue = string;
+
+declare export class Image<+T: ImageValue>
+  extends Url<T>
+  implements CSSType<T>
+{
+  +value: ValueWithDefault;
+  +syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault): void;
+  static create<T: ImageValue = ImageValue>(value: ValueWithDefault): Image<T>;
+}
+declare export const image: <T: ImageValue = ImageValue>(
+  value: ValueWithDefault,
+  // $FlowIgnore[method-unbinding]
+) => Image<T>;
+
+type IntegerValue = number;
+
+declare export class Integer<+T: IntegerValue>
+  extends BaseCSSType
+  implements CSSType<T>
+{
+  +value: ValueWithDefault;
+  +syntax: CSSSyntaxType;
+  static create<T: IntegerValue = IntegerValue>(value: T): Integer<T>;
+}
+declare export const integer: <T: IntegerValue = IntegerValue>(
+  value: T,
+) => Integer<T>;
+
+type LengthPercentageValue = string;
+
+declare export class LengthPercentage<+_T: LengthPercentageValue>
+  extends BaseCSSType
+  implements CSSType<string>
+{
+  +value: ValueWithDefault;
+  +syntax: CSSSyntaxType;
+  static createLength<_T: LengthPercentageValue | number>(
+    value: ValueWithDefault,
+  ): LengthPercentage<string>;
+  static createPercentage<_T: LengthPercentageValue | number>(
+    value: ValueWithDefault,
+  ): LengthPercentage<string>;
+}
+declare export const lengthPercentage: <_T: LengthPercentageValue | number>(
+  value: ValueWithDefault,
+  // $FlowIgnore[method-unbinding]
+) => LengthPercentage<string>;
+
+type LengthValue = number | string;
+
+declare export class Length<+_T: LengthValue>
+  extends LengthPercentage<string>
+  implements CSSType<string>
+{
+  +value: ValueWithDefault;
+  +syntax: CSSSyntaxType;
+  static create<T: LengthValue = LengthValue>(
+    value: NestedWithNumbers,
+  ): Length<T>;
+}
+declare export const length: <T: LengthValue = LengthValue>(
+  value: NestedWithNumbers,
+  // $FlowIgnore[method-unbinding]
+) => Length<T>;
+
+type PercentageValue = string | number;
+
+declare export class Percentage<+_T: PercentageValue>
+  extends LengthPercentage<string>
+  implements CSSType<string>
+{
+  +value: ValueWithDefault;
+  +syntax: CSSSyntaxType;
+  static create<T: PercentageValue = PercentageValue>(
+    value: NestedWithNumbers,
+  ): Percentage<T>;
+}
+declare export const percentage: <T: PercentageValue = PercentageValue>(
+  value: NestedWithNumbers,
+  // $FlowIgnore[method-unbinding]
+) => Percentage<T>;
+
+type NumberValue = number;
+
+declare export class Num<+T: NumberValue>
+  extends BaseCSSType
+  implements CSSType<T>
+{
+  +value: ValueWithDefault;
+  +syntax: CSSSyntaxType;
+  static create<T: NumberValue = NumberValue>(value: NestedWithNumbers): Num<T>;
+}
+declare export const number: <T: NumberValue = NumberValue>(
+  value: NestedWithNumbers,
+  // $FlowIgnore[method-unbinding]
+) => Num<T>;
+
+type ResolutionValue = string | 0;
+
+declare export class Resolution<+T: ResolutionValue>
+  extends BaseCSSType
+  implements CSSType<T>
+{
+  +value: ValueWithDefault;
+  +syntax: CSSSyntaxType;
+  static create<T: ResolutionValue = ResolutionValue>(
+    value: ValueWithDefault,
+  ): Resolution<T>;
+}
+declare export const resolution: <T: ResolutionValue = ResolutionValue>(
+  value: ValueWithDefault,
+  // $FlowIgnore[method-unbinding]
+) => Resolution<T>;
+
+type TimeValue = string | 0;
+
+declare export class Time<+T: TimeValue>
+  extends BaseCSSType
+  implements CSSType<T>
+{
+  +value: ValueWithDefault;
+  +syntax: CSSSyntaxType;
+  static create<T: TimeValue = TimeValue>(value: ValueWithDefault): Time<T>;
+}
+declare export const time: <T: TimeValue = TimeValue>(
+  value: ValueWithDefault,
+  // $FlowIgnore[method-unbinding]
+) => Time<T>;
+
+type TransformFunctionValue = string;
+
+declare export class TransformFunction<+T: TransformFunctionValue>
+  extends BaseCSSType
+  implements CSSType<T>
+{
+  +value: ValueWithDefault;
+  +syntax: CSSSyntaxType;
+  static create<T: TransformFunctionValue = TransformFunctionValue>(
+    value: ValueWithDefault,
+  ): TransformFunction<T>;
+}
+declare export const transformFunction: <
+  T: TransformFunctionValue = TransformFunctionValue,
+>(
+  value: ValueWithDefault,
+  // $FlowIgnore[method-unbinding]
+) => TransformFunction<T>;
+
+type TransformListValue = string;
+
+declare export class TransformList<T: TransformListValue>
+  extends BaseCSSType
+  implements CSSType<T>
+{
+  +value: ValueWithDefault;
+  +syntax: CSSSyntaxType;
+  static create<T: TransformListValue = TransformListValue>(
+    value: ValueWithDefault,
+  ): TransformList<T>;
+}
+declare export const transformList: <
+  T: TransformListValue = TransformListValue,
+>(
+  value: ValueWithDefault,
+  // $FlowIgnore[method-unbinding]
+) => TransformList<T>;

package/lib/shared/utils/Rule.d.ts

@@ -0,0 +1,58 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+/**
+ * This could be an interface, but we use a class so that we can
+ * use instanceof to check for it.
+ */
+export declare class Rule<V> {}
+/**
+ * This is a class that represents a raw style rule.
+ *
+ * It exists to track the actual CSS rule that should be compiled
+ * even as we transform the structure of the RawStyles object.
+ */
+export declare class RawRule<V> extends Rule<V> {
+  readonly key: string;
+  readonly value: V;
+  readonly psuedos: null | undefined | ReadonlyArray<string>;
+  readonly atRules: null | undefined | ReadonlyArray<string>;
+  constructor(
+    key: string,
+    value: V,
+    psuedos: null | undefined | ReadonlyArray<string>,
+    atRules: null | undefined | ReadonlyArray<string>,
+  );
+}
+export declare class RawRuleList<V> extends Rule<V> {
+  readonly rules: ReadonlyArray<Rule<V>>;
+  constructor(rules: ReadonlyArray<Rule<V>>);
+}
+export declare class RawRuleRTLTuple<V1, V2> extends Rule<V1 | V2> {
+  readonly rules: [RawRule<V1>, RawRule<V2>];
+  constructor(rule1: RawRule<V1>, rule2: RawRule<V2>);
+}
+export declare class CompiledRule<V> extends Rule<V> {
+  readonly key: string;
+  readonly value: V;
+  readonly psuedos: null | undefined | ReadonlyArray<string>;
+  readonly atRules: null | undefined | ReadonlyArray<string>;
+  readonly className: string;
+  constructor(
+    key: string,
+    value: V,
+    psuedos: null | undefined | ReadonlyArray<string>,
+    atRules: null | undefined | ReadonlyArray<string>,
+    className: string,
+  );
+}
+export declare class CompiledRuleTuple2<V1, V2> extends Rule<V1 | V2> {
+  readonly rules: [CompiledRule<V1>, CompiledRule<V2>];
+  constructor(rule1: CompiledRule<V1>, rule2: CompiledRule<V2>);
+}

package/lib/shared/utils/Rule.js.flow

@@ -0,0 +1,64 @@
+/**
+ * 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
+ */
+
+/**
+ * This could be an interface, but we use a class so that we can
+ * use instanceof to check for it.
+ */
+// eslint-disable-next-line no-unused-vars
+declare export class Rule<+V> {}
+
+/**
+ * This is a class that represents a raw style rule.
+ *
+ * It exists to track the actual CSS rule that should be compiled
+ * even as we transform the structure of the RawStyles object.
+ */
+declare export class RawRule<V> extends Rule<V> {
+  +key: string;
+  +value: V;
+  +psuedos: ?$ReadOnlyArray<string>;
+  +atRules: ?$ReadOnlyArray<string>;
+  constructor(
+    key: string,
+    value: V,
+    psuedos: ?$ReadOnlyArray<string>,
+    atRules: ?$ReadOnlyArray<string>,
+  ): void;
+}
+
+declare export class RawRuleList<V> extends Rule<V> {
+  +rules: $ReadOnlyArray<Rule<V>>;
+  constructor(rules: $ReadOnlyArray<Rule<V>>): void;
+}
+
+declare export class RawRuleRTLTuple<V1, V2> extends Rule<V1 | V2> {
+  +rules: [RawRule<V1>, RawRule<V2>];
+  constructor(rule1: RawRule<V1>, rule2: RawRule<V2>): void;
+}
+
+declare export class CompiledRule<V> extends Rule<V> {
+  +key: string;
+  +value: V;
+  +psuedos: ?$ReadOnlyArray<string>;
+  +atRules: ?$ReadOnlyArray<string>;
+  +className: string;
+  constructor(
+    key: string,
+    value: V,
+    psuedos: ?$ReadOnlyArray<string>,
+    atRules: ?$ReadOnlyArray<string>,
+    className: string,
+  ): void;
+}
+
+declare export class CompiledRuleTuple2<V1, V2> extends Rule<V1 | V2> {
+  +rules: [CompiledRule<V1>, CompiledRule<V2>];
+  constructor(rule1: CompiledRule<V1>, rule2: CompiledRule<V2>): void;
+}