fix expression container check

mui · Apr 26, 2024 · 6e11cd3 · 6e11cd3
1 parent 44bd1b5
commit 6e11cd3
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 21 deletions.
diff --git a/packages/pigment-css-react/src/processors/sx.ts b/packages/pigment-css-react/src/processors/sx.ts
@@ -156,9 +156,6 @@ export class SxProcessor extends BaseProcessor {
      */
     this.replacer((_tagPath) => {
       const tagPath = _tagPath as NodePath<CallExpression>;
-      if (!tagPath.parentPath.isJSXExpressionContainer()) {
-        return tagPath.node;
-      }
       const jsxElement = tagPath.findParent((p) =>
         p.isJSXOpeningElement(),
       ) as NodePath<JSXOpeningElement>;
@@ -219,9 +216,6 @@ export class SxProcessor extends BaseProcessor {
     // For non-JSX calls, replace the sx prop with runtime sx
     this.replacer((_tagPath) => {
       const tagPath = _tagPath as NodePath<CallExpression>;
-      if (!tagPath.parentPath.isObjectProperty()) {
-        return tagPath.node;
-      }
       const objExpression = tagPath.findParent((p) =>
         p.isObjectExpression(),
       ) as NodePath<ObjectExpression>;

diff --git a/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.js b/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.js
@@ -31,36 +31,48 @@ function App2(props) {
   return (
     <SliderRail
       {...props}
-      sx={
-        props.variant === 'secondary'
-          ? _sx2({
+      {...(props.variant === 'secondary'
+        ? _sx2(
+            {
               className: 's1xbsywq',
               vars: {
                 's1xbsywq-0': [props.isRed ? 'red' : 'blue', false],
               },
-            })
-          : _sx2('s1wnk6s5')
-      }
+            },
+            {
+              ...props,
+            },
+          )
+        : _sx2('s1wnk6s5', {
+            ...props,
+          }))}
     />
   );
 }
 function App3(props) {
   return (
     <SliderRail
-      sx={
-        props.variant === 'secondary' &&
-        _sx3({
-          className: 'stzaibv',
-          vars: {
-            'stzaibv-0': [props.isRed ? 'red' : 'blue', false],
-          },
-        })
-      }
       className={`foo ${props.className}`}
       style={{
         color: 'red',
         ...props.style,
       }}
+      {...(props.variant === 'secondary' &&
+        _sx3(
+          {
+            className: 'stzaibv',
+            vars: {
+              'stzaibv-0': [props.isRed ? 'red' : 'blue', false],
+            },
+          },
+          {
+            className: `foo ${props.className}`,
+            style: {
+              color: 'red',
+              ...props.style,
+            },
+          },
+        ))}
     />
   );
 }