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
new file mode 100644
index 00000000..f59dbe38
--- /dev/null
+++ b/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.input.js
@@ -0,0 +1,55 @@
+function App() {
+  return /*#__PURE__*/ _jsx(
+    'div',
+    {
+      sx: {
+        display: 'flex',
+        flexDirection: 'column',
+      },
+      children: 'Test',
+    },
+    void 0,
+    false,
+    {
+      fileName: '',
+      lineNumber: 11,
+      columnNumber: 11,
+    },
+    this,
+  );
+}
+
+function App2() {
+  return /*#__PURE__*/ _jsx('div', {
+    sx: {
+      display: 'flex',
+      flexDirection: 'column',
+    },
+    children: /*#__PURE__*/ _jsx('p', {
+      sx: {
+        color: 'red',
+      },
+      children: 'Test',
+    }),
+  });
+}
+
+function App3(props) {
+  return /*#__PURE__*/ _jsx('div', {
+    sx: props.disabled
+      ? {
+          opacity: 0.4,
+        }
+      : {
+          color: 'red',
+        },
+    children: 'test',
+  });
+}
+
+function App4(props) {
+  return /*#__PURE__*/ _jsx('div', {
+    sx: props.variant === 'secondary' && { color: props.isRed ? 'red' : 'blue' },
+    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
new file mode 100644
index 00000000..9d217210
--- /dev/null
+++ b/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.css
@@ -0,0 +1,11 @@
+.s5molx8 {
+  display: flex;
+  flex-direction: column;
+}
+.s7fszdm {
+  display: flex;
+  flex-direction: column;
+}
+.s2bbd3t {
+  color: red;
+}
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
new file mode 100644
index 00000000..1b6aa1a4
--- /dev/null
+++ b/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.js
@@ -0,0 +1,47 @@
+import { sx as _sx, sx as _sx2, sx as _sx3 } from '@pigment-css/react';
+function App() {
+  return /*#__PURE__*/ _jsx(
+    'div',
+    {
+      children: 'Test',
+      ..._sx('s5molx8', {}),
+    },
+    void 0,
+    false,
+    {
+      fileName: '',
+      lineNumber: 11,
+      columnNumber: 11,
+    },
+    this,
+  );
+}
+function App2() {
+  return /*#__PURE__*/ _jsx('div', {
+    children: /*#__PURE__*/ _jsx('p', {
+      children: 'Test',
+      ..._sx3('s2bbd3t', {}),
+    }),
+    ..._sx2('s7fszdm', {}),
+  });
+}
+function App3(props) {
+  return /*#__PURE__*/ _jsx('div', {
+    sx: props.disabled
+      ? {
+          opacity: 0.4,
+        }
+      : {
+          color: 'red',
+        },
+    children: 'test',
+  });
+}
+function App4(props) {
+  return /*#__PURE__*/ _jsx('div', {
+    sx: props.variant === 'secondary' && {
+      color: props.isRed ? 'red' : 'blue',
+    },
+    children: 'test',
+  });
+}
diff --git a/packages/pigment-css-react/tests/sx/sx.test.ts b/packages/pigment-css-react/tests/sx/sx.test.ts
index 20b36d95..a61bf45a 100644
--- a/packages/pigment-css-react/tests/sx/sx.test.ts
+++ b/packages/pigment-css-react/tests/sx/sx.test.ts
@@ -46,6 +46,20 @@ describe('Pigment CSS - sx prop', () => {
     expect(output.css).to.equal(fixture.css);
   });
 
+  it('jsx sx-prop with logical and conditional expressions', async () => {
+    const { output, fixture } = await runTransformation(
+      path.join(__dirname, 'fixtures/sx-jsx.input.js'),
+      {
+        themeArgs: {
+          theme,
+        },
+      },
+    );
+
+    expect(output.js).to.equal(fixture.js);
+    expect(output.css).to.equal(fixture.css);
+  });
+
   it('sx prop with theme spread', async () => {
     const { output, fixture } = await runTransformation(
       path.join(__dirname, 'fixtures/sxProps2.input.js'),