chore: Move some CSS props to the common dir (#8392)

MatiPl01 · web-flow · commit 0297d299065f · 2025-10-15T10:32:27.000Z
## Summary

This PR moves some types (`PlainStyle`, `AnyRecord`, `AnyComponent`) to
the types in the `common` directory. They will be useful after moving
style processors to the `common` dir from CSS-specific dirs.
diff --git a/packages/react-native-reanimated/src/common/types.ts b/packages/react-native-reanimated/src/common/types.ts
@@ -1,4 +1,8 @@
 'use strict';
+
+import type { ComponentType } from 'react';
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+
 export type Maybe<T> = T | null | undefined;
 
 /**
@@ -8,6 +12,9 @@ export type Maybe<T> = T | null | undefined;
  */
 export type NonMutable<T> = T extends object ? Readonly<T> : T;
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export type AnyRecord = Record<string, any>;
+
 export type ValueProcessor<V, R = V> = (
   value: NonMutable<V>
 ) => Maybe<R> | Record<string, R>;
@@ -19,3 +26,18 @@ export type NormalizedTransformOrigin = [
   `${number}%` | number,
   number,
 ];
+
+type DeprecatedProps =
+  | 'transformMatrix'
+  | 'rotation'
+  | 'scaleX'
+  | 'scaleY'
+  | 'translateX'
+  | 'translateY';
+
+export type PlainStyle = Omit<
+  ViewStyle & TextStyle & ImageStyle,
+  DeprecatedProps
+>;
+
+export type AnyComponent = ComponentType<any>;
diff --git a/packages/react-native-reanimated/src/commonTypes.ts b/packages/react-native-reanimated/src/commonTypes.ts
@@ -12,9 +12,8 @@ import type {
 } from 'react-native';
 import type { SerializableRef, WorkletFunction } from 'react-native-worklets';
 
-import type { Maybe } from './common/types';
+import type { AnyRecord, Maybe } from './common';
 import type { CSSAnimationProperties, CSSTransitionProperties } from './css';
-import type { AnyRecord } from './css/types';
 import type { EasingFunctionFactory } from './Easing';
 
 type LayoutAnimationOptions =
diff --git a/packages/react-native-reanimated/src/createAnimatedComponent/createAnimatedComponent.tsx b/packages/react-native-reanimated/src/createAnimatedComponent/createAnimatedComponent.tsx
@@ -3,8 +3,8 @@ import type { ComponentRef, ComponentType, ReactNode, Ref } from 'react';
 import type React from 'react';
 import type { FlatList, FlatListProps } from 'react-native';
 
+import type { AnyRecord } from '../common';
 import type { InstanceOrElement } from '../commonTypes';
-import type { AnyRecord } from '../css/types';
 import type { AnimatedProps } from '../helperTypes';
 import type { AnimatedRef } from '../hook';
 import type { ExtractElementRef } from '../hook/commonTypes';
diff --git a/packages/react-native-reanimated/src/css/component/AnimatedComponent.tsx b/packages/react-native-reanimated/src/css/component/AnimatedComponent.tsx
@@ -4,6 +4,7 @@ import { Component } from 'react';
 import type { StyleProp } from 'react-native';
 import { Platform, StyleSheet } from 'react-native';
 
+import type { AnyComponent, AnyRecord, PlainStyle } from '../../common';
 import { IS_JEST, ReanimatedError, SHOULD_BE_USE_WEB } from '../../common';
 import type {
   InternalHostInstance,
@@ -19,7 +20,7 @@ import { getShadowNodeWrapperFromRef } from '../../fabricUtils';
 import { findHostInstance } from '../../platform-specific/findHostInstance';
 import { markNodeAsRemovable, unmarkNodeAsRemovable } from '../native';
 import { CSSManager } from '../platform';
-import type { AnyComponent, AnyRecord, CSSStyle, PlainStyle } from '../types';
+import type { CSSStyle } from '../types';
 import { filterNonCSSStyleProps } from './utils';
 
 export type AnimatedComponentProps = Record<string, unknown> & {
diff --git a/packages/react-native-reanimated/src/css/component/createAnimatedComponent.tsx b/packages/react-native-reanimated/src/css/component/createAnimatedComponent.tsx
@@ -3,10 +3,11 @@ import type { ComponentRef, ComponentType, ReactNode, Ref } from 'react';
 import type React from 'react';
 import type { FlatList, FlatListProps } from 'react-native';
 
+import type { AnyRecord } from '../../common';
 import type { InitialComponentProps } from '../../createAnimatedComponent/commonTypes';
 import type { AnimatedProps } from '../../helperTypes';
 import type { AnimatedRef } from '../../hook';
-import type { AnyRecord, CSSProps } from '../types';
+import type { CSSProps } from '../types';
 import type { AnimatedComponentProps } from './AnimatedComponent';
 import AnimatedComponentImpl from './AnimatedComponent';
 
diff --git a/packages/react-native-reanimated/src/css/component/utils.ts b/packages/react-native-reanimated/src/css/component/utils.ts
@@ -1,7 +1,8 @@
 'use strict';
 import type { StyleProp } from 'react-native';
 
-import type { AnyRecord, CSSStyle } from '../types';
+import type { AnyRecord } from '../../common';
+import type { CSSStyle } from '../types';
 import { isCSSStyleProp } from '../utils/guards';
 
 function filterNonCSSStylePropsRecursive(
diff --git a/packages/react-native-reanimated/src/css/models/CSSKeyframesRuleBase.ts b/packages/react-native-reanimated/src/css/models/CSSKeyframesRuleBase.ts
@@ -1,10 +1,7 @@
 'use strict';
+import type { PlainStyle } from '../../common';
 import { ANIMATION_NAME_PREFIX } from '../constants';
-import type {
-  CSSAnimationKeyframes,
-  CSSKeyframesRule,
-  PlainStyle,
-} from '../types';
+import type { CSSAnimationKeyframes, CSSKeyframesRule } from '../types';
 
 export default abstract class CSSKeyframesRuleBase<S extends PlainStyle>
   implements CSSKeyframesRule
diff --git a/packages/react-native-reanimated/src/css/native/keyframes/CSSKeyframesRuleImpl.ts b/packages/react-native-reanimated/src/css/native/keyframes/CSSKeyframesRuleImpl.ts
@@ -1,6 +1,7 @@
 'use strict';
+import type { PlainStyle } from '../../../common';
 import { CSSKeyframesRuleBase } from '../../models';
-import type { CSSAnimationKeyframes, PlainStyle } from '../../types';
+import type { CSSAnimationKeyframes } from '../../types';
 import { normalizeAnimationKeyframes } from '../normalization';
 import { getStyleBuilder } from '../registry';
 import type { NormalizedCSSAnimationKeyframesConfig } from '../types';
diff --git a/packages/react-native-reanimated/src/css/native/managers/CSSManager.ts b/packages/react-native-reanimated/src/css/native/managers/CSSManager.ts
@@ -1,8 +1,9 @@
 'use strict';
+import type { AnyRecord } from '../../../common';
 import { ReanimatedError } from '../../../common';
 import type { ShadowNodeWrapper } from '../../../commonTypes';
 import type { ViewInfo } from '../../../createAnimatedComponent/commonTypes';
-import type { AnyRecord, CSSStyle } from '../../types';
+import type { CSSStyle } from '../../types';
 import type { ICSSManager } from '../../types/interfaces';
 import { filterCSSAndStyleProperties } from '../../utils';
 import { setViewStyle } from '../proxy';
diff --git a/packages/react-native-reanimated/src/css/native/normalization/animation/keyframes.ts b/packages/react-native-reanimated/src/css/native/normalization/animation/keyframes.ts
@@ -1,9 +1,9 @@
 'use strict';
+import type { AnyRecord } from '../../../../common';
 import { ReanimatedError } from '../../../../common';
 import type { StyleProps } from '../../../../commonTypes';
 import { PERCENTAGE_REGEX } from '../../../constants';
 import type {
-  AnyRecord,
   CSSAnimationKeyframes,
   CSSAnimationKeyframeSelector,
   CSSAnimationTimingFunction,
diff --git a/packages/react-native-reanimated/src/css/native/normalization/transition/config.ts b/packages/react-native-reanimated/src/css/native/normalization/transition/config.ts
@@ -1,7 +1,7 @@
 'use strict';
+import type { AnyRecord } from '../../../../common';
 import { ReanimatedError } from '../../../../common';
 import type {
-  AnyRecord,
   CSSTransitionProperties,
   CSSTransitionProperty,
 } from '../../../types';
diff --git a/packages/react-native-reanimated/src/css/native/style/__tests__/createStyleBuilder.test.ts b/packages/react-native-reanimated/src/css/native/style/__tests__/createStyleBuilder.test.ts
@@ -1,7 +1,6 @@
 'use strict';
-import type { PlainStyle } from '../../../types';
+import type { PlainStyle } from '../../../../common';
 import createStyleBuilder from '../createStyleBuilder';
-
 // TODO - add more tests
 
 describe(createStyleBuilder, () => {
diff --git a/packages/react-native-reanimated/src/css/native/style/config.ts b/packages/react-native-reanimated/src/css/native/style/config.ts
@@ -1,10 +1,10 @@
 'use strict';
+import type { PlainStyle } from '../../../common';
 import {
   IS_ANDROID,
   processBoxShadowNative,
   processTransformOrigin,
 } from '../../../common';
-import type { PlainStyle } from '../../types';
 import {
   processAspectRatio,
   processColor,
diff --git a/packages/react-native-reanimated/src/css/native/style/createStyleBuilder.ts b/packages/react-native-reanimated/src/css/native/style/createStyleBuilder.ts
@@ -1,6 +1,6 @@
 'use strict';
 
-import type { AnyRecord } from '../../types';
+import type { AnyRecord } from '../../../common';
 import { isConfigPropertyAlias, isDefined, isRecord } from '../../utils';
 import type {
   StyleBuilder,
diff --git a/packages/react-native-reanimated/src/css/native/style/types.ts b/packages/react-native-reanimated/src/css/native/style/types.ts
@@ -1,6 +1,6 @@
 'use strict';
-import type { ValueProcessor } from '../../../common';
-import type { AnyRecord, ConfigPropertyAlias } from '../../types';
+import type { AnyRecord, ValueProcessor } from '../../../common';
+import type { ConfigPropertyAlias } from '../../types';
 
 export type StyleBuildMiddleware<P extends AnyRecord> = (props: P) => P;
 
diff --git a/packages/react-native-reanimated/src/css/native/types/animation.ts b/packages/react-native-reanimated/src/css/native/types/animation.ts
@@ -1,10 +1,10 @@
 'use strict';
+import type { PlainStyle } from '../../../common';
 import type { NormalizedCSSTimingFunction } from '../../easing';
 import type {
   CSSAnimationDirection,
   CSSAnimationFillMode,
   CSSAnimationPlayState,
-  PlainStyle,
 } from '../../types';
 
 type CSSKeyframesStyleValue<V> = {
diff --git a/packages/react-native-reanimated/src/css/stylesheet/keyframes.ts b/packages/react-native-reanimated/src/css/stylesheet/keyframes.ts
@@ -1,10 +1,7 @@
 'use strict';
+import type { PlainStyle } from '../../common';
 import { CSSKeyframesRuleImpl } from '../platform';
-import type {
-  CSSAnimationKeyframes,
-  CSSKeyframesRule,
-  PlainStyle,
-} from '../types';
+import type { CSSAnimationKeyframes, CSSKeyframesRule } from '../types';
 
 export default function keyframes<S extends PlainStyle>(
   // TODO - think of better types
diff --git a/packages/react-native-reanimated/src/css/types/animation.ts b/packages/react-native-reanimated/src/css/types/animation.ts
@@ -1,6 +1,7 @@
 'use strict';
+import type { PlainStyle } from '../../common';
 import type { CSSTimingFunction } from '../easing';
-import type { PlainStyle, TimeUnit } from './common';
+import type { TimeUnit } from './common';
 import type { AddArrayPropertyType, AddArrayPropertyTypes } from './helpers';
 
 export interface CSSKeyframesRule {
diff --git a/packages/react-native-reanimated/src/css/types/common.ts b/packages/react-native-reanimated/src/css/types/common.ts
@@ -1,27 +1,5 @@
 'use strict';
-import type { ComponentType } from 'react';
-import type {
-  ImageStyle,
-  TextStyle,
-  TransformsStyle,
-  ViewStyle,
-} from 'react-native';
-
-type DeprecatedProps =
-  | 'transformMatrix'
-  | 'rotation'
-  | 'scaleX'
-  | 'scaleY'
-  | 'translateX'
-  | 'translateY';
-
-export type PlainStyle = Omit<
-  ViewStyle & TextStyle & ImageStyle,
-  DeprecatedProps
->;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type AnyComponent = ComponentType<any>;
+import type { TransformsStyle } from 'react-native';
 
 export type TimeUnit = `${number}s` | `${number}ms` | number;
 
diff --git a/packages/react-native-reanimated/src/css/types/config.ts b/packages/react-native-reanimated/src/css/types/config.ts
@@ -1,5 +1,5 @@
 'use strict';
-import type { AnyRecord } from './helpers';
+import type { AnyRecord } from '../../common';
 
 export type ConfigPropertyAlias<P extends AnyRecord> = {
   as: keyof P;
diff --git a/packages/react-native-reanimated/src/css/types/helpers.ts b/packages/react-native-reanimated/src/css/types/helpers.ts
@@ -1,7 +1,5 @@
-'use strict';
-
 /* eslint-disable @typescript-eslint/no-explicit-any */
-export type AnyRecord = Record<string, any>;
+'use strict';
 
 type NoUndef<T> = T extends undefined ? never : T;
 
diff --git a/packages/react-native-reanimated/src/css/types/props.ts b/packages/react-native-reanimated/src/css/types/props.ts
@@ -1,9 +1,8 @@
 'use strict';
 import type { StyleProp } from 'react-native';
 
+import type { AnyRecord, PlainStyle } from '../../common';
 import type { CSSAnimationProperties } from './animation';
-import type { PlainStyle } from './common';
-import type { AnyRecord } from './helpers';
 import type { CSSTransitionProperties } from './transition';
 
 /*
diff --git a/packages/react-native-reanimated/src/css/types/transition.ts b/packages/react-native-reanimated/src/css/types/transition.ts
@@ -1,6 +1,7 @@
 'use strict';
+import type { PlainStyle } from '../../common';
 import type { CSSTimingFunction } from '../easing';
-import type { PlainStyle, TimeUnit } from './common';
+import type { TimeUnit } from './common';
 import type { AddArrayPropertyTypes } from './helpers';
 
 export type CSSTransitionProperty<S extends object = PlainStyle> =
diff --git a/packages/react-native-reanimated/src/css/utils/conversions.ts b/packages/react-native-reanimated/src/css/utils/conversions.ts
@@ -1,5 +1,6 @@
 'use strict';
-import type { AnyRecord, ConvertValuesToArrays } from '../types';
+import type { AnyRecord } from '../../common';
+import type { ConvertValuesToArrays } from '../types';
 
 export function convertPropertyToArray<T>(value: T | undefined): T[] {
   return value !== undefined ? (Array.isArray(value) ? value : [value]) : [];
diff --git a/packages/react-native-reanimated/src/css/utils/guards.ts b/packages/react-native-reanimated/src/css/utils/guards.ts
@@ -1,4 +1,5 @@
 'use strict';
+import type { AnyRecord } from '../../common';
 import {
   ANIMATION_PROPS,
   TRANSITION_PROPS,
@@ -8,7 +9,6 @@ import {
 } from '../constants';
 import type { PredefinedTimingFunction, StepsModifier } from '../easing/types';
 import type {
-  AnyRecord,
   CSSAnimationKeyframes,
   CSSAnimationProp,
   CSSKeyframesRule,
diff --git a/packages/react-native-reanimated/src/css/utils/props.ts b/packages/react-native-reanimated/src/css/utils/props.ts
@@ -1,13 +1,12 @@
 'use strict';
+import type { AnyRecord, PlainStyle } from '../../common';
 import { logger } from '../../common';
 import { isSharedValue } from '../../isSharedValue';
 import type {
-  AnyRecord,
   CSSAnimationProperties,
   CSSStyle,
   CSSTransitionProperties,
   ExistingCSSAnimationProperties,
-  PlainStyle,
 } from '../types';
 import {
   isAnimationProp,
diff --git a/packages/react-native-reanimated/src/css/web/animationParser.ts b/packages/react-native-reanimated/src/css/web/animationParser.ts
@@ -1,9 +1,9 @@
 'use strict';
+import type { PlainStyle } from '../../common';
 import { hasSuffix } from '../../common';
 import type {
   CSSAnimationKeyframeBlock,
   CSSAnimationKeyframes,
-  PlainStyle,
 } from '../types';
 import { PROPERTIES_CONFIG } from './config';
 import { createStyleBuilder } from './style';
diff --git a/packages/react-native-reanimated/src/css/web/config.ts b/packages/react-native-reanimated/src/css/web/config.ts
@@ -1,6 +1,6 @@
 'use strict';
+import type { PlainStyle } from '../../common';
 import { processBoxShadowWeb } from '../../common';
-import type { PlainStyle } from '../types';
 import type { StyleBuilderConfig } from './style';
 import {
   boxShadowBuilder,
diff --git a/packages/react-native-reanimated/src/css/web/keyframes/CSSKeyframesRuleImpl.ts b/packages/react-native-reanimated/src/css/web/keyframes/CSSKeyframesRuleImpl.ts
@@ -1,6 +1,7 @@
 'use strict';
+import type { PlainStyle } from '../../../common';
 import { CSSKeyframesRuleBase } from '../../models';
-import type { CSSAnimationKeyframes, PlainStyle } from '../../types';
+import type { CSSAnimationKeyframes } from '../../types';
 import { processKeyframeDefinitions } from '../animationParser';
 
 export default class CSSKeyframesRuleImpl<
diff --git a/packages/react-native-reanimated/src/css/web/normalization/transition.ts b/packages/react-native-reanimated/src/css/web/normalization/transition.ts
@@ -1,9 +1,6 @@
 'use strict';
-import type {
-  AnyRecord,
-  CSSTransitionProp,
-  CSSTransitionProperties,
-} from '../../types';
+import type { AnyRecord } from '../../../common';
+import type { CSSTransitionProp, CSSTransitionProperties } from '../../types';
 import {
   convertPropertyToArray,
   parseSingleTransitionShorthand,
diff --git a/packages/react-native-reanimated/src/css/web/style/builderFactories.ts b/packages/react-native-reanimated/src/css/web/style/builderFactories.ts
@@ -1,7 +1,7 @@
 'use strict';
 
+import type { AnyRecord } from '../../../common';
 import { hasSuffix } from '../../../common';
-import type { AnyRecord } from '../../types';
 import {
   hasProp,
   isConfigPropertyAlias,
diff --git a/packages/react-native-reanimated/src/css/web/style/types.ts b/packages/react-native-reanimated/src/css/web/style/types.ts
@@ -1,6 +1,5 @@
 'use strict';
-import type { Maybe, NonMutable } from '../../../common';
-import type { AnyRecord } from '../../types';
+import type { AnyRecord, Maybe, NonMutable } from '../../../common';
 
 export type ValueProcessor<V> = (
   value: NonMutable<V>
