Inline @emotion/css to avoid dependency on Babel-related dependencies (#1566)

Author: emmatown

.changeset/quiet-buckets-perform.md

@@ -0,0 +1,7 @@
+---
+'@keystar/ui': minor
+---
+
+`@keystar/ui` class names are now prefixed with `kui-` and use an internal
+implementation of `@emotion/css` to avoid dependencies on a large number of
+Babel-related dependencies

design-system/pkg/package.json

@@ -1474,7 +1474,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.3",
-    "@emotion/css": "^11.13.5",
+    "@emotion/cache": "^11.14.0",
+    "@emotion/serialize": "^1.3.3",
+    "@emotion/sheet": "^1.4.0",
+    "@emotion/utils": "^1.4.2",
     "@floating-ui/react": "^0.24.0",
     "@internationalized/date": "^3.12.2",
     "@internationalized/number": "^3.6.7",

design-system/pkg/src/style/classNames.ts

@@ -1,4 +1,4 @@
-import { cx } from '@emotion/css';
+import { cx } from './emotion';
 import { TOKEN_PREFIX } from '@keystar/ui/primitives';
 import { assert } from 'emery';
 

design-system/pkg/src/style/emotion/index.ts

@@ -0,0 +1,193 @@
+// https://github.com/emotion-js/emotion/blob/b882bcba85132554992e4bd49e94c95939bbf810/packages/css/src/create-instance.ts
+// to avoid @emotion/css's dependencies on @emotion/babel-plugin + babel-plugin-macros and the large number of transitive deps that introduces
+import createCache, { EmotionCache, Options } from '@emotion/cache';
+import {
+  serializeStyles,
+  CSSInterpolation,
+  Interpolation,
+} from '@emotion/serialize';
+import {
+  insertStyles,
+  getRegisteredStyles,
+  SerializedStyles,
+  RegisteredCache,
+} from '@emotion/utils';
+import { StyleSheet } from '@emotion/sheet';
+import { TOKEN_PREFIX } from '@keystar/ui/primitives';
+
+export type {
+  CSSInterpolation,
+  ArrayCSSInterpolation,
+  ComponentSelector,
+  CSSObject,
+} from '@emotion/serialize';
+
+function insertWithoutScoping(
+  cache: EmotionCache,
+  serialized: SerializedStyles
+) {
+  if (cache.inserted[serialized.name] === undefined) {
+    return cache.insert('', serialized, cache.sheet, true);
+  }
+}
+
+export type { EmotionCache, Options };
+
+export interface ArrayClassNamesArg extends Array<ClassNamesArg> {}
+export type ClassNamesArg =
+  | undefined
+  | null
+  | string
+  | boolean
+  | { [className: string]: boolean | null | undefined }
+  | ArrayClassNamesArg;
+
+export interface CSSStyleSheet extends StyleSheet {
+  speedy(value: boolean): void;
+}
+
+export interface Emotion {
+  css(template: TemplateStringsArray, ...args: Array<CSSInterpolation>): string;
+  css(...args: Array<CSSInterpolation>): string;
+  cx(...classNames: Array<ClassNamesArg>): string;
+  flush(): void;
+  hydrate(ids: Array<string>): void;
+  injectGlobal(
+    template: TemplateStringsArray,
+    ...args: Array<CSSInterpolation>
+  ): void;
+  injectGlobal(...args: Array<CSSInterpolation>): void;
+  keyframes(
+    template: TemplateStringsArray,
+    ...args: Array<CSSInterpolation>
+  ): string;
+  keyframes(...args: Array<CSSInterpolation>): string;
+  sheet: CSSStyleSheet;
+  cache: EmotionCache;
+  merge(className: string): string;
+  getRegisteredStyles(
+    registeredStyles: Array<string>,
+    className: string
+  ): string;
+}
+
+function merge(
+  registered: RegisteredCache,
+  css: Emotion['css'],
+  className: string
+) {
+  const registeredStyles: string[] = [];
+  const rawClassName = getRegisteredStyles(
+    registered,
+    registeredStyles,
+    className
+  );
+
+  if (registeredStyles.length < 2) {
+    return className;
+  }
+  return rawClassName + css(registeredStyles);
+}
+
+let createEmotion = (options: Options): Emotion => {
+  let cache = createCache(options);
+
+  (cache.sheet as CSSStyleSheet).speedy = function (value: boolean) {
+    this.isSpeedy = value;
+  };
+
+  cache.compat = true;
+
+  let css: Emotion['css'] = (
+    ...args: (TemplateStringsArray | Interpolation<unknown>)[]
+  ) => {
+    let serialized = serializeStyles(args, cache.registered, undefined);
+    insertStyles(cache, serialized, false);
+    return `${cache.key}-${serialized.name}`;
+  };
+
+  let keyframes: Emotion['keyframes'] = (
+    ...args: (TemplateStringsArray | Interpolation<unknown>)[]
+  ) => {
+    let serialized = serializeStyles(args, cache.registered);
+    let animation = `animation-${serialized.name}`;
+    insertWithoutScoping(cache, {
+      name: serialized.name,
+      styles: `@keyframes ${animation}{${serialized.styles}}`,
+    });
+
+    return animation;
+  };
+  let injectGlobal: Emotion['injectGlobal'] = (
+    ...args: (TemplateStringsArray | Interpolation<unknown>)[]
+  ) => {
+    let serialized = serializeStyles(args, cache.registered);
+    insertWithoutScoping(cache, serialized);
+  };
+
+  let cx: Emotion['cx'] = (...args) => {
+    return merge(cache.registered, css, classnames(args));
+  };
+  return {
+    css,
+    cx,
+    injectGlobal,
+    keyframes,
+    hydrate(ids) {
+      ids.forEach(key => {
+        cache.inserted[key] = true;
+      });
+    },
+    flush() {
+      cache.registered = {};
+      cache.inserted = {};
+      cache.sheet.flush();
+    },
+    sheet: cache.sheet as CSSStyleSheet,
+    cache,
+    getRegisteredStyles: getRegisteredStyles.bind(null, cache.registered),
+    merge: merge.bind(null, cache.registered, css),
+  };
+};
+
+let classnames = (args: ClassNamesArg[]) => {
+  let cls = '';
+  for (let i = 0; i < args.length; i++) {
+    let arg = args[i];
+    if (arg == null) continue;
+
+    let toAdd;
+    switch (typeof arg) {
+      case 'boolean':
+        break;
+      case 'object': {
+        if (Array.isArray(arg)) {
+          toAdd = classnames(arg);
+        } else {
+          toAdd = '';
+          for (const k in arg) {
+            if (arg[k] && k) {
+              // eslint-disable-next-line no-unused-expressions
+              toAdd && (toAdd += ' ');
+              toAdd += k;
+            }
+          }
+        }
+        break;
+      }
+      default: {
+        toAdd = arg;
+      }
+    }
+    if (toAdd) {
+      // eslint-disable-next-line no-unused-expressions
+      cls && (cls += ' ');
+      cls += toAdd;
+    }
+  }
+  return cls;
+};
+
+export const { cx, css, keyframes, injectGlobal, cache } = createEmotion({
+  key: TOKEN_PREFIX,
+});

design-system/pkg/src/style/index.ts

@@ -1,4 +1,4 @@
-export { css, keyframes, injectGlobal, cache } from '@emotion/css'; // simplify dependencies + ensure the same version of emotion is used
+export { css, keyframes, injectGlobal, cache } from './emotion'; // simplify dependencies + ensure the same version of emotion is used
 
 export { transition } from './animation';
 export { resetClassName, classNames, ClassList } from './classNames';

design-system/pkg/src/style/responsive.ts

@@ -8,7 +8,7 @@ import {
   ResponsiveProp,
   StyleResolver,
 } from './types';
-import { CSSObject } from '@emotion/css/create-instance';
+import type { CSSObject } from '@emotion/serialize';
 
 // Breakpoints
 // ----------------------------------------------------------------------------

design-system/pkg/src/style/types.ts

@@ -2,7 +2,7 @@ import { MaybeArray } from '@keystar/ui/types';
 import { CSSProperties } from 'react';
 
 import { tokenSchema } from './tokens';
-import { cx } from '@emotion/css';
+import type { cx } from './emotion';
 
 export type CSSProp = keyof CSSProperties;
 export type Primitive = number | string | boolean | null | undefined;

design-system/pkg/src/style/useStyleProps.ts

@@ -1,7 +1,6 @@
 import { HTMLAttributes } from 'react';
 import { warning } from 'emery';
-import { css } from '@emotion/css';
-import { CSSObject, CSSInterpolation } from '@emotion/css/create-instance';
+import { css } from './emotion';
 
 import { defaultStyleProps } from './resolvers';
 import {
@@ -11,6 +10,7 @@ import {
 } from './responsive';
 import { BaseStyleProps, BoxStyleProps, StyleResolverMap } from './types';
 import { classNames } from './classNames';
+import type { CSSInterpolation, CSSObject } from '@emotion/serialize';
 
 // Convert
 // ----------------------------------------------------------------------------