@stylexjs/babel-plugin 0.0.0-6e16619c

package/lib/visitors/parse-stylex-create-arg.js.flow

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

package/lib/visitors/stylex-attrs.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 '@babel/traverse';
+import * as t from '@babel/types';
+import StateManager from '../utils/state-manager';
+export declare function skipStylexAttrsChildren(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;
+declare function transformStylexAttrs(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;
+export default transformStylexAttrs;

package/lib/visitors/stylex-attrs.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 skipStylexAttrsChildren(
+  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 transformStylexAttrs(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;

package/lib/visitors/stylex-create/index.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 * as t from '@babel/types';
+import type { NodePath } from '@babel/traverse';
+import StateManager from '../../utils/state-manager';
+declare function transformStyleXCreate(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;
+export default transformStyleXCreate;

package/lib/visitors/stylex-create/index.js.flow

@@ -0,0 +1,24 @@
+/**
+ * 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 * 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 evaluates 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
+///    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>,
+  state: StateManager,
+): void;

package/lib/visitors/stylex-create/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 * as t from '@babel/types';
+import StateManager from '../../utils/state-manager';
+import { type FunctionConfig } from '../../utils/evaluate-path';
+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;
+}>;

package/lib/visitors/stylex-create/parse-stylex-create-arg.js.flow

@@ -0,0 +1,41 @@
+/**
+ * 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
+ */
+
+/* eslint-disable no-unused-vars */
+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';
+type TInlineStyles = {
+  [string]: {
+    +path: $ReadOnlyArray<string>,
+    +originalExpression: t.Expression,
+    +expression: t.Expression | t.PatternLike,
+  },
+};
+
+type DynamicFns = {
+  [string]: [
+    +params: Array<t.Identifier>,
+    +inlineStyles: $ReadOnly<TInlineStyles>,
+  ],
+};
+
+// This
+declare export function evaluateStyleXCreateArg(
+  path: NodePath<>,
+  traversalState: StateManager,
+  functions: FunctionConfig,
+): $ReadOnly<{
+  confident: boolean,
+  value: any,
+  deopt?: null | NodePath<>,
+  reason?: string,
+  fns?: DynamicFns,
+}>;

package/lib/visitors/stylex-create-theme.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 { NodePath } from '@babel/traverse';
+import * as t from '@babel/types';
+import StateManager from '../utils/state-manager';
+declare function transformStyleXCreateTheme(
+  callExpressionPath: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;
+export default transformStyleXCreateTheme;

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

@@ -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.
+ *
+ * @flow strict
+ */
+
+import type { NodePath } from '../../flow_modules/@babel/traverse';
+import * as t from '../../flow_modules/@babel/types';
+import StateManager from '../utils/state-manager';
+/// 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 transformStyleXCreateTheme(
+  callExpressionPath: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;

package/lib/visitors/stylex-create.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 { NodePath } from '@babel/traverse';
+import * as t from '@babel/types';
+import StateManager from '../utils/state-manager';
+declare function transformStyleXCreate(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;
+export default transformStyleXCreate;

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

@@ -0,0 +1,24 @@
+/**
+ * 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';
+/// 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 evaluates 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
+///    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>,
+  state: StateManager,
+): void;

package/lib/visitors/stylex-define-consts.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 { NodePath } from '@babel/traverse';
+import * as t from '@babel/types';
+import StateManager from '../utils/state-manager';
+declare function transformStyleXDefineConsts(
+  callExpressionPath: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;
+export default transformStyleXDefineConsts;

package/lib/visitors/stylex-define-consts.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';
+
+/// This function looks for `stylex.defineConsts` calls and transforms them.
+/// 1. It finds and validates the first argument to `stylex.defineConsts`.
+/// 2. It evaluates the style const object to a JS value, erroring on non-static or non-object values.
+/// 3. It generates a theme name from the filename and export name for hashing.
+/// 4. It invokes `stylexDefineConsts` to transform the JS object and collect injected styles.
+/// 5. It creates a map of key-value pairs of constants to be inlined.
+/// 6. It replaces the call with the transformed AST and registers the styles in state.
+declare export default function transformStyleXDefineConsts(
+  callExpressionPath: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;

package/lib/visitors/stylex-define-vars.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 { NodePath } from '@babel/traverse';
+import * as t from '@babel/types';
+import StateManager from '../utils/state-manager';
+declare function transformStyleXDefineVars(
+  callExpressionPath: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;
+export default transformStyleXDefineVars;

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

@@ -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.
+ *
+ * @flow strict
+ */
+
+import type { NodePath } from '../../flow_modules/@babel/traverse';
+import * as t from '../../flow_modules/@babel/types';
+import StateManager from '../utils/state-manager';
+/// This function looks for `stylex.defineVars` calls and transforms them.
+/// 1. It finds the first argument to `stylex.defineVars` and validates it.
+/// 2. It evaluates the style object to get a JS object. This also handles local constants automatically.
+/// 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 transformStyleXDefineVars(
+  callExpressionPath: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;

package/lib/visitors/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 { NodePath } from '@babel/traverse';
+import * as t from '@babel/types';
+import StateManager from '../utils/state-manager';
+declare function transformStyleXKeyframes(
+  path: NodePath<t.VariableDeclarator>,
+  state: StateManager,
+): void;
+export default transformStyleXKeyframes;

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

@@ -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.
+ *
+ * @flow strict
+ */
+
+import type { NodePath } from '../../flow_modules/@babel/traverse';
+import * as t from '../../flow_modules/@babel/types';
+import StateManager from '../utils/state-manager';
+/// This function looks for `stylex.keyframes` calls and transforms them.
+/// 1. It finds the first argument to `stylex.keyframes` and validates it.
+/// 2. It evaluates the style object to get a JS object. This also handles local constants automatically.
+/// 4. It uses the `stylexKeyframes` 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 transformStyleXKeyframes(
+  path: NodePath<t.VariableDeclarator>,
+  state: StateManager,
+): void;

package/lib/visitors/stylex-merge.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 '@babel/traverse';
+import * as t from '@babel/types';
+import StateManager from '../utils/state-manager';
+export declare function skipStylexMergeChildren(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;
+declare function transformStyleXMerge(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;
+export default transformStyleXMerge;

package/lib/visitors/stylex-merge.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 skipStylexMergeChildren(
+  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 transformStyleXMerge(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;

package/lib/visitors/stylex-position-try.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 { NodePath } from '@babel/traverse';
+import * as t from '@babel/types';
+import StateManager from '../utils/state-manager';
+declare function transformStyleXPositionTry(
+  path: NodePath<t.VariableDeclarator>,
+  state: StateManager,
+): void;
+export default transformStyleXPositionTry;

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

@@ -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.
+ *
+ * @flow strict
+ */
+
+import type { NodePath } from '../../flow_modules/@babel/traverse';
+import * as t from '../../flow_modules/@babel/types';
+import StateManager from '../utils/state-manager';
+/// This function looks for `stylex.positionTry` calls within variable declarations and transforms them.
+/// 1. It finds the first argument to `stylex.positionTry` and validates it.
+/// 2. It evaluates the style object to get a JS object. This also handles local constants automatically.
+/// 3. The actual transformation is done by `stylexPositionTry` from `../shared`
+/// 4. The results are replaced, and generated CSS rules are injected as needed.
+
+declare export default function transformStyleXPositionTry(
+  path: NodePath<t.VariableDeclarator>,
+  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 '@babel/traverse';
+import * as t from '@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/lib/visitors/stylex-view-transition-class.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 { NodePath } from '@babel/traverse';
+import * as t from '@babel/types';
+import StateManager from '../utils/state-manager';
+declare function transformStyleXViewTransitionClass(
+  path: NodePath<t.VariableDeclarator>,
+  state: StateManager,
+): void;
+export default transformStyleXViewTransitionClass;

package/lib/visitors/stylex-view-transition-class.js.flow

@@ -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.
+ *
+ * @flow strict
+ */
+
+import type { NodePath } from '../../flow_modules/@babel/traverse';
+import * as t from '../../flow_modules/@babel/types';
+import StateManager from '../utils/state-manager';
+/// This function looks for `stylex.viewTransitionClass` calls within variable declarations and transforms them.
+/// 1. It finds the first argument to `stylex.viewTransitionClass` and validates it.
+/// 2. It evaluates the style object to get a JS object. This also handles local constants automatically.
+/// 3. The actual transform is done by `stylexViewTransitionClass` from `../shared`
+/// 4. The results are replaced, and generated CSS rules are injected as needed.
+
+declare export default function transformStyleXViewTransitionClass(
+  path: NodePath<t.VariableDeclarator>,
+  state: StateManager,
+): void;

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@stylexjs/babel-plugin",
+  "version": "0.0.0-6e16619c",
+  "description": "StyleX babel plugin.",
+  "main": "lib/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/facebook/stylex.git"
+  },
+  "license": "MIT",
+  "scripts": {
+    "prebuild": "gen-types -i src/ -o lib/",
+    "build": "rollup --config ./rollup.config.mjs",
+    "build-haste": "HASTE=true rollup --config ./rollup.config.mjs",
+    "build-watch": "rollup --config ./rollup.config.mjs --watch",
+    "test": "jest --coverage"
+  },
+  "dependencies": {
+    "@babel/helper-module-imports": "^7.25.9",
+    "@babel/core": "^7.26.8",
+    "@babel/traverse": "^7.26.8",
+    "@babel/types": "^7.26.8",
+    "@dual-bundle/import-meta-resolve": "^4.1.0",
+    "@stylexjs/stylex": "0.15.1",
+    "postcss-value-parser": "^4.1.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-alias": "^5.1.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-replace": "^6.0.1",
+    "babel-plugin-syntax-hermes-parser": "^0.26.0",
+    "rollup": "^4.24.0",
+    "scripts": "0.15.1"
+  },
+  "files": [
+    "flow_modules/*",
+    "lib/*"
+  ]
+}