🔧 (typescript) change moduleResolution to bundler

packages/api/tsconfig.dist.json

@@ -5,13 +5,14 @@
     // the latest Node 16.x release supports all of the features
     "target": "ES2021",
     "module": "CommonJS",
+    "moduleResolution": "node10",
     "noEmit": false,
     "declaration": true,
     "outDir": "dist",
     "declarationDir": "@types",
     "paths": {
       "loot-core/src/*": ["./loot-core/*"],
-      "loot-core/*": ["./@types/loot-core/*"],
+      "loot-core/*": ["./@types/loot-core/*"]
     }
   },
   "include": ["."],

packages/crdt/tsconfig.dist.json

@@ -5,6 +5,7 @@
     // the latest Node 16.x release supports all of the features
     "target": "ES2021",
     "module": "CommonJS",
+    "moduleResolution": "node10",
     "noEmit": false,
     "declaration": true,
     "strict": true,

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

@@ -1,12 +1,12 @@
 // @ts-strict-ignore
-import React, { useEffect, useRef, type CSSProperties } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 
 import { css } from '@emotion/css';
 import remarkGfm from 'remark-gfm';
 
-import { theme } from '../style';
+import { type CSSProperties, theme } from '../style';
 import { remarkBreaks, sequentialNewlinesPlugin } from '../util/markdown';
 
 import { Text } from './common/Text';

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, type CSSProperties } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { Routes, Route, useLocation } from 'react-router-dom';
@@ -26,7 +26,7 @@ import {
   SvgViewShow,
 } from '../icons/v2';
 import { useDispatch } from '../redux';
-import { theme, styles } from '../style';
+import { theme, styles, type CSSProperties } from '../style';
 
 import { AccountSyncCheck } from './accounts/AccountSyncCheck';
 import { AnimatedRefresh } from './AnimatedRefresh';

packages/desktop-client/src/components/common/Block.tsx

@@ -1,7 +1,9 @@
-import { type HTMLProps, type Ref, type CSSProperties } from 'react';
+import { type HTMLProps, type Ref } from 'react';
 
 import { css, cx } from '@emotion/css';
 
+import { type CSSProperties } from '../../style';
+
 type BlockProps = HTMLProps<HTMLDivElement> & {
   innerRef?: Ref<HTMLDivElement>;
   style?: CSSProperties;

packages/desktop-client/src/components/common/Button.tsx

@@ -1,14 +1,9 @@
-import React, {
-  forwardRef,
-  type ElementType,
-  type HTMLProps,
-  type CSSProperties,
-} from 'react';
+import React, { forwardRef, type ElementType, type HTMLProps } from 'react';
 
 import { css } from '@emotion/css';
 
 import { AnimatedLoading } from '../../icons/AnimatedLoading';
-import { styles, theme } from '../../style';
+import { styles, theme, type CSSProperties } from '../../style';
 
 import { View } from './View';
 

packages/desktop-client/src/components/common/InlineField.tsx

@@ -1,7 +1,9 @@
-import { type ReactNode, type CSSProperties } from 'react';
+import { type ReactNode } from 'react';
 
 import { css } from '@emotion/css';
 
+import { type CSSProperties } from '../../style';
+
 type InlineFieldProps = {
   label: ReactNode;
   labelWidth?: number;

packages/desktop-client/src/components/common/Input.tsx

@@ -2,15 +2,14 @@ import React, {
   type InputHTMLAttributes,
   type KeyboardEvent,
   type Ref,
-  type CSSProperties,
   useRef,
 } from 'react';
 
 import { css, cx } from '@emotion/css';
 
 import { useMergedRefs } from '../../hooks/useMergedRefs';
 import { useProperFocus } from '../../hooks/useProperFocus';
-import { styles, theme } from '../../style';
+import { styles, theme, type CSSProperties } from '../../style';
 
 export const defaultInputStyle = {
   outline: 0,

packages/desktop-client/src/components/common/InputWithContent.tsx

@@ -1,11 +1,6 @@
-import {
-  useState,
-  type ComponentProps,
-  type ReactNode,
-  type CSSProperties,
-} from 'react';
+import { useState, type ComponentProps, type ReactNode } from 'react';
 
-import { theme } from '../../style';
+import { theme, type CSSProperties } from '../../style';
 
 import { Input, defaultInputStyle } from './Input';
 import { View } from './View';

packages/desktop-client/src/components/common/Link.tsx

@@ -2,14 +2,13 @@ import React, {
   type MouseEventHandler,
   type ComponentProps,
   type ReactNode,
-  type CSSProperties,
 } from 'react';
 import { NavLink, useMatch } from 'react-router-dom';
 
 import { css } from '@emotion/css';
 
 import { useNavigate } from '../../hooks/useNavigate';
-import { styles } from '../../style';
+import { type CSSProperties, styles } from '../../style';
 import { theme } from '../../style/theme';
 
 import { Button } from './Button2';

packages/desktop-client/src/components/common/Paragraph.tsx

@@ -1,7 +1,9 @@
-import { type HTMLProps, type CSSProperties } from 'react';
+import { type HTMLProps } from 'react';
 
 import { css } from '@emotion/css';
 
+import { type CSSProperties } from '../../style';
+
 type ParagraphProps = HTMLProps<HTMLDivElement> & {
   style?: CSSProperties;
   isLast?: boolean;

packages/desktop-client/src/components/common/Text.tsx

@@ -3,11 +3,12 @@ import React, {
   type Ref,
   type ReactNode,
   forwardRef,
-  type CSSProperties,
 } from 'react';
 
 import { css, cx } from '@emotion/css';
 
+import { type CSSProperties } from '../../style';
+
 type TextProps = HTMLProps<HTMLSpanElement> & {
   innerRef?: Ref<HTMLSpanElement>;
   className?: string;

packages/desktop-client/src/components/common/View.tsx

@@ -1,12 +1,9 @@
-import React, {
-  forwardRef,
-  type HTMLProps,
-  type Ref,
-  type CSSProperties,
-} from 'react';
+import React, { forwardRef, type HTMLProps, type Ref } from 'react';
 
 import { css, cx } from '@emotion/css';
 
+import { type CSSProperties } from '../../style';
+
 type ViewProps = HTMLProps<HTMLDivElement> & {
   className?: string;
   style?: CSSProperties;

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

@@ -1,12 +1,8 @@
-import React, {
-  type ReactNode,
-  type ComponentProps,
-  type CSSProperties,
-} from 'react';
+import React, { type ReactNode, type ComponentProps } from 'react';
 
 import { css } from '@emotion/css';
 
-import { theme } from '../style';
+import { theme, type CSSProperties } from '../style';
 
 import { Text } from './common/Text';
 import { View } from './common/View';

packages/desktop-client/src/components/modals/EnvelopeBudgetMonthMenuModal.tsx

@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import React, { useState, type CSSProperties } from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { css } from '@emotion/css';
@@ -10,7 +10,7 @@ import { useNotes } from '../../hooks/useNotes';
 import { useUndo } from '../../hooks/useUndo';
 import { SvgCheveronDown, SvgCheveronUp } from '../../icons/v1';
 import { SvgNotesPaper } from '../../icons/v2';
-import { styles, theme } from '../../style';
+import { styles, theme, type CSSProperties } from '../../style';
 import { BudgetMonthMenu } from '../budget/envelope/budgetsummary/BudgetMonthMenu';
 import { Button } from '../common/Button2';
 import { Modal, ModalCloseButton, ModalHeader } from '../common/Modal';

packages/desktop-client/src/components/modals/TrackingBudgetMonthMenuModal.tsx

@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import React, { useState, type CSSProperties } from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { css } from '@emotion/css';
@@ -10,7 +10,7 @@ import { useNotes } from '../../hooks/useNotes';
 import { useUndo } from '../../hooks/useUndo';
 import { SvgCheveronDown, SvgCheveronUp } from '../../icons/v1';
 import { SvgNotesPaper } from '../../icons/v2';
-import { styles, theme } from '../../style';
+import { type CSSProperties, styles, theme } from '../../style';
 import { BudgetMonthMenu } from '../budget/tracking/budgetsummary/BudgetMonthMenu';
 import { Button } from '../common/Button2';
 import { Modal, ModalCloseButton, ModalHeader } from '../common/Modal';

packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx

@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import React, { type CSSProperties } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { css } from '@emotion/css';
@@ -16,7 +16,7 @@ import {
 import { amountToCurrencyNoDecimal } from 'loot-core/shared/util';
 
 import { usePrivacyMode } from '../../../hooks/usePrivacyMode';
-import { theme } from '../../../style';
+import { type CSSProperties, theme } from '../../../style';
 import { AlignedText } from '../../common/AlignedText';
 import { Container } from '../Container';
 import { numberFormatterTooltip } from '../numberFormatter';

packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx

@@ -4,7 +4,6 @@ import React, {
   useLayoutEffect,
   useRef,
   type UIEventHandler,
-  type CSSProperties,
 } from 'react';
 
 import {
@@ -14,6 +13,7 @@ import {
 } from 'loot-core/src/types/models/reports';
 import { type RuleConditionEntity } from 'loot-core/types/models/rule';
 
+import { type CSSProperties } from '../../../../style';
 import { Block } from '../../../common/Block';
 import { View } from '../../../common/View';
 

packages/desktop-client/src/components/select/DateSelect.tsx

@@ -1,6 +1,5 @@
 // @ts-strict-ignore
 import React, {
-  type CSSProperties,
   forwardRef,
   useEffect,
   useImperativeHandle,
@@ -28,7 +27,7 @@ import {
 } from 'loot-core/src/shared/months';
 
 import { useSyncedPref } from '../../hooks/useSyncedPref';
-import { styles, theme } from '../../style';
+import { styles, theme, type CSSProperties } from '../../style';
 import { Input } from '../common/Input';
 import { Popover } from '../common/Popover';
 import { View } from '../common/View';

packages/desktop-client/src/components/settings/UI.tsx

@@ -1,10 +1,10 @@
-import React, { useState, type ReactNode, type CSSProperties } from 'react';
+import React, { useState, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 
 import { css } from '@emotion/css';
 
-import { theme } from '../../style';
+import { type CSSProperties, theme } from '../../style';
 import { tokens } from '../../tokens';
 import { Link } from '../common/Link';
 import { View } from '../common/View';

packages/desktop-client/src/components/sidebar/ItemContent.tsx

@@ -1,14 +1,15 @@
 import React, {
   type MouseEventHandler,
   type ReactNode,
-  type CSSProperties,
+  type ComponentProps,
 } from 'react';
 
+import { type CSSProperties } from '../../style';
 import { Link } from '../common/Link';
 import { View } from '../common/View';
 
 type ItemContentProps = {
-  style: CSSProperties;
+  style: ComponentProps<typeof View>['style'];
   to: string;
   onClick: MouseEventHandler<HTMLDivElement>;
   activeStyle: CSSProperties;

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

@@ -14,7 +14,6 @@ import React, {
   type ReactElement,
   type Ref,
   type MutableRefObject,
-  type CSSProperties,
 } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
@@ -27,7 +26,7 @@ import { useSelectedItems } from '../hooks/useSelected';
 import { AnimatedLoading } from '../icons/AnimatedLoading';
 import { SvgDelete, SvgExpandArrow } from '../icons/v0';
 import { SvgCheckmark } from '../icons/v1';
-import { styles, theme } from '../style';
+import { type CSSProperties, styles, theme } from '../style';
 
 import { Button } from './common/Button2';
 import { Input } from './common/Input';

packages/desktop-client/src/style/styles.ts

@@ -1,6 +1,4 @@
 // @ts-strict-ignore
-import { type CSSProperties } from 'react';
-
 import { keyframes } from '@emotion/css';
 
 import * as Platform from 'loot-core/src/client/platform';
@@ -9,13 +7,17 @@ import { tokens } from '../tokens';
 
 import { theme } from './theme';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type CSSProperties = Record<string, any>;
+
 const MOBILE_MIN_HEIGHT = 40;
 
 const shadowLarge = {
   boxShadow: '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
 };
 
-export const styles = {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const styles: Record<string, any> = {
   incomeHeaderHeight: 70,
   cardShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
   monthRightPadding: 5,

packages/desktop-electron/tsconfig.dist.json

@@ -5,9 +5,10 @@
     // the latest Node 16.x release supports all of the features
     "target": "ES2021",
     "module": "CommonJS",
+    "moduleResolution": "node10",
     "noEmit": false,
     "declaration": true,
-    "outDir": "build",
+    "outDir": "build"
   },
   "include": ["."],
   "exclude": ["**/node_modules/*", "build/**/*"]

tsconfig.json

@@ -25,8 +25,8 @@
     "checkJs": false,
     // Used for temp builds
     "outDir": "build",
-    "moduleResolution": "Node10",
-    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "module": "es2022",
     // Until/if we build using tsc
     "noEmit": true,
     "paths": {

upcoming-release-notes/4163.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+Change TS `moduleResolution` to `bundler` and patch `CSSProperties` imports.