From d1c8fccbf5b55785051ec25c8d651abebb452592 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 6 May 2024 10:07:37 +0700 Subject: [PATCH] fix theme param object --- 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 ( ({ + sx={(theme) => ({ mb: 1, ...theme.applyStyles('dark', { color: 'white', @@ -52,7 +52,7 @@ function App2() { function App3(props) { return ( ({ + sx={(theme) => ({ color: (theme.vars || theme).palette.primary.main, fontSize: props.isRed ? 'h1-fontSize' : 'h2-fontSize', ':hover': {