Some fixes around emotion types

Thinkmill · Feb 11, 2025 · 656e1a8 · 656e1a8
1 parent 77a03f9
commit 656e1a8
Show file tree

Hide file tree

Showing 10 changed files with 93 additions and 82 deletions.
diff --git a/design-system/pkg/package.json b/design-system/pkg/package.json
@@ -1476,7 +1476,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.3",
-    "@emotion/css": "^11.9.0",
+    "@emotion/css": "^11.13.5",
     "@floating-ui/react": "^0.24.0",
     "@internationalized/date": "^3.5.5",
     "@internationalized/string": "^3.2.3",

diff --git a/design-system/pkg/src/style/classNames.ts b/design-system/pkg/src/style/classNames.ts
@@ -1,4 +1,4 @@
-import { cx, ClassNamesArg } from '@emotion/css';
+import { cx } from '@emotion/css';
 import { TOKEN_PREFIX } from '@keystar/ui/primitives';
 import { assert } from 'emery';
 
@@ -13,7 +13,7 @@ export function voussoirClassName(className: string) {
  * function](https://emotion.sh/docs/@emotion/css#cx) that includes the reset
  * class name.
  */
-export function classNames(...inputs: ClassNamesArg[]) {
+export function classNames(...inputs: Parameters<typeof cx>) {
   let resolved = cx(inputs);
 
   if (resolved.includes(resetClassName)) {

diff --git a/design-system/pkg/src/style/responsive.ts b/design-system/pkg/src/style/responsive.ts
@@ -8,7 +8,7 @@ import {
   ResponsiveProp,
   StyleResolver,
 } from './types';
-import { CSSObject } from '@emotion/css';
+import { CSSObject } from '@emotion/css/create-instance';
 
 // Breakpoints
 // ----------------------------------------------------------------------------

diff --git a/design-system/pkg/src/style/types.ts b/design-system/pkg/src/style/types.ts
@@ -1,8 +1,8 @@
-import { ClassNamesArg } from '@emotion/css';
 import { MaybeArray } from '@keystar/ui/types';
 import { CSSProperties } from 'react';
 
 import { tokenSchema } from './tokens';
+import { cx } from '@emotion/css';
 
 export type CSSProp = keyof CSSProperties;
 export type Primitive = number | string | boolean | null | undefined;
@@ -102,7 +102,7 @@ export type RootStyleProps = {
   /** Responsively hide the element, visually **and** from assistive tech. */
   isHidden?: BreakpointRange;
   /** Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**, prefer style props instead. */
-  UNSAFE_className?: ClassNamesArg;
+  UNSAFE_className?: Parameters<typeof cx>[0];
   /** Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/Element/style) for the element. Only use as a **last resort**, prefer style props instead. */
   UNSAFE_style?: CSSProperties;
 };

diff --git a/design-system/pkg/src/style/useStyleProps.ts b/design-system/pkg/src/style/useStyleProps.ts
@@ -1,6 +1,7 @@
 import { HTMLAttributes } from 'react';
 import { warning } from 'emery';
-import { css, CSSInterpolation, CSSObject } from '@emotion/css';
+import { css } from '@emotion/css';
+import { CSSObject, CSSInterpolation } from '@emotion/css/create-instance';
 
 import { defaultStyleProps } from './resolvers';
 import {
@@ -73,7 +74,7 @@ export function useStyleProps<T extends BoxStyleProps>(
       'Note that this may break in future versions due to DOM structure changes.'
   );
 
-  let hiddenStyles: CSSInterpolation = [];
+  let hiddenStyles: CSSInterpolation[] = [];
   if (isHidden) {
     if (isHidden === true) {
       hiddenStyles.push({ display: 'none' });

diff --git a/packages/keystatic/package.json b/packages/keystatic/package.json
@@ -113,7 +113,6 @@
   "dependencies": {
     "@babel/runtime": "^7.18.3",
     "@braintree/sanitize-url": "^6.0.2",
-    "@emotion/css": "^11.9.0",
     "@emotion/weak-memoize": "^0.3.0",
     "@floating-ui/react": "^0.24.0",
     "@internationalized/string": "^3.2.3",

diff --git a/packages/keystatic/src/form/fields/markdoc/editor/custom-components.tsx b/packages/keystatic/src/form/fields/markdoc/editor/custom-components.tsx
@@ -1,4 +1,3 @@
-import { css } from '@emotion/css';
 import { Button } from '@keystar/ui/button';
 import { DialogContainer, Dialog } from '@keystar/ui/dialog';
 import { Box, Flex } from '@keystar/ui/layout';
@@ -13,7 +12,7 @@ import { EditorNodeSpec } from './schema';
 import { classes } from './utils';
 import { ContentComponent } from '../../../../content-components';
 import { NodeSelection } from 'prosemirror-state';
-import { tokenSchema } from '@keystar/ui/style';
+import { css, tokenSchema } from '@keystar/ui/style';
 import { Item, Menu, MenuTrigger } from '@keystar/ui/menu';
 import {
   deserializeValue,

diff --git a/packages/keystatic/src/form/fields/markdoc/editor/popovers/table.tsx b/packages/keystatic/src/form/fields/markdoc/editor/popovers/table.tsx
@@ -1,9 +1,8 @@
-import { css } from '@emotion/css';
 import { ActionButton } from '@keystar/ui/button';
 import { Icon } from '@keystar/ui/icon';
 import { chevronDownIcon } from '@keystar/ui/icon/icons/chevronDownIcon';
 import { MenuTrigger, Menu } from '@keystar/ui/menu';
-import { tokenSchema } from '@keystar/ui/style';
+import { css, tokenSchema } from '@keystar/ui/style';
 import { TooltipTrigger, Tooltip } from '@keystar/ui/tooltip';
 import { Item } from '@react-stately/collections';
 import { Command, EditorState, Plugin } from 'prosemirror-state';

diff --git a/packages/keystatic/src/form/fields/text/path-slug-context.tsx b/packages/keystatic/src/form/fields/text/path-slug-context.tsx
@@ -1,7 +1,6 @@
 import { ReactNode, createContext, useContext, useMemo } from 'react';
 import { ReadonlyPropPath } from '../document/DocumentEditor/component-blocks/utils';
 import { Glob } from '../../..';
-import { css } from '@emotion/css';
 import {
   useAwarenessStates,
   useYjsIfAvailable,
@@ -11,6 +10,7 @@ import { useRouter } from '../../../app/router';
 import { useConfig } from '../../../app/shell/context';
 import { areArraysEqual } from '../document/DocumentEditor/document-features-normalization';
 import { Avatar } from '@keystar/ui/avatar';
+import { css } from '@keystar/ui/style';
 
 function CollabAddToPathProvider(props: {
   path: ReadonlyPropPath;