From 7a75d3c2da4e2ab9c00d06408761b3e41eb90603 Mon Sep 17 00:00:00 2001
From: Siriwat K <siriwatkunaporn@gmail.com>
Date: Mon, 6 May 2024 15:55:11 +0700
Subject: [PATCH] Replace `sx` callback object param with `theme` (#51)

---
 packages/pigment-css-react/src/processors/sx.ts               | 3 ++-
 packages/pigment-css-react/tests/sx/fixtures/sx-jsx.input.js  | 2 +-
 .../pigment-css-react/tests/sx/fixtures/sxProps2.input.js     | 4 ++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/pigment-css-react/src/processors/sx.ts b/packages/pigment-css-react/src/processors/sx.ts
index 401d71ed..614d3d53 100644
--- a/packages/pigment-css-react/src/processors/sx.ts
+++ b/packages/pigment-css-react/src/processors/sx.ts
@@ -164,7 +164,8 @@ export class SxProcessor extends BaseProcessor {
 
   private processCss(styleObjOrFn: unknown, expressionValue: ExpressionValue) {
     const { themeArgs } = this.options as IOptions;
-    const styleObj = typeof styleObjOrFn === 'function' ? styleObjOrFn(themeArgs) : styleObjOrFn;
+    const styleObj =
+      typeof styleObjOrFn === 'function' ? styleObjOrFn(themeArgs?.theme) : styleObjOrFn;
 
     const res = cssFnValueToVariable({
       styleObj,
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
index a98ae099..dea2842e 100644
--- a/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.input.js
+++ b/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.input.js
@@ -30,7 +30,7 @@ function App2(props) {
     className: props.className,
     style: props.style,
     children: /*#__PURE__*/ _jsx('p', {
-      sx: ({ theme }) => ({
+      sx: (theme) => ({
         color: (theme.vars || theme).palette.primary.main,
         ...theme.applyStyles('dark', {
           color: 'white',
diff --git a/packages/pigment-css-react/tests/sx/fixtures/sxProps2.input.js b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.input.js
index 34370216..edf0a09a 100644
--- a/packages/pigment-css-react/tests/sx/fixtures/sxProps2.input.js
+++ b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.input.js
@@ -23,7 +23,7 @@ const A = {
 function App(props) {
   return (
     <SliderRail
-      sx={({ theme }) => ({
+      sx={(theme) => ({
         mb: 1,
         ...theme.applyStyles('dark', {
           color: 'white',
@@ -52,7 +52,7 @@ function App2() {
 function App3(props) {
   return (
     <A.SliderRail
-      sx={({ theme }) => ({
+      sx={(theme) => ({
         color: (theme.vars || theme).palette.primary.main,
         fontSize: props.isRed ? 'h1-fontSize' : 'h2-fontSize',
         ':hover': {