[feat] Simple sx={} syntax as an alternative to stylex.props (facebook#1218)

* [feat] Simple sx={} syntax as an alternative to stylex.props

* feat(babel-plugin): make sx prop name configurable via sxPropName option

Adds a new `sxPropName` option (default: 'sx') to allow users to
configure the JSX prop name used for the sx shorthand. Setting it to
`false` disables the transformation entirely.

Also removes stray console.log statements from the JSXOpeningElement visitor.


* fix(babel-plugin): fix flow errors in JSXOpeningElement visitor

Rewrites the sx prop visitor to use a for-loop with explicit type
guards (isJSXAttribute, isJSXExpressionContainer, isJSXEmptyExpression)
so Flow can properly narrow the types at each step.


---------

Co-authored-by: mellyeliu <mellye.liu@gmail.com>

Author: nmn

packages/@stylexjs/babel-plugin/__tests__/transform-stylex-props-test.js

@@ -185,6 +185,76 @@ describe('@stylexjs/babel-plugin', () => {
         `);
       });
 
+      test('Test that sx attribute can be used instead of ...stylex.props', () => {
+        expect(
+          transform(
+            `
+            import stylex from 'stylex';
+            const styles = stylex.create({
+              red: {
+                color: 'red',
+              }
+            });
+            function Foo() {
+              return (
+                <>
+                  <div id="test" sx={styles.red}>Hello World</div>
+                  <div className="test" sx={styles.red} id="test">Hello World</div>
+                  <div id="test" sx={styles.red} className="test">Hello World</div>
+                </>
+              );
+            }
+          `,
+            options,
+          ),
+        ).toMatchInlineSnapshot(`
+          "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+          var _inject2 = _inject;
+          import stylex from 'stylex';
+          _inject2({
+            ltr: ".color-x1e2nbdu{color:red}",
+            priority: 3000
+          });
+          function Foo() {
+            return <>
+                            <div id="test" className="color-x1e2nbdu" data-style-src="npm-package:js/node_modules/npm-package/dist/components/Foo.react.js:4">Hello World</div>
+                            <div className="test" className="color-x1e2nbdu" data-style-src="npm-package:js/node_modules/npm-package/dist/components/Foo.react.js:4" id="test">Hello World</div>
+                            <div id="test" className="color-x1e2nbdu" data-style-src="npm-package:js/node_modules/npm-package/dist/components/Foo.react.js:4" className="test">Hello World</div>
+                          </>;
+          }"
+        `);
+      });
+
+      test('sx prop with custom sxPropName', () => {
+        expect(
+          transform(
+            `
+            import stylex from 'stylex';
+            const styles = stylex.create({
+              red: {
+                color: 'red',
+              }
+            });
+            function Foo() {
+              return <div css={styles.red}>Hello World</div>;
+            }
+          `,
+            { ...options, sxPropName: 'css' },
+          ),
+        ).toMatchInlineSnapshot(`
+          "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+          var _inject2 = _inject;
+          import stylex from 'stylex';
+          _inject2({
+            ltr: ".color-x1e2nbdu{color:red}",
+            priority: 3000
+          });
+          function Foo() {
+            return <div className="color-x1e2nbdu" data-style-src="npm-package:js/node_modules/npm-package/dist/components/Foo.react.js:4">Hello World</div>;
+          }"
+        `);
+      });
+
       test('local dynamic styles', () => {
         expect(
           transform(

packages/@stylexjs/babel-plugin/src/index.js

@@ -284,6 +284,50 @@ function styleXTransform(): PluginObj<> {
         },
       },
 
+      JSXOpeningElement(path: NodePath<t.JSXOpeningElement>) {
+        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.jsxSpreadAttribute(
+              t.callExpression(
+                t.memberExpression(
+                  t.identifier('stylex'),
+                  t.identifier('props'),
+                ),
+                [value.node],
+              ),
+            ),
+          );
+          break;
+        }
+      },
+
       CallExpression(path: NodePath<t.CallExpression>) {
         const parentPath = path.parentPath;
         if (parentPath.isVariableDeclarator()) {

packages/@stylexjs/babel-plugin/src/utils/state-manager.js

@@ -104,6 +104,7 @@ export type StyleXOptions = $ReadOnly<{
   enableLogicalStylesPolyfill?: boolean,
   enableLTRRTLComments?: boolean,
   enableMinifiedKeys?: boolean,
+  sxPropName?: string | false,
   importSources: $ReadOnlyArray<
     string | $ReadOnly<{ from: string, as: string }>,
   >,
@@ -302,6 +303,13 @@ export default class StateManager {
         'options.enableLTRRTLComments',
       );
 
+    const sxPropName: StyleXStateOptions['sxPropName'] = z.logAndDefault(
+      z.unionOf(z.string(), z.literal(false)),
+      options.sxPropName ?? 'sx',
+      'sx',
+      'options.sxPropName',
+    );
+
     const test: StyleXStateOptions['test'] = z.logAndDefault(
       z.boolean(),
       options.test ?? defaultOptions.test,
@@ -439,6 +447,7 @@ export default class StateManager {
       enableLegacyValueFlipping,
       enableLogicalStylesPolyfill,
       enableLTRRTLComments,
+      sxPropName,
       importSources,
       rewriteAliases:
         typeof options.rewriteAliases === 'boolean'