@stylexjs/babel-plugin 0.18.0 → 0.18.1

package/lib/index.browser.js

@@ -1533,6 +1533,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 +1574,7 @@ class StateManager {
       enableLegacyValueFlipping,
       enableLogicalStylesPolyfill,
       enableLTRRTLComments,
+      sxPropName,
       importSources,
       rewriteAliases: typeof options.rewriteAliases === 'boolean' ? options.rewriteAliases : false,
       runtimeInjection,
@@ -9308,6 +9310,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(undefined(callExpression(memberExpression(identifier('stylex'), identifier('props')), [value.node])));
+          break;
+        }
+      },
       CallExpression(path) {
         const parentPath = path.parentPath;
         if (parentPath.isVariableDeclarator()) {

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,
@@ -8190,6 +8192,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()) {

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.1",
   "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.1",
+    "@stylexjs/stylex": "0.18.1",
     "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.1"
   },
   "files": [
     "flow_modules/*",