@stylexjs/babel-plugin 0.18.0 → 0.18.2

package/lib/index.browser.js

@@ -1,6 +1,6 @@
 import { packages } from '@babel/standalone';
 import parser from 'postcss-value-parser';
-import { legacyMerge, props } from '@stylexjs/stylex';
+import { legacyMerge, attrs, props } from '@stylexjs/stylex';
 
 const {
   arrayExpression, arrowFunctionExpression, binaryExpression, booleanLiteral,
@@ -12,7 +12,7 @@ const {
   isNumericLiteral, isObjectExpression, isObjectProperty, isPrivateName,
   isSpreadElement, isStringLiteral, isTemplateLiteral, isUnaryExpression,
   isUpdateExpression, isValidIdentifier, isVariableDeclaration, jsxAttribute,
-  jsxIdentifier, memberExpression, nullLiteral, numericLiteral, objectExpression,
+  jsxIdentifier, jsxSpreadAttribute, memberExpression, nullLiteral, numericLiteral, objectExpression,
   objectProperty, stringLiteral, unaryExpression, variableDeclaration, variableDeclarator
 } = packages.types;
 
@@ -55,6 +55,7 @@ var types = /*#__PURE__*/Object.freeze({
   isVariableDeclaration: isVariableDeclaration,
   jsxAttribute: jsxAttribute,
   jsxIdentifier: jsxIdentifier,
+  jsxSpreadAttribute: jsxSpreadAttribute,
   memberExpression: memberExpression,
   nullLiteral: nullLiteral,
   numericLiteral: numericLiteral,
@@ -1533,6 +1534,7 @@ class StateManager {
     const enableLegacyValueFlipping = logAndDefault(boolean(), options.enableLegacyValueFlipping ?? defaultOptions.enableLegacyValueFlipping, false, 'options.enableLegacyValueFlipping');
     const enableLogicalStylesPolyfill = logAndDefault(boolean(), options.enableLogicalStylesPolyfill ?? defaultOptions.enableLogicalStylesPolyfill, false, 'options.enableLogicalStylesPolyfill');
     const enableLTRRTLComments = logAndDefault(boolean(), options.enableLTRRTLComments ?? defaultOptions.enableLTRRTLComments, false, 'options.enableLTRRTLComments');
+    const sxPropName = logAndDefault(unionOf(string(), literal(false)), options.sxPropName ?? 'sx', 'sx', 'options.sxPropName');
     const test = logAndDefault(boolean(), options.test ?? defaultOptions.test, false, 'options.test');
     const configRuntimeInjection = logAndDefault(checkRuntimeInjection, options.runtimeInjection ?? false, false, 'options.runtimeInjection');
     const runtimeInjection = configRuntimeInjection === true ? DEFAULT_INJECT_PATH : configRuntimeInjection === false ? undefined : configRuntimeInjection;
@@ -1573,6 +1575,7 @@ class StateManager {
       enableLegacyValueFlipping,
       enableLogicalStylesPolyfill,
       enableLTRRTLComments,
+      sxPropName,
       importSources,
       rewriteAliases: typeof options.rewriteAliases === 'boolean' ? options.rewriteAliases : false,
       runtimeInjection,
@@ -1911,6 +1914,9 @@ function readImportDeclarations(path, state) {
             if (importedName === 'props') {
               state.stylexPropsImport.add(localName);
             }
+            if (importedName === 'attrs') {
+              state.stylexAttrsImport.add(localName);
+            }
             if (importedName === 'keyframes') {
               state.stylexKeyframesImport.add(localName);
             }
@@ -1980,6 +1986,9 @@ function readRequires(path, state) {
           if (prop.key.name === 'props') {
             state.stylexPropsImport.add(value.name);
           }
+          if (prop.key.name === 'attrs') {
+            state.stylexAttrsImport.add(value.name);
+          }
           if (prop.key.name === 'keyframes') {
             state.stylexKeyframesImport.add(value.name);
           }
@@ -8694,15 +8703,17 @@ class ConditionalStyle {
   }
 }
 function skipStylexPropsChildren(path, state) {
-  if (!isCalleeIdentifier(path, state) && !isCalleeMemberExpression(path, state)) {
+  if (getPropsLikeCall(path, state) == null) {
     return;
   }
   path.skip();
 }
 function transformStylexProps(path, state) {
-  if (!isCalleeIdentifier(path, state) && !isCalleeMemberExpression(path, state)) {
+  const propsLikeCall = getPropsLikeCall(path, state);
+  if (propsLikeCall == null) {
     return;
   }
+  const propsLikeFn = propsLikeCall === 'attrs' ? attrs : props;
   let bailOut = false;
   let conditional = 0;
   const argsPath = path.get('arguments').flatMap(argPath => argPath.isArrayExpression() ? argPath.get('elements') : [argPath]);
@@ -8842,7 +8853,7 @@ function transformStylexProps(path, state) {
     }
   } else {
     path.skip();
-    const stringExpression = makeStringExpression(resolvedArgs);
+    const stringExpression = makeStringExpression(resolvedArgs, propsLikeFn);
     if (path.parentPath.node.type === 'JSXSpreadAttribute') {
       if (isObjectExpression(stringExpression) && stringExpression.properties.length > 0 && stringExpression.properties.every(prop => isObjectProperty(prop) && (isIdentifier(prop.key) || isStringLiteral(prop.key)) && !prop.computed)) {
         const jsxAttributes = stringExpression.properties.filter(prop => isObjectProperty(prop)).map(prop => {
@@ -8906,10 +8917,10 @@ function parseNullableStyle(path, state, evaluatePathFnConfig) {
   }
   return 'other';
 }
-function makeStringExpression(values) {
+function makeStringExpression(values, propsLikeFn) {
   const conditions = values.filter(v => v instanceof ConditionalStyle).map(v => v.test);
   if (conditions.length === 0) {
-    const result = props(values);
+    const result = propsLikeFn(values);
     return convertObjectToAST(result);
   }
   const conditionPermutations = genConditionPermutations(conditions.length);
@@ -8927,7 +8938,7 @@ function makeStringExpression(values) {
       }
     });
     const key = permutation.reduce((soFar, bool) => soFar << 1 | (bool ? 1 : 0), 0);
-    return objectProperty(numericLiteral(key), convertObjectToAST(props(args)));
+    return objectProperty(numericLiteral(key), convertObjectToAST(propsLikeFn(args)));
   });
   const objExpressions = objectExpression(objEntries);
   const conditionsToKey = genBitwiseOrOfConditions(conditions);
@@ -8953,17 +8964,26 @@ function genBitwiseOrOfConditions(conditions) {
     return binaryExpression('|', acc, expr);
   });
 }
-function isCalleeIdentifier(path, state) {
+function getPropsLikeCall(path, state) {
   const {
     node
   } = path;
-  return node != null && node.callee != null && node.callee.type === 'Identifier' && state.stylexPropsImport.has(node.callee.name);
-}
-function isCalleeMemberExpression(path, state) {
-  const {
-    node
-  } = path;
-  return node != null && node.callee != null && node.callee.type === 'MemberExpression' && node.callee.object.type === 'Identifier' && node.callee.property.type === 'Identifier' && node.callee.property.name === 'props' && state.stylexImport.has(node.callee.object.name);
+  const callee = node?.callee;
+  if (node != null && callee != null && callee.type === 'Identifier' && state.stylexPropsImport.has(callee.name)) {
+    return 'props';
+  }
+  if (node != null && callee != null && callee.type === 'Identifier' && state.stylexAttrsImport.has(callee.name)) {
+    return 'attrs';
+  }
+  if (node != null && callee != null && callee.type === 'MemberExpression' && callee.object.type === 'Identifier' && callee.property.type === 'Identifier' && state.stylexImport.has(callee.object.name)) {
+    if (callee.property.name === 'props') {
+      return 'props';
+    }
+    if (callee.property.name === 'attrs') {
+      return 'attrs';
+    }
+  }
+  return null;
 }
 
 function styleXViewTransitionClass(styles, options = defaultOptions) {
@@ -9308,6 +9328,31 @@ function styleXTransform() {
           });
         }
       },
+      JSXOpeningElement(path) {
+        const sxPropName = state.options.sxPropName;
+        if (sxPropName === false) {
+          return;
+        }
+        const node = path.node;
+        if (node.name.type !== 'JSXIdentifier' || typeof node.name.name !== 'string' || node.name.name[0] !== node.name.name[0].toLowerCase()) {
+          return;
+        }
+        for (const attr of path.get('attributes')) {
+          if (!attr.isJSXAttribute() || !attr.get('name').isJSXIdentifier() || attr.get('name').node.name !== sxPropName) {
+            continue;
+          }
+          const valuePath = attr.get('value');
+          if (!valuePath.isJSXExpressionContainer()) {
+            continue;
+          }
+          const value = valuePath.get('expression');
+          if (value.isJSXEmptyExpression()) {
+            continue;
+          }
+          attr.replaceWith(jsxSpreadAttribute(callExpression(memberExpression(identifier('stylex'), identifier('props')), [value.node])));
+          break;
+        }
+      },
       CallExpression(path) {
         const parentPath = path.parentPath;
         if (parentPath.isVariableDeclarator()) {
@@ -9358,14 +9403,19 @@ function getLogicalFloatVars(rules) {
 ` : '';
 }
 function processStylexRules(rules, config) {
+  const rawConfig = typeof config === 'boolean' ? {
+    useLayers: config
+  } : config ?? {};
   const {
-    useLayers = false,
     enableLTRRTLComments = false,
     legacyDisableLayers = false,
     useLegacyClassnamesSort = false
-  } = typeof config === 'boolean' ? {
-    useLayers: config
-  } : config ?? {};
+  } = rawConfig;
+  const rawUseLayers = rawConfig.useLayers ?? false;
+  const useLayers = rawUseLayers !== false;
+  const layersBefore = typeof rawUseLayers === 'object' ? rawUseLayers.before ?? [] : [];
+  const layersAfter = typeof rawUseLayers === 'object' ? rawUseLayers.after ?? [] : [];
+  const layerPrefix = typeof rawUseLayers === 'object' ? rawUseLayers.prefix ?? '' : '';
   if (rules.length === 0) {
     return '';
   }
@@ -9412,16 +9462,11 @@ function processStylexRules(rules, config) {
     if (useLegacyClassnamesSort) {
       return classname1.localeCompare(classname2);
     } else {
-      if (rule1.startsWith('@') && !rule2.startsWith('@')) {
-        const query1 = rule1.slice(0, rule1.indexOf('{'));
-        const query2 = rule2.slice(0, rule2.indexOf('{'));
-        if (query1 !== query2) {
-          return query1.localeCompare(query2);
-        }
-      }
       const property1 = rule1.slice(rule1.lastIndexOf('{'));
       const property2 = rule2.slice(rule2.lastIndexOf('{'));
-      return property1.localeCompare(property2);
+      const propertyComparison = property1.localeCompare(property2);
+      if (propertyComparison !== 0) return propertyComparison;
+      return rule1.localeCompare(rule2);
     }
   });
   let lastKPri = -1;
@@ -9455,7 +9500,8 @@ function processStylexRules(rules, config) {
     return acc;
   }, []);
   const logicalFloatVars = getLogicalFloatVars(nonConstantRules);
-  const header = useLayers ? '\n@layer ' + grouped.map((_, index) => `priority${index + 1}`).join(', ') + ';\n' : '';
+  const layerName = index => layerPrefix ? `${layerPrefix}.priority${index + 1}` : `priority${index + 1}`;
+  const header = useLayers ? '\n@layer ' + [...layersBefore, ...grouped.map((_, index) => layerName(index)), ...layersAfter].join(', ') + ';\n' : '';
   const collectedCSS = grouped.map((group, index) => {
     const pri = group[0][2];
     const collectedCSS = Array.from(new Map(group.map(([a, b]) => [a, b])).values()).flatMap(rule => {
@@ -9475,7 +9521,7 @@ function processStylexRules(rules, config) {
       }
       return rtlRule ? enableLTRRTLComments ? [`/* @ltr begin */${ltrRule}/* @ltr end */`, `/* @rtl begin */${rtlRule}/* @rtl end */`] : [addAncestorSelector(ltrRule, "html:not([dir='rtl'])"), addAncestorSelector(rtlRule, "html[dir='rtl']")] : [ltrRule];
     }).join('\n');
-    return useLayers && pri > 0 ? `@layer priority${index + 1}{\n${collectedCSS}\n}` : collectedCSS;
+    return useLayers && pri > 0 ? `@layer ${layerName(index)}{\n${collectedCSS}\n}` : collectedCSS;
   }).join('\n');
   return logicalFloatVars + header + collectedCSS;
 }

package/lib/index.d.ts

@@ -44,7 +44,13 @@ declare function processStylexRules(
   config?:
     | boolean
     | {
-        useLayers?: boolean;
+        useLayers?:
+          | boolean
+          | {
+              before?: ReadonlyArray<string>;
+              after?: ReadonlyArray<string>;
+              prefix?: string;
+            };
         enableLTRRTLComments?: boolean;
         legacyDisableLayers?: boolean;
       },

package/lib/index.js

@@ -419,6 +419,7 @@ class StateManager {
     const enableLegacyValueFlipping = logAndDefault(boolean(), options.enableLegacyValueFlipping ?? defaultOptions.enableLegacyValueFlipping, false, 'options.enableLegacyValueFlipping');
     const enableLogicalStylesPolyfill = logAndDefault(boolean(), options.enableLogicalStylesPolyfill ?? defaultOptions.enableLogicalStylesPolyfill, false, 'options.enableLogicalStylesPolyfill');
     const enableLTRRTLComments = logAndDefault(boolean(), options.enableLTRRTLComments ?? defaultOptions.enableLTRRTLComments, false, 'options.enableLTRRTLComments');
+    const sxPropName = logAndDefault(unionOf(string(), literal(false)), options.sxPropName ?? 'sx', 'sx', 'options.sxPropName');
     const test = logAndDefault(boolean(), options.test ?? defaultOptions.test, false, 'options.test');
     const configRuntimeInjection = logAndDefault(checkRuntimeInjection, options.runtimeInjection ?? false, false, 'options.runtimeInjection');
     const runtimeInjection = configRuntimeInjection === true ? DEFAULT_INJECT_PATH : configRuntimeInjection === false ? undefined : configRuntimeInjection;
@@ -459,6 +460,7 @@ class StateManager {
       enableLegacyValueFlipping,
       enableLogicalStylesPolyfill,
       enableLTRRTLComments,
+      sxPropName,
       importSources,
       rewriteAliases: typeof options.rewriteAliases === 'boolean' ? options.rewriteAliases : false,
       runtimeInjection,
@@ -797,6 +799,9 @@ function readImportDeclarations(path, state) {
             if (importedName === 'props') {
               state.stylexPropsImport.add(localName);
             }
+            if (importedName === 'attrs') {
+              state.stylexAttrsImport.add(localName);
+            }
             if (importedName === 'keyframes') {
               state.stylexKeyframesImport.add(localName);
             }
@@ -866,6 +871,9 @@ function readRequires(path, state) {
           if (prop.key.name === 'props') {
             state.stylexPropsImport.add(value.name);
           }
+          if (prop.key.name === 'attrs') {
+            state.stylexAttrsImport.add(value.name);
+          }
           if (prop.key.name === 'keyframes') {
             state.stylexKeyframesImport.add(value.name);
           }
@@ -7576,15 +7584,17 @@ class ConditionalStyle {
   }
 }
 function skipStylexPropsChildren(path, state) {
-  if (!isCalleeIdentifier(path, state) && !isCalleeMemberExpression(path, state)) {
+  if (getPropsLikeCall(path, state) == null) {
     return;
   }
   path.skip();
 }
 function transformStylexProps(path, state) {
-  if (!isCalleeIdentifier(path, state) && !isCalleeMemberExpression(path, state)) {
+  const propsLikeCall = getPropsLikeCall(path, state);
+  if (propsLikeCall == null) {
     return;
   }
+  const propsLikeFn = propsLikeCall === 'attrs' ? stylex.attrs : stylex.props;
   let bailOut = false;
   let conditional = 0;
   const argsPath = path.get('arguments').flatMap(argPath => argPath.isArrayExpression() ? argPath.get('elements') : [argPath]);
@@ -7724,7 +7734,7 @@ function transformStylexProps(path, state) {
     }
   } else {
     path.skip();
-    const stringExpression = makeStringExpression(resolvedArgs);
+    const stringExpression = makeStringExpression(resolvedArgs, propsLikeFn);
     if (path.parentPath.node.type === 'JSXSpreadAttribute') {
       if (t__namespace.isObjectExpression(stringExpression) && stringExpression.properties.length > 0 && stringExpression.properties.every(prop => t__namespace.isObjectProperty(prop) && (t__namespace.isIdentifier(prop.key) || t__namespace.isStringLiteral(prop.key)) && !prop.computed)) {
         const jsxAttributes = stringExpression.properties.filter(prop => t__namespace.isObjectProperty(prop)).map(prop => {
@@ -7788,10 +7798,10 @@ function parseNullableStyle(path, state, evaluatePathFnConfig) {
   }
   return 'other';
 }
-function makeStringExpression(values) {
+function makeStringExpression(values, propsLikeFn) {
   const conditions = values.filter(v => v instanceof ConditionalStyle).map(v => v.test);
   if (conditions.length === 0) {
-    const result = stylex.props(values);
+    const result = propsLikeFn(values);
     return convertObjectToAST(result);
   }
   const conditionPermutations = genConditionPermutations(conditions.length);
@@ -7809,7 +7819,7 @@ function makeStringExpression(values) {
       }
     });
     const key = permutation.reduce((soFar, bool) => soFar << 1 | (bool ? 1 : 0), 0);
-    return t__namespace.objectProperty(t__namespace.numericLiteral(key), convertObjectToAST(stylex.props(args)));
+    return t__namespace.objectProperty(t__namespace.numericLiteral(key), convertObjectToAST(propsLikeFn(args)));
   });
   const objExpressions = t__namespace.objectExpression(objEntries);
   const conditionsToKey = genBitwiseOrOfConditions(conditions);
@@ -7835,17 +7845,26 @@ function genBitwiseOrOfConditions(conditions) {
     return t__namespace.binaryExpression('|', acc, expr);
   });
 }
-function isCalleeIdentifier(path, state) {
+function getPropsLikeCall(path, state) {
   const {
     node
   } = path;
-  return node != null && node.callee != null && node.callee.type === 'Identifier' && state.stylexPropsImport.has(node.callee.name);
-}
-function isCalleeMemberExpression(path, state) {
-  const {
-    node
-  } = path;
-  return node != null && node.callee != null && node.callee.type === 'MemberExpression' && node.callee.object.type === 'Identifier' && node.callee.property.type === 'Identifier' && node.callee.property.name === 'props' && state.stylexImport.has(node.callee.object.name);
+  const callee = node?.callee;
+  if (node != null && callee != null && callee.type === 'Identifier' && state.stylexPropsImport.has(callee.name)) {
+    return 'props';
+  }
+  if (node != null && callee != null && callee.type === 'Identifier' && state.stylexAttrsImport.has(callee.name)) {
+    return 'attrs';
+  }
+  if (node != null && callee != null && callee.type === 'MemberExpression' && callee.object.type === 'Identifier' && callee.property.type === 'Identifier' && state.stylexImport.has(callee.object.name)) {
+    if (callee.property.name === 'props') {
+      return 'props';
+    }
+    if (callee.property.name === 'attrs') {
+      return 'attrs';
+    }
+  }
+  return null;
 }
 
 function styleXViewTransitionClass(styles, options = defaultOptions) {
@@ -8190,6 +8209,31 @@ function styleXTransform() {
           });
         }
       },
+      JSXOpeningElement(path) {
+        const sxPropName = state.options.sxPropName;
+        if (sxPropName === false) {
+          return;
+        }
+        const node = path.node;
+        if (node.name.type !== 'JSXIdentifier' || typeof node.name.name !== 'string' || node.name.name[0] !== node.name.name[0].toLowerCase()) {
+          return;
+        }
+        for (const attr of path.get('attributes')) {
+          if (!attr.isJSXAttribute() || !attr.get('name').isJSXIdentifier() || attr.get('name').node.name !== sxPropName) {
+            continue;
+          }
+          const valuePath = attr.get('value');
+          if (!valuePath.isJSXExpressionContainer()) {
+            continue;
+          }
+          const value = valuePath.get('expression');
+          if (value.isJSXEmptyExpression()) {
+            continue;
+          }
+          attr.replaceWith(t__namespace.jsxSpreadAttribute(t__namespace.callExpression(t__namespace.memberExpression(t__namespace.identifier('stylex'), t__namespace.identifier('props')), [value.node])));
+          break;
+        }
+      },
       CallExpression(path) {
         const parentPath = path.parentPath;
         if (parentPath.isVariableDeclarator()) {
@@ -8240,14 +8284,19 @@ function getLogicalFloatVars(rules) {
 ` : '';
 }
 function processStylexRules(rules, config) {
+  const rawConfig = typeof config === 'boolean' ? {
+    useLayers: config
+  } : config ?? {};
   const {
-    useLayers = false,
     enableLTRRTLComments = false,
     legacyDisableLayers = false,
     useLegacyClassnamesSort = false
-  } = typeof config === 'boolean' ? {
-    useLayers: config
-  } : config ?? {};
+  } = rawConfig;
+  const rawUseLayers = rawConfig.useLayers ?? false;
+  const useLayers = rawUseLayers !== false;
+  const layersBefore = typeof rawUseLayers === 'object' ? rawUseLayers.before ?? [] : [];
+  const layersAfter = typeof rawUseLayers === 'object' ? rawUseLayers.after ?? [] : [];
+  const layerPrefix = typeof rawUseLayers === 'object' ? rawUseLayers.prefix ?? '' : '';
   if (rules.length === 0) {
     return '';
   }
@@ -8294,16 +8343,11 @@ function processStylexRules(rules, config) {
     if (useLegacyClassnamesSort) {
       return classname1.localeCompare(classname2);
     } else {
-      if (rule1.startsWith('@') && !rule2.startsWith('@')) {
-        const query1 = rule1.slice(0, rule1.indexOf('{'));
-        const query2 = rule2.slice(0, rule2.indexOf('{'));
-        if (query1 !== query2) {
-          return query1.localeCompare(query2);
-        }
-      }
       const property1 = rule1.slice(rule1.lastIndexOf('{'));
       const property2 = rule2.slice(rule2.lastIndexOf('{'));
-      return property1.localeCompare(property2);
+      const propertyComparison = property1.localeCompare(property2);
+      if (propertyComparison !== 0) return propertyComparison;
+      return rule1.localeCompare(rule2);
     }
   });
   let lastKPri = -1;
@@ -8337,7 +8381,8 @@ function processStylexRules(rules, config) {
     return acc;
   }, []);
   const logicalFloatVars = getLogicalFloatVars(nonConstantRules);
-  const header = useLayers ? '\n@layer ' + grouped.map((_, index) => `priority${index + 1}`).join(', ') + ';\n' : '';
+  const layerName = index => layerPrefix ? `${layerPrefix}.priority${index + 1}` : `priority${index + 1}`;
+  const header = useLayers ? '\n@layer ' + [...layersBefore, ...grouped.map((_, index) => layerName(index)), ...layersAfter].join(', ') + ';\n' : '';
   const collectedCSS = grouped.map((group, index) => {
     const pri = group[0][2];
     const collectedCSS = Array.from(new Map(group.map(([a, b]) => [a, b])).values()).flatMap(rule => {
@@ -8357,7 +8402,7 @@ function processStylexRules(rules, config) {
       }
       return rtlRule ? enableLTRRTLComments ? [`/* @ltr begin */${ltrRule}/* @ltr end */`, `/* @rtl begin */${rtlRule}/* @rtl end */`] : [addAncestorSelector(ltrRule, "html:not([dir='rtl'])"), addAncestorSelector(rtlRule, "html[dir='rtl']")] : [ltrRule];
     }).join('\n');
-    return useLayers && pri > 0 ? `@layer priority${index + 1}{\n${collectedCSS}\n}` : collectedCSS;
+    return useLayers && pri > 0 ? `@layer ${layerName(index)}{\n${collectedCSS}\n}` : collectedCSS;
   }).join('\n');
   return logicalFloatVars + header + collectedCSS;
 }

package/lib/index.js.flow

@@ -51,7 +51,13 @@ declare function processStylexRules(
   config?:
     | boolean
     | {
-        useLayers?: boolean,
+        useLayers?:
+          | boolean
+          | $ReadOnly<{
+              before?: $ReadOnlyArray<string>,
+              after?: $ReadOnlyArray<string>,
+              prefix?: string,
+            }>,
         enableLTRRTLComments?: boolean,
         legacyDisableLayers?: boolean,
         useLegacyClassnamesSort?: boolean,

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

@@ -61,6 +61,7 @@ export type StyleXOptions = Readonly<
         enableLogicalStylesPolyfill?: boolean;
         enableLTRRTLComments?: boolean;
         enableMinifiedKeys?: boolean;
+        sxPropName?: string | false;
         importSources: ReadonlyArray<
           string | Readonly<{ from: string; as: string }>
         >;
@@ -88,6 +89,7 @@ export type StyleXOptions = Readonly<
     enableLogicalStylesPolyfill?: boolean;
     enableLTRRTLComments?: boolean;
     enableMinifiedKeys?: boolean;
+    sxPropName?: string | false;
     importSources: ReadonlyArray<
       string | Readonly<{ from: string; as: string }>
     >;

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

@@ -59,6 +59,7 @@ export type StyleXOptions = $ReadOnly<{
   enableLogicalStylesPolyfill?: boolean,
   enableLTRRTLComments?: boolean,
   enableMinifiedKeys?: boolean,
+  sxPropName?: string | false,
   importSources: $ReadOnlyArray<
     string | $ReadOnly<{ from: string, as: string }>,
   >,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/babel-plugin",
-  "version": "0.18.0",
+  "version": "0.18.2",
   "description": "StyleX babel plugin.",
   "main": "lib/index.js",
   "browser": "lib/index.browser.js",
@@ -23,8 +23,8 @@
     "@babel/traverse": "^7.26.8",
     "@babel/types": "^7.26.8",
     "@dual-bundle/import-meta-resolve": "^4.1.0",
-    "@stylexjs/shared": "0.18.0",
-    "@stylexjs/stylex": "0.18.0",
+    "@stylexjs/shared": "0.18.2",
+    "@stylexjs/stylex": "0.18.2",
     "postcss-value-parser": "^4.1.0"
   },
   "devDependencies": {
@@ -36,8 +36,8 @@
     "@rollup/plugin-replace": "^6.0.1",
     "babel-plugin-syntax-hermes-parser": "^0.32.1",
     "path-browserify": "^1.0.1",
-    "rollup": "^4.24.0",
-    "scripts": "0.18.0"
+    "rollup": "^4.59.0",
+    "scripts": "0.18.2"
   },
   "files": [
     "flow_modules/*",