Merge pull request #33278 from software-mansion-labs/ts/disallow-CSSP…

…roperties

[No QA] [TS migration] Follow-up: disallow CSSProperties usage

.eslintrc.js

@@ -24,6 +24,11 @@ const restrictedImportPaths = [
         importNames: ['useSafeAreaInsets', 'SafeAreaConsumer', 'SafeAreaInsetsContext'],
         message: "Please use 'useSafeAreaInsets' from 'src/hooks/useSafeAreaInset' and/or 'SafeAreaConsumer' from 'src/components/SafeAreaConsumer' instead.",
     },
+    {
+        name: 'react',
+        importNames: ['CSSProperties'],
+        message: "Please use 'ViewStyle', 'TextStyle', 'ImageStyle' from 'react-native' instead.",
+    },
 ];
 
 const restrictedImportPatterns = [

src/components/Icon/svgs/LoungeAccessIcon.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import Svg, {G, Path, Polygon} from 'react-native-svg';
 import useTheme from '@hooks/useTheme';
 

src/components/MapView/MapView.website.tsx

@@ -183,7 +183,7 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                                 latitude: currentPosition?.latitude,
                                 zoom: initialState.zoom,
                             }}
-                            style={StyleUtils.getTextColorStyle(theme.mapAttributionText) as React.CSSProperties}
+                            style={StyleUtils.getTextColorStyle(theme.mapAttributionText)}
                             mapStyle={styleURL}
                         >
                             {waypoints?.map(({coordinate, markerComponent, id}) => {

src/styles/utils/index.ts

@@ -1,4 +1,3 @@
-import {CSSProperties} from 'react';
 import {Animated, DimensionValue, PressableStateCallbackType, StyleProp, StyleSheet, TextStyle, ViewStyle} from 'react-native';
 import {EdgeInsets} from 'react-native-safe-area-context';
 import {ValueOf} from 'type-fest';
@@ -31,6 +30,7 @@ import {
     EReceiptColorName,
     EreceiptColorStyle,
     ParsableStyle,
+    TextColorStyle,
     WorkspaceColorStyle,
 } from './types';
 
@@ -402,7 +402,7 @@ function getBackgroundColorStyle(backgroundColor: string): ViewStyle {
 /**
  * Returns a style for text color
  */
-function getTextColorStyle(color: string): TextStyle {
+function getTextColorStyle(color: string): TextColorStyle {
     return {
         color,
     };
@@ -613,7 +613,7 @@ function getMinimumHeight(minHeight: number): ViewStyle {
 /**
  * Get minimum width as style
  */
-function getMinimumWidth(minWidth: number): ViewStyle | CSSProperties {
+function getMinimumWidth(minWidth: number): ViewStyle {
     return {
         minWidth,
     };
@@ -906,7 +906,7 @@ function getMenuItemTextContainerStyle(isSmallAvatarSubscriptMenu: boolean): Vie
 /**
  * Returns color style
  */
-function getColorStyle(color: string): ViewStyle | CSSProperties {
+function getColorStyle(color: string): TextColorStyle {
     return {color};
 }
 

src/styles/utils/objectFit.ts

@@ -1,4 +1,3 @@
-import {CSSProperties} from 'react';
 import {ViewStyle} from 'react-native';
 
 export default {
@@ -14,4 +13,4 @@ export default {
     oFNone: {
         objectFit: 'none',
     },
-} satisfies Record<string, ViewStyle | CSSProperties>;
+} satisfies Record<string, ViewStyle>;

src/styles/utils/types.ts

@@ -42,6 +42,7 @@ type AvatarSize = {width: number};
 
 type WorkspaceColorStyle = {backgroundColor: ColorValue; fill: ColorValue};
 type EreceiptColorStyle = {backgroundColor: ColorValue; color: ColorValue};
+type TextColorStyle = {color: string};
 
 export type {
     AllStyles,
@@ -56,4 +57,5 @@ export type {
     AvatarSize,
     WorkspaceColorStyle,
     EreceiptColorStyle,
+    TextColorStyle,
 };

src/types/modules/react-native.d.ts

@@ -3,6 +3,7 @@
 /* eslint-disable @typescript-eslint/no-empty-interface */
 
 /* eslint-disable @typescript-eslint/consistent-type-definitions */
+// eslint-disable-next-line no-restricted-imports
 import {CSSProperties, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, UIEventHandler, WheelEventHandler} from 'react';
 import 'react-native';
 import {BootSplashModule} from '@libs/BootSplash/types';

src/types/onyx/Bank.ts

@@ -1,4 +1,3 @@
-import {CSSProperties} from 'react';
 import {ViewStyle} from 'react-native';
 import {SvgProps} from 'react-native-svg';
 import {ValueOf} from 'type-fest';
@@ -9,7 +8,7 @@ type BankIcon = {
     iconSize?: number;
     iconHeight?: number;
     iconWidth?: number;
-    iconStyles?: Array<ViewStyle | CSSProperties>;
+    iconStyles?: ViewStyle[];
 };
 
 type BankName = ValueOf<typeof CONST.BANK_NAMES>;

src/types/onyx/PaymentMethod.ts

@@ -1,4 +1,3 @@
-import {CSSProperties} from 'react';
 import {ViewStyle} from 'react-native';
 import {SvgProps} from 'react-native-svg';
 import BankAccount from './BankAccount';
@@ -10,7 +9,7 @@ type PaymentMethod = (BankAccount | Fund) & {
     iconSize?: number;
     iconHeight?: number;
     iconWidth?: number;
-    iconStyles?: Array<ViewStyle | CSSProperties>;
+    iconStyles?: ViewStyle[];
 };
 
 export default PaymentMethod;