@stylexjs/babel-plugin 0.2.0-beta.21 → 0.2.0-beta.22

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

@@ -7,7 +7,7 @@
  *
  */
 
-import type { NodePath } from '@babel/traverse';
+import type { NodePath } from '../../flow_modules/@babel/traverse';
 import StateManager from './state-manager';
 export type FunctionConfig = {
   identifiers: {

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

@@ -7,10 +7,16 @@
  *
  */
 
-import * as t from '@babel/types';
+import * as t from '../../flow_modules/@babel/types';
 import { IncludedStyles } from '@stylexjs/shared';
 type NestedStringObject = Readonly<{
-  [key: string]: string | null | boolean | NestedStringObject | IncludedStyles;
+  [key: string]:
+    | string
+    | number
+    | null
+    | boolean
+    | NestedStringObject
+    | IncludedStyles;
 }>;
 export declare function convertObjectToAST(
   obj: NestedStringObject,

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

@@ -11,7 +11,13 @@ import * as t from '../../flow_modules/@babel/types';
 import { IncludedStyles } from '@stylexjs/shared';
 
 type NestedStringObject = $ReadOnly<{
-  [key: string]: string | null | boolean | NestedStringObject | IncludedStyles,
+  [key: string]:
+    | string
+    | number
+    | null
+    | boolean
+    | NestedStringObject
+    | IncludedStyles,
 }>;
 
 declare export function convertObjectToAST(

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

@@ -7,8 +7,8 @@
  *
  */
 
-import type { PluginPass } from '@babel/core';
-import type { NodePath } from '@babel/traverse';
+import type { PluginPass } from '../../flow_modules/@babel/core';
+import type { NodePath } from '../../flow_modules/@babel/traverse';
 import type {
   CompiledNamespaces,
   StyleXOptions as RuntimeOptions,
@@ -39,12 +39,13 @@ type StyleXOptions = Omit<
 declare class StateManager {
   readonly _state: PluginPass;
   readonly stylexImport: Set<string>;
+  readonly stylexPropsImport: Set<string>;
   readonly stylexCreateImport: Set<string>;
   readonly stylexIncludeImport: Set<string>;
   readonly stylexFirstThatWorksImport: Set<string>;
   readonly stylexKeyframesImport: Set<string>;
-  readonly stylexCreateVarsImport: Set<string>;
-  readonly stylexOverrideVarsImport: Set<string>;
+  readonly stylexDefineVarsImport: Set<string>;
+  readonly stylexCreateThemeImport: Set<string>;
   readonly stylexTypesImport: Set<string>;
   readonly styleMap: Map<string, CompiledNamespaces>;
   readonly styleVars: Map<string, NodePath>;

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

@@ -44,12 +44,13 @@ type StyleXOptions = {
 declare export default class StateManager {
   +_state: PluginPass;
   +stylexImport: Set<string>;
+  +stylexPropsImport: Set<string>;
   +stylexCreateImport: Set<string>;
   +stylexIncludeImport: Set<string>;
   +stylexFirstThatWorksImport: Set<string>;
   +stylexKeyframesImport: Set<string>;
-  +stylexCreateVarsImport: Set<string>;
-  +stylexOverrideVarsImport: Set<string>;
+  +stylexDefineVarsImport: Set<string>;
+  +stylexCreateThemeImport: Set<string>;
   +stylexTypesImport: Set<string>;
   +styleMap: Map<string, CompiledNamespaces>;
   +styleVars: Map<string, NodePath<>>;

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

package/lib/visitors/stylex-create/index.d.ts

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

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

@@ -8,8 +8,8 @@
  * @flow strict
  */
 
-import type { NodePath } from '@babel/traverse';
-import * as t from '@babel/types';
+import type { NodePath } from '../../../flow_modules/@babel/traverse';
+import * as t from '../../../flow_modules/@babel/types';
 import StateManager from '../../utils/state-manager';
 import { type FunctionConfig } from '../../utils/evaluate-path';
 export declare function evaluateStyleXCreateArg(

package/lib/visitors/{stylex-create.d.ts → stylex-create-theme.d.ts}

@@ -7,11 +7,11 @@
  *
  */
 
-import * as t from '@babel/types';
-import type { NodePath } from '@babel/traverse';
+import * as t from '../../flow_modules/@babel/types';
+import type { NodePath } from '../../flow_modules/@babel/traverse';
 import StateManager from '../utils/state-manager';
-declare function transformStyleXCreate(
-  path: NodePath<t.CallExpression>,
+declare function transformStyleXCreateTheme(
+  callExpressionPath: NodePath<t.CallExpression>,
   state: StateManager,
 ): void;
-export default transformStyleXCreate;
+export default transformStyleXCreateTheme;

package/lib/visitors/{stylex-create.js.flow → stylex-create-theme.js.flow}

@@ -10,15 +10,14 @@
 import * as t from '../../flow_modules/@babel/types';
 import type { NodePath } from '../../flow_modules/@babel/traverse';
 import StateManager from '../utils/state-manager';
-/// This function looks for `stylex.create` calls and transforms them.
-//. 1. It finds the first argument to `stylex.create` and validates it.
-/// 2. It pre-processes valid-dynamic parts of style object such as custom presets (spreads)
-/// 3. It envalues the style object to get a JS object. This also handles local constants automatically.
-/// 4. It uses the `stylexCreate` from `@stylexjs/shared` to transform the JS
+/// This function looks for `stylex.createTheme` calls and transforms them.
+//. 1. It finds the first two arguments to `stylex.createTheme` and validates those.
+/// 2. This handles local constants automatically.
+/// 4. It uses the `stylexCreateTheme` from `@stylexjs/shared` to transform the JS
 ///    object and to get a list of injected styles.
 /// 5. It converts the resulting Object back into an AST and replaces the call with it.
 /// 6. It also inserts `stylex.inject` calls above the current statement as needed.
-declare export default function transformStyleXCreate(
-  path: NodePath<t.CallExpression>,
+declare export default function transformStyleXCreateTheme(
+  callExpressionPath: NodePath<t.CallExpression>,
   state: StateManager,
 ): void;

package/lib/visitors/{stylex-create-vars.d.ts → stylex-define-vars.d.ts}

@@ -7,11 +7,11 @@
  *
  */
 
-import * as t from '@babel/types';
-import type { NodePath } from '@babel/traverse';
+import * as t from '../../flow_modules/@babel/types';
+import type { NodePath } from '../../flow_modules/@babel/traverse';
 import StateManager from '../utils/state-manager';
-declare function transformStyleXCreateVars(
+declare function transformStyleXDefineVars(
   callExpressionPath: NodePath<t.CallExpression>,
   state: StateManager,
 ): void;
-export default transformStyleXCreateVars;
+export default transformStyleXDefineVars;

package/lib/visitors/{stylex-create-vars.js.flow → stylex-define-vars.js.flow}

@@ -10,14 +10,14 @@
 import * as t from '../../flow_modules/@babel/types';
 import type { NodePath } from '../../flow_modules/@babel/traverse';
 import StateManager from '../utils/state-manager';
-/// This function looks for `stylex.createVars` calls and transforms them.
-//. 1. It finds the first argument to `stylex.createVars` and validates it.
+/// This function looks for `stylex.defineVars` calls and transforms them.
+//. 1. It finds the first argument to `stylex.defineVars` and validates it.
 /// 2. It envalues the style object to get a JS object. This also handles local constants automatically.
-/// 4. It uses the `stylexCreateVars` from `@stylexjs/shared` to transform the JS
+/// 4. It uses the `stylexDefineVars` from `@stylexjs/shared` to transform the JS
 ///    object and to get a list of injected styles.
 /// 5. It converts the resulting Object back into an AST and replaces the call with it.
 /// 6. It also inserts `stylex.inject` calls above the current statement as needed.
-declare export default function transformStyleXCreateVars(
+declare export default function transformStyleXDefineVars(
   callExpressionPath: NodePath<t.CallExpression>,
   state: StateManager,
 ): void;

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

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

package/lib/visitors/stylex-merge.d.ts

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

package/lib/visitors/stylex-override-vars.d.ts

@@ -7,11 +7,11 @@
  *
  */
 
-import * as t from '@babel/types';
-import type { NodePath } from '@babel/traverse';
+import * as t from '../../flow_modules/@babel/types';
+import type { NodePath } from '../../flow_modules/@babel/traverse';
 import StateManager from '../utils/state-manager';
-declare function transformStyleXOverrideVars(
+declare function transformStyleXCreateTheme(
   callExpressionPath: NodePath<t.CallExpression>,
   state: StateManager,
 ): void;
-export default transformStyleXOverrideVars;
+export default transformStyleXCreateTheme;

package/lib/visitors/stylex-override-vars.js.flow

@@ -10,14 +10,14 @@
 import * as t from '../../flow_modules/@babel/types';
 import type { NodePath } from '../../flow_modules/@babel/traverse';
 import StateManager from '../utils/state-manager';
-/// This function looks for `stylex.unstable_overrideVars` calls and transforms them.
-//. 1. It finds the first two arguments to `stylex.unstable_overrideVars` and validates those.
+/// This function looks for `stylex.createTheme` calls and transforms them.
+//. 1. It finds the first two arguments to `stylex.createTheme` and validates those.
 /// 2. This handles local constants automatically.
-/// 4. It uses the `stylexOverrideVars` from `@stylexjs/shared` to transform the JS
+/// 4. It uses the `stylexCreateTheme` from `@stylexjs/shared` to transform the JS
 ///    object and to get a list of injected styles.
 /// 5. It converts the resulting Object back into an AST and replaces the call with it.
 /// 6. It also inserts `stylex.inject` calls above the current statement as needed.
-declare export default function transformStyleXOverrideVars(
+declare export default function transformStyleXCreateTheme(
   callExpressionPath: NodePath<t.CallExpression>,
   state: StateManager,
 ): void;

package/lib/visitors/stylex-props.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 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 '../../flow_modules/@babel/traverse';
+import * as t from '../../flow_modules/@babel/types';
+import StateManager from '../utils/state-manager';
+export declare function skipStylexPropsChildren(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;
+declare function transformStylexProps(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;
+export default transformStylexProps;

package/lib/visitors/stylex-props.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 { NodePath } from '../../flow_modules/@babel/traverse';
+
+import * as t from '../../flow_modules/@babel/types';
+import StateManager from '../utils/state-manager';
+declare export function skipStylexPropsChildren(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;
+
+// If a `stylex()` call uses styles that are all locally defined,
+// This function is able to pre-compute that into a single string or
+// a single expression of strings and ternary expressions.
+declare export default function transformStylexProps(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/babel-plugin",
-  "version": "0.2.0-beta.21",
+  "version": "0.2.0-beta.22",
   "description": "StyleX babel plugin.",
   "main": "lib/index.js",
   "repository": "https://github.com/facebook/stylex",
@@ -12,7 +12,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@stylexjs/shared": "0.2.0-beta.21"
+    "@stylexjs/shared": "0.2.0-beta.22"
   },
   "peerDependencies": {
     "@babel/core": "^7.19.6",

package/lib/visitors/stylex-create/parse-style-function.d.ts

@@ -1,18 +0,0 @@
-/* eslint-disable no-unused-vars */
-/**
- * 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 { NodePath } from '@babel/traverse';
-import StateManager from '../../utils/state-manager';
-import { type FunctionConfig } from '../../utils/evaluate-path';
-export declare function evaluateStyleFunction(
-  path: NodePath,
-  traversalState: StateManager,
-  functions: FunctionConfig,
-): { confident: boolean; value: any; deopt?: null | NodePath };

package/lib/visitors/stylex-create/parse-style-function.js.flow

@@ -1,23 +0,0 @@
-/* eslint-disable no-unused-vars */
-/**
- * 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 { NodePath } from '../../../flow_modules/@babel/traverse';
-import StateManager from '../../utils/state-manager';
-import { type FunctionConfig } from '../../utils/evaluate-path';
-// This
-declare export function evaluateStyleFunction(
-  path: NodePath<>,
-  traversalState: StateManager,
-  functions: FunctionConfig,
-): {
-  confident: boolean,
-  value: any,
-  deopt?: null | NodePath<>,
-};