From 6595d71d9febdc72bfb40691e1492fbf6453ba9c Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Sat, 1 Jun 2024 13:12:26 -0400
Subject: [PATCH] remove sxConfig and use `unstable_sx` from the theme is
 possible

---
 packages/pigment-css-react/src/utils/extendTheme.ts   |  2 --
 .../pigment-css-react/src/utils/processCssObject.ts   | 11 +----------
 2 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/packages/pigment-css-react/src/utils/extendTheme.ts b/packages/pigment-css-react/src/utils/extendTheme.ts
index aab9ac66..fb88395e 100644
--- a/packages/pigment-css-react/src/utils/extendTheme.ts
+++ b/packages/pigment-css-react/src/utils/extendTheme.ts
@@ -1,5 +1,4 @@
 import { prepareCssVars } from '@mui/system/cssVars';
-import type { SxConfig } from '@mui/system/styleFunctionSx';
 import type { CSSObject } from '../base';
 
 export interface ThemeInput<ColorScheme extends string = string> extends Record<string, any> {
@@ -76,7 +75,6 @@ export type ExtendTheme<
     ) => Record<string, CSSObject<any>>;
     getColorSchemeSelector: (colorScheme: Options['colorScheme']) => string;
     generateStyleSheets: () => Array<Record<string, any>>;
-    unstable_sxConfig?: SxConfig;
   };
 
 export type Theme = Record<string, any>;
diff --git a/packages/pigment-css-react/src/utils/processCssObject.ts b/packages/pigment-css-react/src/utils/processCssObject.ts
index 27412b58..6714e390 100644
--- a/packages/pigment-css-react/src/utils/processCssObject.ts
+++ b/packages/pigment-css-react/src/utils/processCssObject.ts
@@ -1,6 +1,4 @@
 import type { CSSObject } from '@emotion/css';
-// @TODO - Ideally, this should be replicated here instead of importing.
-import styleFunctionSx from '@mui/system/styleFunctionSx';
 import { css, cache } from './emotion';
 import type { PluginCustomOptions } from './cssFnValueToVariable';
 
@@ -10,14 +8,7 @@ export function processCssObject(
   skipSx = true,
 ) {
   const processedObj = (
-    skipSx
-      ? cssObj
-      : styleFunctionSx({
-          // Does not support shorthand as of now because
-          // it also adds the spacing multiplier
-          sx: () => cssObj,
-          ...themeArgs,
-        })
+    skipSx ? cssObj : themeArgs?.theme?.unstable_sx?.(cssObj) || cssObj
   ) as CSSObject;
   const className = css(processedObj);
   return cache.registered[className];