@stylexjs/babel-plugin 0.12.0 → 0.13.1

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-create-theme.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';
 declare function transformStyleXCreateTheme(
   callExpressionPath: NodePath<t.CallExpression>,

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

@@ -7,8 +7,8 @@
  * @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';
 /// This function looks for `stylex.createTheme` calls and transforms them.
 /// 1. It finds the first two arguments to `stylex.createTheme` and validates those.

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

@@ -7,22 +7,9 @@
  *
  */
 
-import * as t from '@babel/types';
 import type { NodePath } from '@babel/traverse';
+import * as t from '@babel/types';
 import StateManager from '../utils/state-manager';
-/**
- * This function looks for `stylex.defineConsts` calls and transforms them.
- *
- * 1. It finds the first argument to `stylex.defineConsts` and validates it.
- * 2. It evaluates the constants object to get a JS object.
- * 3. It uses `styleXDefineConsts` to transform the object into a structured format.
- * 4. It converts the resulting object back into an AST and replaces the function call with it.
- * 5. The transformed constants are stored in metadata and used during rule processing.
- * 6. During CSS rule generation, any references to `var(--keyhash)` (or `var(--keyhash, fallback)`)
- *    are replaced with their corresponding `constVal` from `defineConsts`.
- * 7. Unlike `stylex.defineVars`, `defineConsts` does not generate runtime CSS variables but instead
- *    directly inlines the resolved values into the final CSS output.
- */
 declare function transformStyleXDefineConsts(
   callExpressionPath: NodePath<t.CallExpression>,
   state: StateManager,

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

@@ -7,23 +7,18 @@
  * @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';
 
-/**
- * This function looks for `stylex.defineConsts` calls and transforms them.
- *
- * 1. It finds the first argument to `stylex.defineConsts` and validates it.
- * 2. It evaluates the constants object to get a JS object.
- * 3. It uses `styleXDefineConsts` to transform the object into a structured format.
- * 4. It converts the resulting object back into an AST and replaces the function call with it.
- * 5. The transformed constants are stored in metadata and used during rule processing.
- * 6. During CSS rule generation, any references to `var(--keyhash)` (or `var(--keyhash, fallback)`)
- *    are replaced with their corresponding `constVal` from `defineConsts`.
- * 7. Unlike `stylex.defineVars`, `defineConsts` does not generate runtime CSS variables but instead
- *    directly inlines the resolved values into the final CSS output.
- */
+/// 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,

package/lib/visitors/stylex-define-vars.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';
 declare function transformStyleXDefineVars(
   callExpressionPath: NodePath<t.CallExpression>,

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

@@ -7,8 +7,8 @@
  * @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';
 /// This function looks for `stylex.defineVars` calls and transforms them.
 /// 1. It finds the first argument to `stylex.defineVars` and validates it.

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 '@babel/types';
 import StateManager from '../utils/state-manager';
 declare function transformStyleXKeyframes(
   path: NodePath<t.VariableDeclarator>,

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

@@ -7,8 +7,8 @@
  * @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';
 /// This function looks for `stylex.keyframes` calls and transforms them.
 /// 1. It finds the first argument to `stylex.keyframes` and validates it.

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/babel-plugin",
-  "version": "0.12.0",
+  "version": "0.13.1",
   "description": "StyleX babel plugin.",
   "main": "lib/index.js",
   "repository": {
@@ -13,7 +13,7 @@
     "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"
+    "test": "jest --coverage"
   },
   "dependencies": {
     "@babel/helper-module-imports": "^7.25.9",
@@ -21,8 +21,8 @@
     "@babel/traverse": "^7.26.8",
     "@babel/types": "^7.26.8",
     "@dual-bundle/import-meta-resolve": "^4.1.0",
-    "@stylexjs/shared": "0.12.0",
-    "@stylexjs/stylex": "0.12.0"
+    "@stylexjs/stylex": "0.13.1",
+    "postcss-value-parser": "^4.1.0"
   },
   "devDependencies": {
     "@rollup/plugin-alias": "^5.1.1",
@@ -31,13 +31,9 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-replace": "^6.0.1",
-    "rollup": "^4.24.0"
-  },
-  "jest": {
-    "verbose": true,
-    "snapshotFormat": {
-      "printBasicPrototype": false
-    }
+    "babel-plugin-syntax-hermes-parser": "^0.26.0",
+    "rollup": "^4.24.0",
+    "scripts": "0.13.1"
   },
   "files": [
     "flow_modules/*",