@stylexjs/babel-plugin 0.12.0 → 0.13.1

package/lib/shared/utils/object-utils.js.flow

@@ -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.
+ *
+ * @flow strict
+ */
+
+// A bunch of object utils with better Flow types
+
+import type { CompiledStyles } from '../common-types';
+
+// eslint-disable-next-line no-unused-vars
+type AnyObject = { +[string]: mixed };
+
+declare export function isPlainObject(obj: mixed): implies obj is AnyObject;
+
+declare export function flattenObject(obj: CompiledStyles): {
+  +[string]: null | string,
+};
+
+type _ObjectEntries<Obj: { +[string]: mixed }> = {
+  [Key in keyof Obj]: [Key, Obj[Key]],
+};
+type ObjectEntries<Obj: { +[string]: mixed }> = $Values<_ObjectEntries<Obj>>;
+
+declare export function objEntries<Obj: { +[string]: mixed }>(
+  obj: Obj,
+): $ReadOnlyArray<ObjectEntries<Obj>>;
+
+declare export function objValues<Obj: { +[string]: mixed }>(
+  obj: Obj,
+): $ReadOnlyArray<Obj[$Keys<Obj>]>;
+
+declare export function objFromEntries<K: string | number, V>(
+  entries: $ReadOnlyArray<$ReadOnly<[K, V]>>,
+): { [K]: V };
+
+declare export function objMapKeys<V, K1: string = string, K2: string = string>(
+  obj: { +[K1]: V },
+  mapper: (K1) => K2,
+): { +[K2]: V };
+
+declare export function objMapEntry<
+  V,
+  V2,
+  K1: string = string,
+  K2: string = string,
+>(
+  obj: { +[K1]: V },
+  mapper: ($ReadOnly<[K1, V]>) => $ReadOnly<[K2, V2]>,
+): { +[K2]: V2 };
+
+declare export function objMap<V, V2, K: string = string>(
+  obj: { +[K]: V },
+  mapper: (V, K) => V2,
+): { +[K]: V2 };
+
+declare export class Pipe<T> {
+  value: T;
+  constructor(val: T): void;
+  pipe<T2>(mapper: (T) => T2): Pipe<T2>;
+  done(): T;
+  static create(val: T): Pipe<T>;
+}
+
+// Function that sorts an array without mutating it and returns a new array
+declare export const arraySort: <T>(
+  arr: $ReadOnlyArray<T>,
+  fn?: (T, T) => number,
+) => $ReadOnlyArray<T>;
+
+declare export const arrayEquals: <T>(
+  arr1: $ReadOnlyArray<T>,
+  arr2: $ReadOnlyArray<T>,
+  equals: (T, T) => boolean,
+) => boolean;

package/lib/shared/utils/property-priorities.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.
+ *
+ *
+ */
+
+export declare const PSEUDO_CLASS_PRIORITIES: Readonly<{
+  [$$Key$$: string]: number;
+}>;
+type AtRulePriorities = { '@supports': 30; '@media': 200; '@container': 300 };
+export declare const AT_RULE_PRIORITIES: Readonly<AtRulePriorities>;
+export declare const PSEUDO_ELEMENT_PRIORITY: number;
+declare function getPriority(key: string): number;
+export default getPriority;

package/lib/shared/utils/property-priorities.js.flow

@@ -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.
+ *
+ * @flow strict
+ */
+
+// type PseudoClassPriorities = {
+//   ':is': 40,
+//   ':where': 40,
+//   ':not': 40,
+//   ':has': 45,
+//   ':dir': 50,
+//   ':lang': 51,
+//   ':first-child': 52,
+//   ':first-of-type': 53,
+//   ':last-child': 54,
+//   ':last-of-type': 55,
+//   ':only-child': 56,
+//   ':only-of-type': 57,
+//   ':nth-child': 60,
+//   ':nth-last-child': 61,
+//   ':nth-of-type': 62,
+//   ':nth-last-of-type': 63, // 'nth-last-of-type' is the same priority as 'nth-of-type
+//   ':empty': 70,
+//   ':link': 80,
+//   ':any-link': 81,
+//   ':local-link': 82,
+//   ':target-within': 83,
+//   ':target': 84,
+//   ':visited': 85,
+//   ':enabled': 91,
+//   ':disabled': 92,
+//   ':required': 93,
+//   ':optional': 94,
+//   ':read-only': 95,
+//   ':read-write': 96,
+//   ':placeholder-shown': 97,
+//   ':in-range': 98,
+//   ':out-of-range': 99,
+//   ':default': 100,
+//   ':checked': 101,
+//   ':indeterminate': 101,
+//   ':blank': 102,
+//   ':valid': 103,
+//   ':invalid': 104,
+//   ':user-invalid': 105,
+//   ':autofill': 110,
+//   ':picture-in-picture': 120,
+//   ':modal': 121,
+//   ':fullscreen': 122,
+//   ':paused': 123,
+//   ':playing': 124,
+//   ':current': 125,
+//   ':past': 126,
+//   ':future': 127,
+//   ':hover': 130,
+//   ':focusWithin': 140,
+//   ':focus': 150,
+//   ':focusVisible': 160,
+//   ':active': 170,
+// };
+
+declare export const PSEUDO_CLASS_PRIORITIES: $ReadOnly<{ [string]: number }>;
+
+type AtRulePriorities = {
+  '@supports': 30,
+  '@media': 200,
+  '@container': 300,
+};
+
+declare export const AT_RULE_PRIORITIES: $ReadOnly<AtRulePriorities>;
+
+declare export const PSEUDO_ELEMENT_PRIORITY: number;
+
+declare export default function getPriority(key: string): number;

package/lib/shared/utils/rule-utils.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 declare const sortPseudos: (
+  pseudos: ReadonlyArray<string>,
+) => ReadonlyArray<string>;
+export declare const sortAtRules: (
+  atRules: ReadonlyArray<string>,
+) => ReadonlyArray<string>;

package/lib/shared/utils/rule-utils.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 export const sortPseudos: (
+  pseudos: $ReadOnlyArray<string>,
+) => $ReadOnlyArray<string>;
+
+declare export const sortAtRules: (
+  atRules: $ReadOnlyArray<string>,
+) => $ReadOnlyArray<string>;

package/lib/shared/utils/split-css-value.d.ts

@@ -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.
+ *
+ *
+ */
+
+import type { TStyleValue } from '../common-types';
+declare function splitValue(
+  str: TStyleValue,
+): ReadonlyArray<number | string | null>;
+export default splitValue;

package/lib/shared/utils/split-css-value.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
+ */
+
+import type { TStyleValue } from '../common-types';
+
+// Using split(' ') Isn't enough because of values like calc.
+declare export default function splitValue(
+  str: TStyleValue,
+): $ReadOnlyArray<number | string | null>;

package/lib/shared/utils/transform-value.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 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 { StyleXOptions } from '../common-types';
+/**
+ * Convert a CSS value in JS to the final CSS string value
+ */
+declare function transformValue(
+  key: string,
+  rawValue: string | number,
+  options: StyleXOptions,
+): string;
+export default transformValue;
+export declare function getNumberSuffix(key: string): string;
+export declare const timeUnits: Set<string>;
+export declare const lengthUnits: Set<string>;

package/lib/shared/utils/transform-value.js.flow

@@ -0,0 +1,25 @@
+/**
+ * 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 { StyleXOptions } from '../common-types';
+
+/**
+ * Convert a CSS value in JS to the final CSS string value
+ */
+declare export default function transformValue(
+  key: string,
+  rawValue: string | number,
+  options: StyleXOptions,
+): string;
+
+declare export function getNumberSuffix(key: string): string;
+
+declare export const timeUnits: Set<string>;
+
+declare export const lengthUnits: Set<string>;

package/lib/shared/validate.d.ts

@@ -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.
+ *
+ *
+ */
+
+import type { TRawValue } from './common-types';
+declare function validateEntry($$PARAM_0$$: [string, TRawValue]): void;
+export default validateEntry;

package/lib/shared/validate.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
+ */
+
+import type { TRawValue } from './common-types';
+
+declare export default function validateEntry([string, TRawValue]): void;

package/lib/utils/add-sourcemap-data.d.ts

@@ -8,7 +8,7 @@
  */
 
 import type { NodePath } from '@babel/traverse';
-import type { CompiledNamespaces } from '@stylexjs/shared';
+import type { CompiledNamespaces } from '../shared';
 import * as t from '@babel/types';
 import StateManager from './state-manager';
 /**

package/lib/utils/add-sourcemap-data.js.flow

@@ -8,7 +8,7 @@
  */
 
 import type { NodePath } from '../../flow_modules/@babel/traverse';
-import type { CompiledNamespaces } from '@stylexjs/shared';
+import type { CompiledNamespaces } from '../shared';
 
 import * as t from '../../flow_modules/@babel/types';
 import StateManager from './state-manager';

package/lib/utils/dev-classname.d.ts

@@ -7,7 +7,7 @@
  *
  */
 
-import type { CompiledNamespaces } from '@stylexjs/shared';
+import type { CompiledNamespaces } from '../shared';
 import StateManager from './state-manager';
 export declare function namespaceToDevClassName(
   namespace: string,

package/lib/utils/dev-classname.js.flow

@@ -7,7 +7,8 @@
  * @flow strict
  */
 
-import type { CompiledNamespaces } from '@stylexjs/shared';
+import type { CompiledNamespaces } from '../shared';
+
 import StateManager from './state-manager';
 
 // TODO: We will need to maintain the full path to the file eventually

package/lib/utils/evaluate-path.d.ts

@@ -7,6 +7,20 @@
  *
  */
 
+/**
+ * This is a extended version of the path evaluation code from Babel.
+ *
+ * The original can be found at:
+ * https://github.com/babel/babel/blob/main/packages/babel-traverse/src/path/evaluation.ts
+ *
+ * The following extensions were made:
+ * - It can accept a mapping from variable names to functions
+ *   which when encountered will be evaluated instead of deopting.
+ *   - The functions can be configured to accept the raw path instead of
+ *     static values to handle dynamic values.
+ * - It can handle object spreads when the spread value itself is statically evaluated.
+ */
+
 import type { NodePath } from '@babel/traverse';
 import * as t from '@babel/types';
 import StateManager from './state-manager';

package/lib/utils/evaluate-path.js.flow

@@ -7,7 +7,22 @@
  * @flow strict
  */
 
+/**
+ * This is a extended version of the path evaluation code from Babel.
+ *
+ * The original can be found at:
+ * https://github.com/babel/babel/blob/main/packages/babel-traverse/src/path/evaluation.ts
+ *
+ * The following extensions were made:
+ * - It can accept a mapping from variable names to functions
+ *   which when encountered will be evaluated instead of deopting.
+ *   - The functions can be configured to accept the raw path instead of
+ *     static values to handle dynamic values.
+ * - It can handle object spreads when the spread value itself is statically evaluated.
+ */
+
 import type { NodePath } from '../../flow_modules/@babel/traverse';
+
 import * as t from '../../flow_modules/@babel/types';
 import StateManager from './state-manager';
 export type FunctionConfig = {

package/lib/utils/js-to-ast.d.ts

@@ -7,7 +7,7 @@
  *
  */
 
-import type { FlatCompiledStyles } from '../../../shared/src/common-types';
+import type { FlatCompiledStyles } from '../shared/common-types';
 import * as t from '@babel/types';
 type NestedStringObject = Readonly<{
   [key: string]: string | number | null | boolean | NestedStringObject;

package/lib/utils/js-to-ast.js.flow

@@ -7,7 +7,7 @@
  * @flow strict
  */
 
-import type { FlatCompiledStyles } from '../../../shared/src/common-types';
+import type { FlatCompiledStyles } from '../shared/common-types';
 
 import * as t from '../../flow_modules/@babel/types';
 

package/lib/utils/state-manager.d.ts

@@ -7,14 +7,14 @@
  *
  */
 
-import * as t from '@babel/types';
 import type { PluginPass } from '@babel/core';
 import type { NodePath } from '@babel/traverse';
 import type {
   CompiledNamespaces,
   StyleXOptions as RuntimeOptions,
-} from '@stylexjs/shared';
+} from '../shared';
 import type { ImportOptions } from '@babel/helper-module-imports';
+import * as t from '@babel/types';
 type ImportAdditionOptions = Omit<
   Partial<ImportOptions>,
   'ensureLiveReference' | 'ensureNoContext'
@@ -45,8 +45,8 @@ export type StyleXOptions = Readonly<
       enableDebugClassNames?: boolean;
       enableDebugDataProp?: boolean;
       enableDevClassNames?: boolean;
+      enableInlinedConditionalMerge: boolean;
       enableMinifiedKeys?: boolean;
-      genConditionalClasses: boolean;
       importSources: ReadonlyArray<
         string | Readonly<{ from: string; as: string }>
       >;
@@ -66,8 +66,8 @@ export type StyleXOptions = Readonly<
     enableDebugClassNames?: boolean;
     enableDebugDataProp?: boolean;
     enableDevClassNames?: boolean;
+    enableInlinedConditionalMerge: boolean;
     enableMinifiedKeys?: boolean;
-    genConditionalClasses: boolean;
     importSources: ReadonlyArray<
       string | Readonly<{ from: string; as: string }>
     >;
@@ -114,7 +114,9 @@ declare class StateManager {
   readonly stylexIncludeImport: Set<string>;
   readonly stylexFirstThatWorksImport: Set<string>;
   readonly stylexKeyframesImport: Set<string>;
+  readonly stylexPositionTryImport: Set<string>;
   readonly stylexDefineVarsImport: Set<string>;
+  readonly stylexDefineConstsImport: Set<string>;
   readonly stylexCreateThemeImport: Set<string>;
   readonly stylexTypesImport: Set<string>;
   injectImportInserted: null | undefined | t.Identifier;
@@ -160,10 +162,36 @@ declare class StateManager {
   ): null | readonly [packageName: string, packageDir: string];
   getCanonicalFilePath(filePath: string): string;
   importPathResolver(importPath: string): ImportPathResolution;
-  addStyle(style: [string, { ltr: string; rtl?: string | null }, number]): void;
+  addStyle(
+    style: [
+      string,
+      (
+        | { ltr: string; rtl?: string | null }
+        | {
+            constKey: string;
+            constVal: string | number;
+            rtl?: string | null;
+            ltr: string;
+          }
+      ),
+      number,
+    ],
+  ): void;
   registerStyles(
     styles: ReadonlyArray<
-      [string, { ltr: string; rtl?: string | null }, number]
+      [
+        string,
+        (
+          | { ltr: string; rtl?: string | null }
+          | {
+              constKey: string;
+              constVal: string | number;
+              rtl?: string | null;
+              ltr: string;
+            }
+        ),
+        number,
+      ]
     >,
     path?: null | undefined | NodePath,
   ): void;

package/lib/utils/state-manager.js.flow

@@ -7,14 +7,15 @@
  * @flow strict
  */
 
-import * as t from '../../flow_modules/@babel/types';
 import type { PluginPass } from '../../flow_modules/@babel/core';
 import type { NodePath } from '../../flow_modules/@babel/traverse';
 import type {
   CompiledNamespaces,
   StyleXOptions as RuntimeOptions,
-} from '@stylexjs/shared';
+} from '../shared';
 import type { ImportOptions } from '../../flow_modules/@babel/helper-module-imports';
+
+import * as t from '../../flow_modules/@babel/types';
 type ImportAdditionOptions = Omit<
   Partial<ImportOptions>,
   'ensureLiveReference' | 'ensureNoContext',
@@ -46,8 +47,8 @@ export type StyleXOptions = $ReadOnly<{
   enableDebugClassNames?: boolean,
   enableDebugDataProp?: boolean,
   enableDevClassNames?: boolean,
+  enableInlinedConditionalMerge: boolean,
   enableMinifiedKeys?: boolean,
-  genConditionalClasses: boolean,
   importSources: $ReadOnlyArray<
     string | $ReadOnly<{ from: string, as: string }>,
   >,
@@ -76,7 +77,9 @@ declare export default class StateManager {
   +stylexIncludeImport: Set<string>;
   +stylexFirstThatWorksImport: Set<string>;
   +stylexKeyframesImport: Set<string>;
+  +stylexPositionTryImport: Set<string>;
   +stylexDefineVarsImport: Set<string>;
+  +stylexDefineConstsImport: Set<string>;
   +stylexCreateThemeImport: Set<string>;
   +stylexTypesImport: Set<string>;
   injectImportInserted: ?t.Identifier;
@@ -117,10 +120,36 @@ declare export default class StateManager {
   ): null | [+packageName: string, +packageDir: string];
   getCanonicalFilePath(filePath: string): string;
   importPathResolver(importPath: string): ImportPathResolution;
-  addStyle(style: [string, { ltr: string, rtl?: string | null }, number]): void;
+  addStyle(
+    style: [
+      string,
+      (
+        | { ltr: string, rtl?: string | null }
+        | {
+            constKey: string,
+            constVal: string | number,
+            rtl?: string | null,
+            ltr: string,
+          }
+      ),
+      number,
+    ],
+  ): void;
   registerStyles(
     styles: $ReadOnlyArray<
-      [string, { ltr: string, rtl?: string | null }, number],
+      [
+        string,
+        (
+          | { ltr: string, rtl?: string | null }
+          | {
+              constKey: string,
+              constVal: string | number,
+              rtl?: string | null,
+              ltr: string,
+            }
+        ),
+        number,
+      ],
     >,
     path?: ?NodePath<>,
   ): void;

package/lib/visitors/imports.d.ts

@@ -7,8 +7,8 @@
  *
  */
 
-import * as t from '@babel/types';
 import type { NodePath } from '@babel/traverse';
+import * as t from '@babel/types';
 import StateManager from '../utils/state-manager';
 export declare function readImportDeclarations(
   path: NodePath<t.ImportDeclaration>,

package/lib/visitors/imports.js.flow

@@ -7,8 +7,9 @@
  * @flow strict
  */
 
-import * as t from '../../flow_modules/@babel/types';
 import type { NodePath } from '../../flow_modules/@babel/traverse';
+
+import * as t from '../../flow_modules/@babel/types';
 import StateManager from '../utils/state-manager';
 
 // Read imports of react and remember the name of the local variables for later

package/lib/visitors/parse-stylex-create-arg.d.ts

@@ -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.
+ *
+ *
+ */
+
+import type { NodePath } from '@babel/traverse';
+import type { FunctionConfig } from '../utils/evaluate-path';
+import * as t from '@babel/types';
+import StateManager from '../utils/state-manager';
+type TInlineStyles = {
+  [$$Key$$: string]: {
+    readonly path: ReadonlyArray<string>;
+    readonly originalExpression: t.Expression;
+    readonly expression: t.Expression | t.PatternLike;
+  };
+};
+type DynamicFns = {
+  [$$Key$$: string]: readonly [
+    params: Array<t.Identifier>,
+    inlineStyles: Readonly<TInlineStyles>,
+  ];
+};
+export declare function evaluateStyleXCreateArg(
+  path: NodePath,
+  traversalState: StateManager,
+  functions: FunctionConfig,
+): Readonly<{
+  confident: boolean;
+  value: any;
+  deopt?: null | NodePath;
+  reason?: string;
+  fns?: DynamicFns;
+}>;