@stylexjs/babel-plugin 0.11.1 → 0.12.0

package/lib/index.d.ts

@@ -1,3 +1,4 @@
+// Solves the issue: https://github.com/facebook/stylex/issues/889
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -43,4 +44,4 @@ export type StyleXTransformObj = Readonly<{
   processStylexRules: typeof processStylexRules;
 }>;
 declare const $$EXPORT_DEFAULT_DECLARATION$$: StyleXTransformObj;
-export default $$EXPORT_DEFAULT_DECLARATION$$;
+export = $$EXPORT_DEFAULT_DECLARATION$$;

package/lib/index.js

@@ -735,6 +735,7 @@ class StateManager {
     const enableDebugClassNames = logAndDefault(boolean(), options.enableDebugClassNames ?? true, true, 'options.enableDebugClassNames');
     const enableDebugDataProp = logAndDefault(boolean(), options.enableDebugDataProp ?? true, true, 'options.enableDebugDataProp');
     const enableDevClassNames = logAndDefault(boolean(), options.enableDevClassNames ?? false, false, 'options.enableDevClassNames');
+    const enableMinifiedKeys = logAndDefault(boolean(), options.enableMinifiedKeys ?? true, true, 'options.enableMinifiedKeys');
     const test = logAndDefault(boolean(), options.test ?? false, false, 'options.test');
     const configRuntimeInjection = logAndDefault(checkRuntimeInjection, options.runtimeInjection ?? dev, dev, 'options.runtimeInjection');
     const runtimeInjection = configRuntimeInjection === true ? DEFAULT_INJECT_PATH : configRuntimeInjection === false ? undefined : configRuntimeInjection;
@@ -763,6 +764,7 @@ class StateManager {
       enableDebugClassNames,
       enableDebugDataProp,
       enableDevClassNames,
+      enableMinifiedKeys,
       genConditionalClasses,
       importSources,
       rewriteAliases: typeof options.rewriteAliases === 'boolean' ? options.rewriteAliases : false,
@@ -1240,7 +1242,8 @@ function addSourceMapData(obj, babelPath, state) {
     const currentFile = babelPath.hub.file;
     const sourceMap = currentFile.codeMap;
     const styleNodePath = babelPath.get('arguments.0.properties').find(prop => {
-      return prop.node.key.name === key || String(prop.node.key.value) === key;
+      const k = prop.node.key;
+      return t__namespace.isIdentifier(k) && k.name === key || t__namespace.isStringLiteral(k) && k.value === key || t__namespace.isNumericLiteral(k) && String(k.value) === key;
     });
     if (styleNodePath) {
       const generatedLineNumber = styleNodePath.node.loc?.start.line;
@@ -1403,8 +1406,12 @@ function evaluateThemeRef(fileName, exportName, state) {
       exportName,
       key
     });
-    const debug = state.traversalState.options.debug;
-    const varName = debug === true ? key + '-' + state.traversalState.options.classNamePrefix + shared.utils.hash(strToHash) : state.traversalState.options.classNamePrefix + shared.utils.hash(strToHash);
+    const {
+      debug,
+      enableDebugClassNames
+    } = state.traversalState.options;
+    const varSafeKey = (key[0] >= '0' && key[0] <= '9' ? `_${key}` : key).replace(/[^a-zA-Z0-9]/g, '_');
+    const varName = debug && enableDebugClassNames ? varSafeKey + '-' + state.traversalState.options.classNamePrefix + shared.utils.hash(strToHash) : state.traversalState.options.classNamePrefix + shared.utils.hash(strToHash);
     if (key === '__themeName__') {
       return varName;
     }
@@ -1676,7 +1683,7 @@ function _evaluate(path, state) {
             deopt: resultDeopt,
             reason: deoptReason,
             value
-          } = evaluate(keyPath, state.traversalState, state.functions);
+          } = evaluate(keyPath, state.traversalState, state.functions, state.seen);
           if (!confident) {
             resultDeopt && deopt(resultDeopt, state, deoptReason ?? 'unknown error');
             return;
@@ -1688,7 +1695,7 @@ function _evaluate(path, state) {
           key = keyPath.node.value;
         }
         const valuePath = prop.get('value');
-        let value = evaluate(valuePath, state.traversalState, state.functions);
+        let value = evaluate(valuePath, state.traversalState, state.functions, state.seen);
         if (!value.confident) {
           value.deopt && deopt(value.deopt, state, value.reason ?? 'unknown error');
           return;
@@ -1911,12 +1918,13 @@ function evaluate(path, traversalState) {
     identifiers: {},
     memberExpressions: {}
   };
+  let seen = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : new Map();
   const addedImports = importsForState.get(traversalState) ?? new Set();
   importsForState.set(traversalState, addedImports);
   const state = {
     confident: true,
     deoptPath: null,
-    seen: new Map(),
+    seen,
     addedImports,
     functions,
     traversalState
@@ -2768,7 +2776,7 @@ function requireMessages () {
 	Object.defineProperty(messages, "__esModule", {
 	  value: true
 	});
-	messages.UNKNOWN_PROP_KEY = messages.UNKNOWN_NAMESPACE = messages.UNEXPECTED_ARGUMENT = messages.UNBOUND_STYLEX_CALL_VALUE = messages.ONLY_TOP_LEVEL = messages.ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS = messages.NO_PROJECT_ROOT_DIRECTORY = messages.NO_PARENT_PATH = messages.NO_CONDITIONAL_SHORTHAND = messages.NON_STATIC_VALUE = messages.NON_STATIC_KEYFRAME_VALUE = messages.NON_OBJECT_KEYFRAME = messages.NON_OBJECT_FOR_STYLEX_KEYFRAMES_CALL = messages.NON_OBJECT_FOR_STYLEX_CALL = messages.NON_EXPORT_NAMED_DECLARATION = messages.NON_CONTIGUOUS_VARS = messages.LOCAL_ONLY = messages.LINT_UNCLOSED_FUNCTION = messages.INVALID_SPREAD = messages.INVALID_PSEUDO_OR_AT_RULE = messages.INVALID_PSEUDO = messages.ILLEGAL_PROP_VALUE = messages.ILLEGAL_PROP_ARRAY_VALUE = messages.ILLEGAL_NESTED_PSEUDO = messages.ILLEGAL_NAMESPACE_VALUE = messages.ILLEGAL_NAMESPACE_TYPE = messages.ILLEGAL_ARG_LENGTH_FOR_KEYFRAMES = messages.ILLEGAL_ARGUMENT_LENGTH = messages.EXPECTED_FUNCTION_CALL = messages.ESCAPED_STYLEX_VALUE = messages.DUPLICATE_CONDITIONAL = messages.ANONYMOUS_THEME = void 0;
+	messages.UNKNOWN_PROP_KEY = messages.UNKNOWN_NAMESPACE = messages.UNEXPECTED_ARGUMENT = messages.UNBOUND_STYLEX_CALL_VALUE = messages.ONLY_TOP_LEVEL = messages.ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS = messages.NO_PROJECT_ROOT_DIRECTORY = messages.NO_PARENT_PATH = messages.NO_OBJECT_SPREADS = messages.NO_CONDITIONAL_SHORTHAND = messages.NON_STATIC_VALUE = messages.NON_STATIC_KEYFRAME_VALUE = messages.NON_OBJECT_KEYFRAME = messages.NON_OBJECT_FOR_STYLEX_KEYFRAMES_CALL = messages.NON_OBJECT_FOR_STYLEX_CALL = messages.NON_EXPORT_NAMED_DECLARATION = messages.NON_CONTIGUOUS_VARS = messages.LOCAL_ONLY = messages.LINT_UNCLOSED_FUNCTION = messages.INVALID_SPREAD = messages.INVALID_PSEUDO_OR_AT_RULE = messages.INVALID_PSEUDO = messages.ILLEGAL_PROP_VALUE = messages.ILLEGAL_PROP_ARRAY_VALUE = messages.ILLEGAL_NESTED_PSEUDO = messages.ILLEGAL_NAMESPACE_VALUE = messages.ILLEGAL_NAMESPACE_TYPE = messages.ILLEGAL_ARG_LENGTH_FOR_KEYFRAMES = messages.ILLEGAL_ARGUMENT_LENGTH = messages.EXPECTED_FUNCTION_CALL = messages.ESCAPED_STYLEX_VALUE = messages.DUPLICATE_CONDITIONAL = messages.ANONYMOUS_THEME = void 0;
 	messages.ILLEGAL_ARGUMENT_LENGTH = 'stylex.create() should have 1 argument.';
 	messages.ILLEGAL_ARG_LENGTH_FOR_KEYFRAMES = 'stylex.keyframes() should have 1 argument.';
 	messages.NON_STATIC_VALUE = 'Only static values are allowed inside of a stylex.create() call.';
@@ -2801,6 +2809,7 @@ function requireMessages () {
 	messages.ANONYMOUS_THEME = 'stylex.createTheme() must be bound to a named constant.';
 	messages.ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS = 'Only named parameters are allowed in Dynamic Style functions. Destructuring, spreading or default values are not allowed.';
 	messages.NON_CONTIGUOUS_VARS = 'All variables passed to `stylex.firstThatWorks` must be contiguous.';
+	messages.NO_OBJECT_SPREADS = 'Object spreads are not allowed in stylex.create call.';
 	return messages;
 }
 
@@ -3759,11 +3768,22 @@ function transformStyleXCreate(path, state) {
     const plainObject = value;
     const injectedInheritStyles = {};
     if (fns != null) {
-      const dynamicFnsNames = Object.values(fns)?.map(entry => Object.keys(entry[1])).flat();
-      dynamicFnsNames.forEach(fnsName => {
-        injectedInheritStyles[fnsName] = {
+      const dynamicFnsNames = Object.values(fns)?.map(entry => Object.entries(entry[1]).map(_ref => {
+        let [variableName, obj] = _ref;
+        return {
+          variableName,
+          path: obj.path
+        };
+      })).flat();
+      dynamicFnsNames.forEach(_ref2 => {
+        let {
+          variableName,
+          path
+        } = _ref2;
+        const isPseudoElement = path.some(p => p.startsWith('::'));
+        injectedInheritStyles[variableName] = {
           priority: 0,
-          ltr: `@property ${fnsName} { syntax: "*"; inherits: false;}`,
+          ltr: `@property ${variableName} { syntax: "*";${isPseudoElement ? '' : ' inherits: false;'}}`,
           rtl: null
         };
       });
@@ -3812,8 +3832,8 @@ function transformStyleXCreate(path, state) {
             for (const [className, classPaths] of Object.entries(classPathsPerNamespace[key])) {
               origClassPaths[className] = classPaths.join('_');
             }
-            let dynamicStyles = Object.entries(inlineStyles).map(_ref => {
-              let [_key, v] = _ref;
+            let dynamicStyles = Object.entries(inlineStyles).map(_ref3 => {
+              let [_key, v] = _ref3;
               return {
                 expression: v.originalExpression,
                 key: v.path.slice(0, v.path.findIndex(p => !p.startsWith(':') && !p.startsWith('@')) + 1).join('_'),
@@ -3832,10 +3852,10 @@ function transformStyleXCreate(path, state) {
                 const objProp = prop;
                 const propKey = objProp.key.type === 'Identifier' && !objProp.computed ? objProp.key.name : objProp.key.type === 'StringLiteral' ? objProp.key.value : null;
                 if (propKey != null) {
-                  const dynamicMatch = dynamicStyles.filter(_ref2 => {
+                  const dynamicMatch = dynamicStyles.filter(_ref4 => {
                     let {
                       key
-                    } = _ref2;
+                    } = _ref4;
                     return key === propKey;
                   });
                   if (dynamicMatch.length > 0) {
@@ -3844,26 +3864,26 @@ function transformStyleXCreate(path, state) {
                       const classList = value.value.split(' ');
                       if (classList.length === 1) {
                         const cls = classList[0];
-                        const expr = dynamicMatch.find(_ref3 => {
+                        const expr = dynamicMatch.find(_ref5 => {
                           let {
                             path
-                          } = _ref3;
+                          } = _ref5;
                           return origClassPaths[cls] === path;
                         })?.expression;
                         if (expr != null) {
                           objProp.value = t__namespace.conditionalExpression(t__namespace.binaryExpression('==', expr, t__namespace.nullLiteral()), t__namespace.nullLiteral(), value);
                         }
-                      } else if (classList.some(cls => dynamicMatch.find(_ref4 => {
+                      } else if (classList.some(cls => dynamicMatch.find(_ref6 => {
                         let {
                           path
-                        } = _ref4;
+                        } = _ref6;
                         return origClassPaths[cls] === path;
                       }))) {
                         const exprArray = classList.map((cls, index) => {
-                          const expr = dynamicMatch.find(_ref5 => {
+                          const expr = dynamicMatch.find(_ref7 => {
                             let {
                               path
-                            } = _ref5;
+                            } = _ref7;
                             return origClassPaths[cls] === path;
                           })?.expression;
                           const suffix = index === classList.length - 1 ? '' : ' ';
@@ -3882,8 +3902,8 @@ function transformStyleXCreate(path, state) {
                 }
                 return objProp;
               });
-              prop.value = t__namespace.arrowFunctionExpression(params, t__namespace.arrayExpression([value, t__namespace.objectExpression(Object.entries(inlineStyles).map(_ref6 => {
-                let [key, value] = _ref6;
+              prop.value = t__namespace.arrowFunctionExpression(params, t__namespace.arrayExpression([value, t__namespace.objectExpression(Object.entries(inlineStyles).map(_ref8 => {
+                let [key, value] = _ref8;
                 return t__namespace.objectProperty(t__namespace.stringLiteral(key), value.expression);
               }))]));
             }
@@ -3892,11 +3912,11 @@ function transformStyleXCreate(path, state) {
         return prop;
       });
     }
-    const listOfStyles = Object.entries(injectedStyles).map(_ref7 => {
+    const listOfStyles = Object.entries(injectedStyles).map(_ref9 => {
       let [key, {
         priority,
         ...rest
-      }] = _ref7;
+      }] = _ref9;
       return [key, rest, priority];
     });
     state.registerStyles(listOfStyles, path);
@@ -3918,9 +3938,14 @@ function validateStyleXCreate(path) {
   if (path.node.arguments.length !== 1) {
     throw path.buildCodeFrameError(shared.messages.ILLEGAL_ARGUMENT_LENGTH, SyntaxError);
   }
-  if (path.node.arguments[0].type !== 'ObjectExpression') {
+  const arg = path.node.arguments[0];
+  if (arg.type !== 'ObjectExpression') {
     throw path.buildCodeFrameError(shared.messages.NON_OBJECT_FOR_STYLEX_CALL, SyntaxError);
   }
+  const hasSpread = arg.properties.some(prop => t__namespace.isSpreadElement(prop));
+  if (hasSpread) {
+    throw path.buildCodeFrameError(shared.messages.NO_OBJECT_SPREADS, SyntaxError);
+  }
 }
 function findNearestStatementAncestor(path) {
   if (path.isStatement()) {
@@ -3932,15 +3957,15 @@ function findNearestStatementAncestor(path) {
   return findNearestStatementAncestor(path.parentPath);
 }
 function legacyExpandShorthands(dynamicStyles) {
-  const expandedKeysToKeyPaths = dynamicStyles.flatMap((_ref8, i) => {
+  const expandedKeysToKeyPaths = dynamicStyles.flatMap((_ref10, i) => {
     let {
       key
-    } = _ref8;
+    } = _ref10;
     return flatMapExpandedShorthands([key, 'p' + i], {
       styleResolution: 'legacy-expand-shorthands'
     });
-  }).map(_ref9 => {
-    let [key, value] = _ref9;
+  }).map(_ref11 => {
+    let [key, value] = _ref11;
     if (typeof value !== 'string') {
       return null;
     }

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

@@ -8,6 +8,7 @@
  */
 
 import type { NodePath } from '@babel/traverse';
+import * as t from '@babel/types';
 import StateManager from './state-manager';
 export type FunctionConfig = {
   identifiers: { [fnName: string]: any };
@@ -20,10 +21,14 @@ export type FunctionConfig = {
     };
   };
 };
+type Result =
+  | { resolved: true; value: any }
+  | { resolved: false; reason: string };
 export declare function evaluate(
   path: NodePath,
   traversalState: StateManager,
   functions: FunctionConfig,
+  seen: Map<t.Node, Result>,
 ): Readonly<{
   confident: boolean;
   value: any;

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

@@ -8,6 +8,7 @@
  */
 
 import type { NodePath } from '../../flow_modules/@babel/traverse';
+import * as t from '../../flow_modules/@babel/types';
 import StateManager from './state-manager';
 export type FunctionConfig = {
   identifiers: {
@@ -23,10 +24,20 @@ export type FunctionConfig = {
   },
 };
 
+type Result =
+  | {
+      resolved: true,
+      value: any,
+    }
+  | {
+      resolved: false,
+      reason: string,
+    };
 declare export function evaluate(
   path: NodePath<>,
   traversalState: StateManager,
   functions: FunctionConfig,
+  seen: Map<t.Node, Result>,
 ): $ReadOnly<{
   confident: boolean,
   value: any,

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

@@ -45,6 +45,7 @@ export type StyleXOptions = Readonly<
       enableDebugClassNames?: boolean;
       enableDebugDataProp?: boolean;
       enableDevClassNames?: boolean;
+      enableMinifiedKeys?: boolean;
       genConditionalClasses: boolean;
       importSources: ReadonlyArray<
         string | Readonly<{ from: string; as: string }>
@@ -65,6 +66,7 @@ export type StyleXOptions = Readonly<
     enableDebugClassNames?: boolean;
     enableDebugDataProp?: boolean;
     enableDevClassNames?: boolean;
+    enableMinifiedKeys?: boolean;
     genConditionalClasses: boolean;
     importSources: ReadonlyArray<
       string | Readonly<{ from: string; as: string }>

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

@@ -46,6 +46,7 @@ export type StyleXOptions = $ReadOnly<{
   enableDebugClassNames?: boolean,
   enableDebugDataProp?: boolean,
   enableDevClassNames?: boolean,
+  enableMinifiedKeys?: boolean,
   genConditionalClasses: boolean,
   importSources: $ReadOnlyArray<
     string | $ReadOnly<{ from: string, as: string }>,

package/lib/visitors/stylex-define-consts.d.ts

@@ -0,0 +1,30 @@
+/**
+ * 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';
+/**
+ * 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,
+): void;
+export default transformStyleXDefineConsts;

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

@@ -0,0 +1,30 @@
+/**
+ * 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.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 export default function transformStyleXDefineConsts(
+  callExpressionPath: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@stylexjs/babel-plugin",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "description": "StyleX babel plugin.",
   "main": "lib/index.js",
-  "repository": "https://github.com/facebook/stylex",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/facebook/stylex.git"
+  },
   "license": "MIT",
   "scripts": {
     "prebuild": "gen-types -i src/ -o lib/",
@@ -18,8 +21,8 @@
     "@babel/traverse": "^7.26.8",
     "@babel/types": "^7.26.8",
     "@dual-bundle/import-meta-resolve": "^4.1.0",
-    "@stylexjs/shared": "0.11.1",
-    "@stylexjs/stylex": "0.11.1"
+    "@stylexjs/shared": "0.12.0",
+    "@stylexjs/stylex": "0.12.0"
   },
   "devDependencies": {
     "@rollup/plugin-alias": "^5.1.1",