[react][core] Add support for sx replacement in transformed jsx calls

package.json

@@ -83,7 +83,6 @@
     "@types/lodash": "^4.17.0",
     "@types/mocha": "^10.0.6",
     "@types/node": "^18.19.30",
-    "@types/prettier": "^3.0.0",
     "@types/react": "^18.2.74",
     "@types/yargs": "^17.0.32",
     "@typescript-eslint/eslint-plugin": "^7.5.0",

packages/pigment-css-react/src/utils/sx-plugin.ts

@@ -24,7 +24,7 @@ function convertJsxMemberExpressionToMemberExpression(
   );
 }
 
-function wrapWithSxComponent(
+function wrapWithJsxElement(
   t: typeof Types,
   tagNamePath: NodePath<Types.JSXIdentifier | Types.JSXMemberExpression | Types.JSXNamespacedName>,
   sxComponentName: string,
@@ -71,6 +71,34 @@ function wrapWithSxComponent(
   jsxElement.replaceWith(newElement);
 }
 
+function wrapWithJsxCall(
+  t: typeof Types,
+  tagNamePath: NodePath<Types.Identifier | Types.MemberExpression>,
+  sxComponentName: string,
+) {
+  const sxComponent = addNamed(
+    tagNamePath,
+    sxComponentName,
+    `${process.env.PACKAGE_NAME}/private-runtime`,
+  );
+  const jsxCall = tagNamePath.findParent((p) => p.isCallExpression());
+  if (!jsxCall?.isCallExpression()) {
+    return;
+  }
+  const originalTag = tagNamePath.node;
+  const callArgs = jsxCall.get('arguments');
+  callArgs[0].replaceWith(sxComponent);
+  const props = callArgs[1];
+  if (props.isObjectExpression()) {
+    const properties = props.get('properties');
+    const newProps = t.objectExpression([
+      t.objectProperty(t.identifier('sxComponent'), originalTag),
+      ...properties.map((p) => p.node),
+    ]);
+    props.replaceWith(newProps);
+  }
+}
+
 function replaceNodePath(
   expressionPath: NodePath<Types.Expression>,
   namePath: NodePath<Types.JSXIdentifier | Types.Identifier>,
@@ -101,7 +129,9 @@ function replaceNodePath(
 
   if (wasSxTransformed) {
     if (tagNamePath.isJSXIdentifier() || tagNamePath.isJSXMemberExpression()) {
-      wrapWithSxComponent(t, tagNamePath, sxComponentName);
+      wrapWithJsxElement(t, tagNamePath, sxComponentName);
+    } else if (tagNamePath.isIdentifier() || tagNamePath.isMemberExpression()) {
+      wrapWithJsxCall(t, tagNamePath, sxComponentName);
     }
   }
 }

packages/pigment-css-react/tests/Box/box.test.tsx

@@ -10,4 +10,13 @@ describe('Pigment CSS - Box', () => {
     expect(output.js).to.equal(fixture.js);
     expect(output.css).to.equal(fixture.css);
   });
+
+  it('should transform and render sx prop for jsx calls', async () => {
+    const { output, fixture } = await runTransformation(
+      path.join(__dirname, 'fixtures/box-jsx.input.js'),
+    );
+
+    expect(output.js).to.equal(fixture.js);
+    expect(output.css).to.equal(fixture.css);
+  });
 });

packages/pigment-css-react/tests/Box/fixtures/box-jsx.input.js

@@ -0,0 +1,19 @@
+import Box from '@pigment-css/react/Box';
+import { jsx as _jsx } from 'react/jsx-runtime';
+
+export function App(props) {
+  return /*#__PURE__*/ _jsx(Box, {
+    as: 'ul',
+    'aria-label': props.label,
+    sx: {
+      margin: 0,
+      marginBlock: '1rem',
+      padding: 0,
+      paddingLeft: '1.5rem',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '0.5rem',
+    },
+    children: 'Hello Box',
+  });
+}

packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.css

@@ -0,0 +1,9 @@
+.sd5jss7 {
+  margin: 0;
+  margin-block: 1rem;
+  padding: 0;
+  padding-left: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}

packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.js

@@ -0,0 +1,12 @@
+import { ForwardSx as _ForwardSx } from '@pigment-css/react/private-runtime';
+import Box from '@pigment-css/react/Box';
+import { jsx as _jsx } from 'react/jsx-runtime';
+export function App(props) {
+  return /*#__PURE__*/ _jsx(_ForwardSx, {
+    sxComponent: Box,
+    as: 'ul',
+    'aria-label': props.label,
+    sx: 'sd5jss7',
+    children: 'Hello Box',
+  });
+}

packages/pigment-css-react/tests/Box/fixtures/box.input.js

@@ -1,10 +1,12 @@
 import Box from '@pigment-css/react/Box';
 
-export function App() {
+export function App(props) {
   return (
     <Box
       as="ul"
+      aria-label={props.label}
       sx={{
+        color: props.color,
         margin: 0,
         marginBlock: '1rem',
         padding: 0,

packages/pigment-css-react/tests/Box/fixtures/box.output.css

@@ -1,4 +1,5 @@
 ._c1d15y {
+  color: var(--_c1d15y-0);
   margin: 0;
   margin-block: 1rem;
   padding: 0;

packages/pigment-css-react/tests/Box/fixtures/box.output.js

@@ -1,9 +1,19 @@
 import { sx as _sx2 } from '@pigment-css/react';
 import { ForwardSx as _ForwardSx } from '@pigment-css/react/private-runtime';
 import Box from '@pigment-css/react/Box';
-export function App() {
+export function App(props) {
   return (
-    <_ForwardSx sxComponent={Box} as="ul" sx={'_c1d15y'}>
+    <_ForwardSx
+      sxComponent={Box}
+      as="ul"
+      aria-label={props.label}
+      sx={{
+        className: '_c1d15y',
+        vars: {
+          '_c1d15y-0': [props.color, false],
+        },
+      }}
+    >
       Hello Box
     </_ForwardSx>
   );