@emotion/css as drop-in replacement for abandoned glamor library

packages/desktop-client/globals.d.ts

@@ -1,2 +1,9 @@
+import { type CSSObject } from '@emotion/css/dist/declarations/src/create-instance';
+
 // Allow images to be imported
 declare module '*.png';
+
+declare module 'react' {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions, @typescript-eslint/no-empty-object-type
+  interface CSSProperties extends CSSObject {}
+}

packages/desktop-client/package.json

@@ -6,6 +6,7 @@
     "build"
   ],
   "devDependencies": {
+    "@emotion/css": "^11.13.4",
     "@fontsource/redacted-script": "^5.0.21",
     "@juggle/resize-observer": "^3.4.0",
     "@playwright/test": "1.41.1",
@@ -36,7 +37,6 @@
     "debounce": "^1.2.1",
     "downshift": "7.6.2",
     "focus-visible": "^4.1.5",
-    "glamor": "^2.20.40",
     "i18next": "^23.11.5",
     "i18next-parser": "^9.0.0",
     "i18next-resources-to-backend": "^1.2.1",

packages/desktop-client/src/components/AnimatedRefresh.tsx

@@ -1,10 +1,9 @@
 // @ts-strict-ignore
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 
-import { keyframes } from 'glamor';
+import { keyframes } from '@emotion/css';
 
 import { SvgRefresh } from '../icons/v1';
-import { type CSSProperties } from '../style';
 
 import { View } from './common/View';
 

packages/desktop-client/src/components/AppBackground.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { useTransition, animated } from 'react-spring';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { AnimatedLoading } from '../icons/AnimatedLoading';
 import { theme } from '../style';
@@ -33,7 +33,7 @@ export function AppBackground({ isLoading }: AppBackgroundProps) {
         transitions((style, item) => (
           <animated.div key={item} style={style}>
             <View
-              className={`${css({
+              className={css({
                 position: 'absolute',
                 top: 0,
                 left: 0,
@@ -42,7 +42,7 @@ export function AppBackground({ isLoading }: AppBackgroundProps) {
                 paddingTop: 200,
                 color: theme.pageText,
                 alignItems: 'center',
-              })}`}
+              })}
             >
               <Block style={{ marginBottom: 20, fontSize: 18 }}>
                 {loadingText}

packages/desktop-client/src/components/FixedSizeList.tsx

@@ -6,12 +6,11 @@ import {
   type Ref,
   type MutableRefObject,
   type UIEvent,
+  type CSSProperties,
 } from 'react';
 
 import memoizeOne from 'memoize-one';
 
-import { type CSSProperties } from '../style';
-
 import { View } from './common/View';
 
 const IS_SCROLLING_DEBOUNCE_INTERVAL = 150;

packages/desktop-client/src/components/LoggedInUser.tsx

@@ -1,12 +1,12 @@
 // @ts-strict-ignore
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, type CSSProperties } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import { type State } from 'loot-core/src/client/state-types';
 
 import { useActions } from '../hooks/useActions';
-import { theme, styles, type CSSProperties } from '../style';
+import { theme, styles } from '../style';
 
 import { Button } from './common/Button2';
 import { Menu } from './common/Menu';

packages/desktop-client/src/components/ManageRules.tsx

@@ -117,17 +117,14 @@ export function ManageRules({
   const { list: categories } = useCategories();
   const payees = usePayees();
   const accounts = useAccounts();
-  const state = {
-    payees,
-    accounts,
-    schedules,
-  };
   const filterData = useMemo(
     () => ({
-      ...state,
+      payees,
+      accounts,
+      schedules,
       categories,
     }),
-    [state, categories],
+    [payees, accounts, schedules, categories],
   );
 
   const filteredRules = useMemo(

packages/desktop-client/src/components/Notes.tsx

@@ -1,12 +1,12 @@
 // @ts-strict-ignore
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, type CSSProperties } from 'react';
 import ReactMarkdown from 'react-markdown';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 import remarkGfm from 'remark-gfm';
 
 import { useResponsive } from '../ResponsiveProvider';
-import { type CSSProperties, theme } from '../style';
+import { theme } from '../style';
 import { remarkBreaks, sequentialNewlinesPlugin } from '../util/markdown';
 
 import { Text } from './common/Text';
@@ -110,22 +110,22 @@ export function Notes({
   return editable ? (
     <textarea
       ref={textAreaRef}
-      className={`${css({
+      className={css({
         border: '1px solid ' + theme.buttonNormalBorder,
         padding: 7,
         ...(!isNarrowWidth && { minWidth: 350, minHeight: 120 }),
         outline: 'none',
         backgroundColor: theme.tableBackground,
         color: theme.tableText,
         ...getStyle?.(editable),
-      })}`}
+      })}
       value={notes || ''}
       onChange={e => onChange?.(e.target.value)}
       onBlur={e => onBlur?.(e.target.value)}
       placeholder="Notes (markdown supported)"
     />
   ) : (
-    <Text {...markdownStyles} style={{ ...getStyle?.(editable) }}>
+    <Text className={css([markdownStyles, getStyle?.(editable)])}>
       <ReactMarkdown remarkPlugins={remarkPlugins} linkTarget="_blank">
         {notes}
       </ReactMarkdown>

packages/desktop-client/src/components/NotesButton.tsx

@@ -1,10 +1,16 @@
-import React, { useEffect, useRef, useState, type ComponentProps } from 'react';
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  type ComponentProps,
+  type CSSProperties,
+} from 'react';
 
 import { send } from 'loot-core/src/platform/client/fetch';
 
 import { useNotes } from '../hooks/useNotes';
 import { SvgCustomNotesPaper } from '../icons/v2';
-import { type CSSProperties, theme } from '../style';
+import { theme } from '../style';
 
 import { Button } from './common/Button2';
 import { Popover } from './common/Popover';

packages/desktop-client/src/components/Notifications.tsx

@@ -4,10 +4,11 @@ import React, {
   useEffect,
   useMemo,
   type SetStateAction,
+  type CSSProperties,
 } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { removeNotification } from 'loot-core/client/actions';
 import { type State } from 'loot-core/src/client/state-types';
@@ -16,7 +17,7 @@ import type { NotificationWithId } from 'loot-core/src/client/state-types/notifi
 import { AnimatedLoading } from '../icons/AnimatedLoading';
 import { SvgDelete } from '../icons/v0';
 import { useResponsive } from '../ResponsiveProvider';
-import { styles, theme, type CSSProperties } from '../style';
+import { styles, theme } from '../style';
 
 import { Button, ButtonWithLoading } from './common/Button2';
 import { Link } from './common/Link';
@@ -202,29 +203,27 @@ function Notification({
                 onRemove();
                 setLoading(false);
               }}
-              className={String(
-                css({
-                  backgroundColor: 'transparent',
-                  border: `1px solid ${
-                    positive
-                      ? theme.noticeBorder
-                      : error
-                        ? theme.errorBorder
-                        : theme.warningBorder
-                  }`,
-                  color: 'currentColor',
-                  ...styles.mediumText,
-                  flexShrink: 0,
-                  '&[data-hovered], &[data-pressed]': {
-                    backgroundColor: positive
-                      ? theme.noticeBackground
-                      : error
-                        ? theme.errorBackground
-                        : theme.warningBackground,
-                  },
-                  ...narrowStyle,
-                }),
-              )}
+              className={css({
+                backgroundColor: 'transparent',
+                border: `1px solid ${
+                  positive
+                    ? theme.noticeBorder
+                    : error
+                      ? theme.errorBorder
+                      : theme.warningBorder
+                }`,
+                color: 'currentColor',
+                ...styles.mediumText,
+                flexShrink: 0,
+                '&[data-hovered], &[data-pressed]': {
+                  backgroundColor: positive
+                    ? theme.noticeBackground
+                    : error
+                      ? theme.errorBackground
+                      : theme.warningBackground,
+                },
+                ...narrowStyle,
+              })}
             >
               {button.title}
             </ButtonWithLoading>

packages/desktop-client/src/components/Page.tsx

@@ -1,7 +1,7 @@
-import React, { type ReactNode } from 'react';
+import React, { type ReactNode, type CSSProperties } from 'react';
 
 import { useResponsive } from '../ResponsiveProvider';
-import { theme, styles, type CSSProperties } from '../style';
+import { theme, styles } from '../style';
 
 import { Text } from './common/Text';
 import { View } from './common/View';

packages/desktop-client/src/components/PrivacyFilter.tsx

@@ -5,7 +5,7 @@ import React, {
   type ReactNode,
 } from 'react';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { usePrivacyMode } from '../hooks/usePrivacyMode';
 import { useResponsive } from '../ResponsiveProvider';
@@ -73,7 +73,7 @@ function PrivacyOverlay({ children, ...props }) {
 
   return (
     <View
-      className={`${css(
+      className={css(
         [
           {
             display: 'inline-flex',
@@ -96,23 +96,23 @@ function PrivacyOverlay({ children, ...props }) {
           },
         ],
         style,
-      )}`}
+      )}
       {...restProps}
     >
       <div
-        className={`${css([
+        className={css([
           {
             display: 'flex',
             flexGrow: 1,
           },
-        ])}`}
+        ])}
       >
         {children}
       </div>
 
       <div
         aria-hidden="true"
-        className={`${css({
+        className={css({
           flexDirection: 'column',
           fontFamily: 'Redacted Script',
           height: '100%',
@@ -121,7 +121,7 @@ function PrivacyOverlay({ children, ...props }) {
           pointerEvents: 'none',
           position: 'absolute',
           width: '100%',
-        })}`}
+        })}
       >
         {children}
       </div>

packages/desktop-client/src/components/ThemeSelector.tsx

@@ -1,10 +1,10 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, type CSSProperties } from 'react';
 
 import type { Theme } from 'loot-core/src/types/prefs';
 
 import { SvgMoonStars, SvgSun, SvgSystem } from '../icons/v2';
 import { useResponsive } from '../ResponsiveProvider';
-import { type CSSProperties, themeOptions, useTheme } from '../style';
+import { themeOptions, useTheme } from '../style';
 
 import { Button } from './common/Button2';
 import { Menu } from './common/Menu';

packages/desktop-client/src/components/Titlebar.tsx

@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, type CSSProperties } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { Routes, Route, useLocation } from 'react-router-dom';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import * as Platform from 'loot-core/src/client/platform';
 import * as queries from 'loot-core/src/client/queries';
@@ -22,7 +22,7 @@ import {
   SvgViewShow,
 } from '../icons/v2';
 import { useResponsive } from '../ResponsiveProvider';
-import { theme, type CSSProperties, styles } from '../style';
+import { theme, styles } from '../style';
 
 import { AccountSyncCheck } from './accounts/AccountSyncCheck';
 import { AnimatedRefresh } from './AnimatedRefresh';
@@ -204,23 +204,21 @@ function SyncButton({ style, isMobile = false }: SyncButtonProps) {
     <Button
       variant="bare"
       aria-label="Sync"
-      className={String(
-        css({
-          ...(isMobile
-            ? {
-                ...style,
-                WebkitAppRegion: 'none',
-                ...mobileIconStyle,
-              }
-            : {
-                ...style,
-                WebkitAppRegion: 'none',
-                color: desktopColor,
-              }),
-          '&[data-hovered]': hoveredStyle,
-          '&[data-pressed]': activeStyle,
-        }),
-      )}
+      className={css({
+        ...(isMobile
+          ? {
+              ...style,
+              WebkitAppRegion: 'none',
+              ...mobileIconStyle,
+            }
+          : {
+              ...style,
+              WebkitAppRegion: 'none',
+              color: desktopColor,
+            }),
+        '&[data-hovered]': hoveredStyle,
+        '&[data-pressed]': activeStyle,
+      })}
       onPress={sync}
     >
       {isMobile ? (