revert emotion/unitless

packages/pigment-css-react/package.json

@@ -41,7 +41,6 @@
     "@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/isUnitLess.ts

@@ -1,4 +1,55 @@
-import unitlessKeys from '@emotion/unitless';
+// 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,
+};
 
 export function isUnitLess(cssKey: string) {
   return unitlessKeys[cssKey] === 1 || cssKey.startsWith('--');