fix jsx() objectExpression

mui · Apr 26, 2024 · 344c70a · 344c70a
1 parent 118c6be
commit 344c70a
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 33 deletions.
diff --git a/packages/pigment-css-react/src/utils/sx-plugin.ts b/packages/pigment-css-react/src/utils/sx-plugin.ts
@@ -92,6 +92,7 @@ export const babelPlugin = declare<{
         }
         const valuePath = path.get('value');
         if (
+          !valuePath.isObjectExpression() &&
           !valuePath.isArrowFunctionExpression() &&
           !valuePath.isConditionalExpression() &&
           !valuePath.isLogicalExpression()

diff --git a/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.css b/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.css
@@ -0,0 +1,13 @@
+.sd5jss7 {
+  margin: 0;
+  margin-block: 1rem;
+  padding: 0;
+  padding-left: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.sk625fs {
+  display: flex;
+  flex-direction: column;
+}
diff --git a/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.js b/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.js
@@ -1,30 +1,20 @@
+import { sx as _sx, sx as _sx2 } from '@pigment-css/react';
 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',
+    ..._sx('sd5jss7', {}),
   });
 }
 function App2(props) {
   return /*#__PURE__*/ _jsxDEV(
     Box,
     {
-      sx: {
-        display: 'flex',
-        flexDirection: 'column',
-      },
       children: 'Test',
+      ..._sx2('sk625fs', {}),
     },
     void 0,
     false,

diff --git a/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.css b/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.css
@@ -1,17 +1,25 @@
 .s5molx8 {
+  display: flex;
+  flex-direction: column;
+}
+.s7fszdm {
+  display: flex;
+  flex-direction: column;
+}
+.s2bbd3t {
   color: red;
 }
 @media (prefers-color-scheme: dark) {
-  .s5molx8 {
+  .s2bbd3t {
     color: white;
   }
 }
-.s7fszdm {
+.s1ou6jyi {
   opacity: 0.4;
 }
-.s2bbd3t {
+.s1lqy6hu {
   color: red;
 }
-.s1ou6jyi {
-  color: var(--s1ou6jyi-0);
+.swssabr {
+  color: var(--swssabr-0);
 }
diff --git a/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.js b/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.js
@@ -1,17 +1,19 @@
-import { sx as _sx, sx as _sx2, sx as _sx3 } from '@pigment-css/react';
+import { sx as _sx, sx as _sx2, sx as _sx3, sx as _sx4, sx as _sx5 } from '@pigment-css/react';
 function App() {
   return /*#__PURE__*/ _jsx(
     'div',
     {
-      sx: {
-        display: 'flex',
-        flexDirection: 'column',
-      },
       children: 'Test',
       className: 'foo',
       style: {
         textAlign: 'center',
       },
+      ..._sx('s5molx8', {
+        className: 'foo',
+        style: {
+          textAlign: 'center',
+        },
+      }),
     },
     void 0,
     false,
@@ -25,15 +27,15 @@ function App() {
 }
 function App2(props) {
   return /*#__PURE__*/ _jsx('div', {
-    sx: {
-      display: 'flex',
-      flexDirection: 'column',
-    },
     className: props.className,
     style: props.style,
     children: /*#__PURE__*/ _jsx('p', {
       children: 'Test',
-      ..._sx('s5molx8', {}),
+      ..._sx3('s2bbd3t', {}),
+    }),
+    ..._sx2('s7fszdm', {
+      className: props.className,
+      style: props.style,
     }),
   });
 }
@@ -42,10 +44,10 @@ function App3(props) {
     children: 'test',
     ...props,
     ...(props.disabled
-      ? _sx2('s7fszdm', {
+      ? _sx4('s1ou6jyi', {
           ...props,
         })
-      : _sx2('s2bbd3t', {
+      : _sx4('s1lqy6hu', {
           ...props,
         })),
   });
@@ -56,11 +58,11 @@ function App4(props) {
     ...props,
     children: 'test',
     ...(props.variant === 'secondary' &&
-      _sx3(
+      _sx5(
         {
-          className: 's1ou6jyi',
+          className: 'swssabr',
           vars: {
-            's1ou6jyi-0': [props.isRed ? 'red' : 'blue', false],
+            'swssabr-0': [props.isRed ? 'red' : 'blue', false],
           },
         },
         {