[react] Remove sx transform logic and leverage Emotion unitless (#149)

mui · Jun 19, 2024 · e15b24f · e15b24f
1 parent 7678829
commit e15b24f
Show file tree

Hide file tree

Showing 3 changed files with 1 addition and 80 deletions.
diff --git a/packages/pigment-css-react/src/utils/cssFnValueToVariable.ts b/packages/pigment-css-react/src/utils/cssFnValueToVariable.ts
@@ -4,7 +4,6 @@ import { parseExpression } from '@babel/parser';
 import * as t from '@babel/types';
 import type { Expression } from '@babel/types';
 import { isUnitLess } from './isUnitLess';
-import { cssFunctionTransformerPlugin } from './cssFunctionTransformerPlugin';
 import type { Theme } from './extendTheme';
 
 interface StyleObj {
@@ -92,15 +91,6 @@ function transformThemeKeysInFn(
   }
 
   const result = transformSync(functionString, {
-    plugins: [
-      [
-        cssFunctionTransformerPlugin,
-        {
-          styleKey,
-          options,
-        },
-      ],
-    ],
     filename: filename ?? 'intermediate-fn.ts',
     ast: true,
     configFile: false,

diff --git a/packages/pigment-css-react/src/utils/cssFunctionTransformerPlugin.ts b/packages/pigment-css-react/src/utils/cssFunctionTransformerPlugin.ts
diff --git a/packages/pigment-css-react/tests/sx/fixtures/sx-shorthand.output.js b/packages/pigment-css-react/tests/sx/fixtures/sx-shorthand.output.js
@@ -7,10 +7,7 @@ function App(props) {
           {
             className: 'd1h14by3',
             vars: {
-              'd1h14by3-0': [
-                props.tier.title === 'Professional' ? 'var(--mui-palette-grey-50)' : undefined,
-                false,
-              ],
+              'd1h14by3-0': [props.tier.title === 'Professional' ? 'grey.50' : undefined, false],
             },
           },
           {},