remove sxConfig and use unstable_sx from the theme is possible

mui · Jun 1, 2024 · 6595d71 · 6595d71
1 parent 586b8f8
commit 6595d71
Show file tree

Hide file tree

Showing 2 changed files with 1 addition and 12 deletions.
diff --git 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
@@ -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];