[react] Remove sx transform logic and leverage Emotion unitless

packages/pigment-css-react/package.json

@@ -41,6 +41,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/serialize": "^1.1.4",
     "@emotion/styled": "^11.11.5",
+    "@emotion/unitless": "^0.8.1",
     "@mui/system": "^6.0.0-alpha.6",
     "@mui/utils": "^6.0.0-alpha.6",
     "@wyw-in-js/processor-utils": "^0.5.3",

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,

packages/pigment-css-react/src/utils/isUnitLess.ts

@@ -1,55 +1,4 @@
-// Copied over from https://github.com/emotion-js/emotion/blob/main/packages/unitless/src/index.js
-// since typings of @emotion/unitless are broken. PR to fix here - https://github.com/emotion-js/emotion/pull/3088
-const unitlessKeys: { [key: string]: 1 } = {
-  animationIterationCount: 1,
-  aspectRatio: 1,
-  borderImageOutset: 1,
-  borderImageSlice: 1,
-  borderImageWidth: 1,
-  boxFlex: 1,
-  boxFlexGroup: 1,
-  boxOrdinalGroup: 1,
-  columnCount: 1,
-  columns: 1,
-  flex: 1,
-  flexGrow: 1,
-  flexPositive: 1,
-  flexShrink: 1,
-  flexNegative: 1,
-  flexOrder: 1,
-  gridRow: 1,
-  gridRowEnd: 1,
-  gridRowSpan: 1,
-  gridRowStart: 1,
-  gridColumn: 1,
-  gridColumnEnd: 1,
-  gridColumnSpan: 1,
-  gridColumnStart: 1,
-  msGridRow: 1,
-  msGridRowSpan: 1,
-  msGridColumn: 1,
-  msGridColumnSpan: 1,
-  fontWeight: 1,
-  lineHeight: 1,
-  opacity: 1,
-  order: 1,
-  orphans: 1,
-  tabSize: 1,
-  widows: 1,
-  zIndex: 1,
-  zoom: 1,
-  WebkitLineClamp: 1,
-
-  // SVG-related properties
-  fillOpacity: 1,
-  floodOpacity: 1,
-  stopOpacity: 1,
-  strokeDasharray: 1,
-  strokeDashoffset: 1,
-  strokeMiterlimit: 1,
-  strokeOpacity: 1,
-  strokeWidth: 1,
-};
+import unitlessKeys from '@emotion/unitless';
 
 export function isUnitLess(cssKey: string) {
   return unitlessKeys[cssKey] === 1 || cssKey.startsWith('--');

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],
             },
           },
           {},