fix jsx expression

mui · Apr 26, 2024 · f680a67 · f680a67
1 parent 49fab1b
commit f680a67
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 39 deletions.
diff --git a/packages/pigment-css-react/src/utils/sx-plugin.ts b/packages/pigment-css-react/src/utils/sx-plugin.ts
@@ -91,7 +91,11 @@ export const babelPlugin = declare<{
           return;
         }
         const valuePath = path.get('value');
-        if (!valuePath.isObjectExpression() && !valuePath.isArrowFunctionExpression()) {
+        if (
+          !valuePath.isArrowFunctionExpression() &&
+          !valuePath.isConditionalExpression() &&
+          !valuePath.isLogicalExpression()
+        ) {
           return;
         }
         const parentJsxCall = path.findParent((p) => p.isCallExpression());

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
@@ -1,13 +0,0 @@
-.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,20 +1,30 @@
-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.input.js b/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.input.js
@@ -7,6 +7,8 @@ function App() {
         flexDirection: 'column',
       },
       children: 'Test',
+      className: 'foo',
+      style: { textAlign: 'center' },
     },
     void 0,
     false,
@@ -19,16 +21,21 @@ function App() {
   );
 }
 
-function App2() {
+function App2(props) {
   return /*#__PURE__*/ _jsx('div', {
     sx: {
       display: 'flex',
       flexDirection: 'column',
     },
+    className: props.className,
+    style: props.style,
     children: /*#__PURE__*/ _jsx('p', {
-      sx: {
-        color: 'red',
-      },
+      sx: ({ theme }) => ({
+        color: (theme.vars || theme).palette.primary.main,
+        ...theme.applyStyles('dark', {
+          color: 'white',
+        }),
+      }),
       children: 'Test',
     }),
   });
@@ -44,12 +51,15 @@ function App3(props) {
           color: 'red',
         },
     children: 'test',
+    ...props,
   });
 }
 
 function App4(props) {
   return /*#__PURE__*/ _jsx('div', {
     sx: props.variant === 'secondary' && { color: props.isRed ? 'red' : 'blue' },
+    className: `foo ${props.className}`,
+    ...props,
     children: 'test',
   });
 }
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,11 +1,17 @@
 .s5molx8 {
-  display: flex;
-  flex-direction: column;
+  color: red;
+}
+@media (prefers-color-scheme: dark) {
+  .s5molx8 {
+    color: white;
+  }
 }
 .s7fszdm {
-  display: flex;
-  flex-direction: column;
+  opacity: 0.4;
 }
 .s2bbd3t {
   color: red;
 }
+.s1ou6jyi {
+  color: var(--s1ou6jyi-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
@@ -3,8 +3,15 @@ function App() {
   return /*#__PURE__*/ _jsx(
     'div',
     {
+      sx: {
+        display: 'flex',
+        flexDirection: 'column',
+      },
       children: 'Test',
-      ..._sx('s5molx8', {}),
+      className: 'foo',
+      style: {
+        textAlign: 'center',
+      },
     },
     void 0,
     false,
@@ -16,32 +23,50 @@ function App() {
     this,
   );
 }
-function App2() {
+function App2(props) {
   return /*#__PURE__*/ _jsx('div', {
+    sx: {
+      display: 'flex',
+      flexDirection: 'column',
+    },
+    className: props.className,
+    style: props.style,
     children: /*#__PURE__*/ _jsx('p', {
       children: 'Test',
-      ..._sx3('s2bbd3t', {}),
+      ..._sx('s5molx8', {}),
     }),
-    ..._sx2('s7fszdm', {}),
   });
 }
 function App3(props) {
   return /*#__PURE__*/ _jsx('div', {
-    sx: props.disabled
-      ? {
-          opacity: 0.4,
-        }
-      : {
-          color: 'red',
-        },
     children: 'test',
+    ...props,
+    ...(props.disabled
+      ? _sx2('s7fszdm', {
+          ...props,
+        })
+      : _sx2('s2bbd3t', {
+          ...props,
+        })),
   });
 }
 function App4(props) {
   return /*#__PURE__*/ _jsx('div', {
-    sx: props.variant === 'secondary' && {
-      color: props.isRed ? 'red' : 'blue',
-    },
+    className: `foo ${props.className}`,
+    ...props,
     children: 'test',
+    ...(props.variant === 'secondary' &&
+      _sx3(
+        {
+          className: 's1ou6jyi',
+          vars: {
+            's1ou6jyi-0': [props.isRed ? 'red' : 'blue', false],
+          },
+        },
+        {
+          className: `foo ${props.className}`,
+          ...props,
+        },
+      )),
   });
 }