Move more value processors to the common dir

MatiPl01 · MatiPl01 · commit d94afa288ef9 · 2025-10-21T18:54:58.000+02:00
diff --git a/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/base/appearance/colors/ColorProperties.tsx b/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/base/appearance/colors/ColorProperties.tsx
@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import type {
   ImageProps,
   ImageStyle,
@@ -22,7 +23,6 @@ import {
 } from '@/apps/css/components';
 import { stringifyConfig } from '@/apps/css/utils';
 import { colors, radius, sizes, spacing } from '@/theme';
-import type { JSX } from 'react';
 
 const sharedConfig: CSSAnimationSettings = {
   animationDirection: 'alternate',
diff --git a/packages/react-native-reanimated/src/Colors.ts b/packages/react-native-reanimated/src/Colors.ts
@@ -354,16 +354,6 @@ export const ColorProperties = [
   'stroke',
 ];
 
-/* copied from:
- * https://github.com/facebook/react-native/blob/v0.81.0/packages/react-native/Libraries/StyleSheet/PlatformColorValueTypesIOS.d.ts
- */
-export const DynamicColorIOSProperties = [
-  'light',
-  'dark',
-  'highContrastLight',
-  'highContrastDark',
-] as const;
-
 export function normalizeColor(color: unknown): number | null | undefined {
   'worklet';
 
diff --git a/packages/react-native-reanimated/src/common/index.ts b/packages/react-native-reanimated/src/common/index.ts
@@ -2,6 +2,6 @@
 export * from './constants';
 export * from './errors';
 export * from './logger';
-export * from './processors';
+export * from './style';
 export type * from './types';
 export * from './utils';
diff --git a/packages/react-native-reanimated/src/common/native/style/processors/colors.ts b/packages/react-native-reanimated/src/common/native/style/processors/colors.ts
diff --git a/packages/react-native-reanimated/src/common/processors/index.ts b/packages/react-native-reanimated/src/common/processors/index.ts
diff --git a/packages/react-native-reanimated/src/common/style/__tests__/createStyleBuilder.test.ts b/packages/react-native-reanimated/src/common/style/__tests__/createStyleBuilder.test.ts
@@ -1,5 +1,5 @@
 'use strict';
-import type { PlainStyle } from '../../../../common';
+import type { PlainStyle } from '../..';
 import createStyleBuilder from '../createStyleBuilder';
 // TODO - add more tests
 
diff --git a/packages/react-native-reanimated/src/common/style/config.ts b/packages/react-native-reanimated/src/common/style/config.ts
@@ -1,13 +1,11 @@
 'use strict';
-import type { PlainStyle } from '../../../common';
+import type { PlainStyle } from '..';
+import { IS_ANDROID } from '..';
+import { processTransformOrigin } from '../web';
 import {
-  IS_ANDROID,
+  processAspectRatio,
   processBoxShadowNative,
   processColor,
-  processTransformOrigin,
-} from '../../../common';
-import {
-  processAspectRatio,
   processFontWeight,
   processGap,
   processInset,
diff --git a/packages/react-native-reanimated/src/common/style/createStyleBuilder.ts b/packages/react-native-reanimated/src/common/style/createStyleBuilder.ts
@@ -1,7 +1,7 @@
 'use strict';
 
-import { isConfigPropertyAlias, isDefined, isRecord } from '../../../css/utils';
-import type { AnyRecord } from '../..';
+import { isConfigPropertyAlias, isDefined, isRecord } from '../../css/utils';
+import type { AnyRecord } from '..';
 import type {
   StyleBuilder,
   StyleBuilderConfig,
diff --git a/packages/react-native-reanimated/src/common/style/index.ts b/packages/react-native-reanimated/src/common/style/index.ts
diff --git a/packages/react-native-reanimated/src/common/style/processors/__tests__/colors.test.ts b/packages/react-native-reanimated/src/common/style/processors/__tests__/colors.test.ts
@@ -1,10 +1,6 @@
 'use strict';
-import { ReanimatedError } from '../../../../errors';
-import {
-  ERROR_MESSAGES,
-  processColor,
-  processColorsInProps,
-} from '../../../../processors';
+import { ReanimatedError } from '../../../errors';
+import { ERROR_MESSAGES, processColor, processColorsInProps } from '../colors';
 
 describe(processColor, () => {
   describe('properly converts colors in props', () => {
diff --git a/packages/react-native-reanimated/src/common/style/processors/__tests__/others.test.ts b/packages/react-native-reanimated/src/common/style/processors/__tests__/others.test.ts
@@ -1,5 +1,5 @@
 'use strict';
-import { ReanimatedError } from '../../../..';
+import { ReanimatedError } from '../../..';
 import { ERROR_MESSAGES, processAspectRatio } from '../others';
 
 describe(processAspectRatio, () => {
diff --git a/packages/react-native-reanimated/src/common/style/processors/__tests__/shadows.test.ts b/packages/react-native-reanimated/src/common/style/processors/__tests__/shadows.test.ts
@@ -1,7 +1,7 @@
 'use strict';
 import type { BoxShadowValue } from 'react-native';
 
-import { processColor } from '../../../../processors/colors';
+import { processColor } from '../colors';
 import type { ProcessedBoxShadowValue } from '../shadows';
 import { processBoxShadowNative } from '../shadows';
 
diff --git a/packages/react-native-reanimated/src/common/style/processors/__tests__/transform.test.ts b/packages/react-native-reanimated/src/common/style/processors/__tests__/transform.test.ts
@@ -1,6 +1,6 @@
 'use strict';
-import type { TransformsArray } from '../../../../../css/types';
-import { ReanimatedError } from '../../../..';
+import type { TransformsArray } from '../../../../css/types';
+import { ReanimatedError } from '../../..';
 import { ERROR_MESSAGES, processTransform } from '../transform';
 
 describe(processTransform, () => {
diff --git a/packages/react-native-reanimated/src/common/style/processors/__tests__/transformOrigin.test.ts b/packages/react-native-reanimated/src/common/style/processors/__tests__/transformOrigin.test.ts
@@ -1,9 +1,9 @@
 'use strict';
-import { ReanimatedError } from '../../../../errors';
+import { ReanimatedError } from '../../../errors';
 import type {
   NormalizedTransformOrigin,
   TransformOrigin,
-} from '../../../../types';
+} from '../../../types';
 import { ERROR_MESSAGES, processTransformOrigin } from '../transformOrigin';
 
 describe(processTransformOrigin, () => {
diff --git a/packages/react-native-reanimated/src/common/style/processors/colors.ts b/packages/react-native-reanimated/src/common/style/processors/colors.ts
@@ -5,15 +5,11 @@ import type {
   DynamicColorIOS as RNDynamicColorIOS,
 } from 'react-native';
 
-import {
-  ColorProperties,
-  DynamicColorIOSProperties,
-  processColorInitially,
-} from '../../Colors';
-import type { StyleProps } from '../../commonTypes';
-import { IS_ANDROID, IS_IOS } from '../constants';
-import { ReanimatedError } from '../errors';
-import type { Maybe } from '../types';
+import { ColorProperties, processColorInitially } from '../../../Colors';
+import type { StyleProps } from '../../../commonTypes';
+import { IS_ANDROID, IS_IOS } from '../../constants';
+import { ReanimatedError } from '../../errors';
+import type { Maybe } from '../../types';
 
 type DynamicColorIOSTuple = Parameters<typeof RNDynamicColorIOS>[0];
 
@@ -37,6 +33,16 @@ export function PlatformColor(...names: Array<string>): PlatformColorValue {
   return mapped as PlatformColorValue;
 }
 
+/* copied from:
+ * https://github.com/facebook/react-native/blob/v0.81.0/packages/react-native/Libraries/StyleSheet/PlatformColorValueTypesIOS.d.ts
+ */
+const DynamicColorIOSProperties = [
+  'light',
+  'dark',
+  'highContrastLight',
+  'highContrastDark',
+] as const;
+
 export function DynamicColorIOS(
   tuple: DynamicColorIOSTuple
 ): DynamicColorValue {
diff --git a/packages/react-native-reanimated/src/common/style/processors/font.ts b/packages/react-native-reanimated/src/common/style/processors/font.ts
@@ -1,7 +1,7 @@
 'use strict';
-import { FONT_WEIGHT_MAPPINGS } from '../../../../css/constants';
-import type { ValueProcessor } from '../../..';
-import { ReanimatedError } from '../../..';
+import { FONT_WEIGHT_MAPPINGS } from '../../../css/constants';
+import type { ValueProcessor } from '../..';
+import { ReanimatedError } from '../..';
 
 const ERROR_MESSAGES = {
   invalidFontWeight: (weight: string | number) =>
diff --git a/packages/react-native-reanimated/src/common/style/processors/index.ts b/packages/react-native-reanimated/src/common/style/processors/index.ts
@@ -1,5 +1,12 @@
 'use strict';
+export {
+  DynamicColorIOS,
+  PlatformColor,
+  processColor,
+  processColorsInProps,
+} from './colors';
 export { processFontWeight } from './font';
 export { processInset, processInsetBlock, processInsetInline } from './insets';
 export { processAspectRatio, processGap } from './others';
+export { processBoxShadowNative } from './shadows';
 export { processTransform } from './transform';
diff --git a/packages/react-native-reanimated/src/common/style/processors/insets.ts b/packages/react-native-reanimated/src/common/style/processors/insets.ts
@@ -1,7 +1,7 @@
 'use strict';
 import type { DimensionValue } from 'react-native';
 
-import type { ValueProcessor } from '../../..';
+import type { ValueProcessor } from '../..';
 
 type InsetProcessor = ValueProcessor<
   DimensionValue,
diff --git a/packages/react-native-reanimated/src/common/style/processors/others.ts b/packages/react-native-reanimated/src/common/style/processors/others.ts
@@ -1,6 +1,6 @@
 'use strict';
-import type { ValueProcessor } from '../../..';
-import { ReanimatedError } from '../../..';
+import type { ValueProcessor } from '../..';
+import { ReanimatedError } from '../..';
 
 export const ERROR_MESSAGES = {
   unsupportedAspectRatio: (ratio: string | number) =>
diff --git a/packages/react-native-reanimated/src/common/style/processors/shadows.ts b/packages/react-native-reanimated/src/common/style/processors/shadows.ts
@@ -2,11 +2,11 @@
 'worklet';
 import type { BoxShadowValue } from 'react-native';
 
-import { IS_ANDROID } from '../../../constants';
-import { ReanimatedError } from '../../../errors';
-import { processColor } from '../../../processors/colors';
-import type { ValueProcessor } from '../../../types';
-import { parseBoxShadowString } from '../../../utils';
+import { IS_ANDROID } from '../../constants';
+import { ReanimatedError } from '../../errors';
+import type { ValueProcessor } from '../../types';
+import { parseBoxShadowString } from '../../utils';
+import { processColor } from './colors';
 
 const ERROR_MESSAGES = {
   notArrayObject: (value: object) =>
diff --git a/packages/react-native-reanimated/src/common/style/processors/transform.ts b/packages/react-native-reanimated/src/common/style/processors/transform.ts
@@ -1,13 +1,13 @@
 'use strict';
-import type { TransformsArray } from '../../../../css/types';
+import type { TransformsArray } from '../../../css/types';
 import {
   isAngle,
   isNumber,
   isNumberArray,
   isPercentage,
-} from '../../../../css/utils';
-import type { ValueProcessor } from '../../..';
-import { ReanimatedError } from '../../..';
+} from '../../../css/utils';
+import type { ValueProcessor } from '../..';
+import { ReanimatedError } from '../..';
 
 export const ERROR_MESSAGES = {
   invalidTransform: (transform: string) =>
diff --git a/packages/react-native-reanimated/src/common/style/processors/transformOrigin.ts b/packages/react-native-reanimated/src/common/style/processors/transformOrigin.ts
@@ -1,7 +1,7 @@
 'use strict';
 'worklet';
-import { ReanimatedError } from '../../../errors';
-import type { TransformOrigin, ValueProcessor } from '../../../types';
+import { ReanimatedError } from '../../errors';
+import type { TransformOrigin, ValueProcessor } from '../../types';
 
 type Axis = 'x' | 'y' | 'z';
 type ConvertedValue = `${number}%` | number;
diff --git a/packages/react-native-reanimated/src/common/style/types.ts b/packages/react-native-reanimated/src/common/style/types.ts
@@ -1,6 +1,6 @@
 'use strict';
-import type { ConfigPropertyAlias } from '../../../css/types';
-import type { AnyRecord, ValueProcessor } from '../..';
+import type { ConfigPropertyAlias } from '../../css/types';
+import type { AnyRecord, ValueProcessor } from '..';
 
 export type StyleBuildMiddleware<P extends AnyRecord> = (props: P) => P;
 
diff --git a/packages/react-native-reanimated/src/common/web/index.ts b/packages/react-native-reanimated/src/common/web/index.ts
@@ -1 +1,2 @@
+'use strict';
 export * from './style';
diff --git a/packages/react-native-reanimated/src/common/web/style/builderFactories.ts b/packages/react-native-reanimated/src/common/web/style/builderFactories.ts
@@ -1,14 +1,14 @@
 'use strict';
 
-import type { AnyRecord } from '../..';
-import { hasSuffix } from '../..';
 import {
   hasProp,
   isConfigPropertyAlias,
   isDefined,
   isRecord,
   kebabizeCamelCase,
 } from '../../../css/utils';
+import type { AnyRecord } from '../../types';
+import { hasSuffix } from '../../utils';
 import type {
   AnyBuilderConfig,
   RuleBuilder,
diff --git a/packages/react-native-reanimated/src/common/web/style/config.ts b/packages/react-native-reanimated/src/common/web/style/config.ts
@@ -1,18 +1,20 @@
 'use strict';
-import { processColor } from '../../processors';
 import type { PlainStyle } from '../../types';
 import {
   boxShadowBuilder,
+  processTransform,
+  processTransformOrigin,
+  textShadowBuilder,
+} from './builders';
+import {
+  processColor,
   processFilter,
   processFontVariant,
   processFontWeight,
   processMarginHorizontal,
   processMarginVertical,
   processPaddingHorizontal,
   processPaddingVertical,
-  processTransform,
-  processTransformOrigin,
-  textShadowBuilder,
 } from './processors';
 import { processBoxShadowWeb } from './processors/shadows';
 import type { StyleBuilderConfig } from './types';
diff --git a/packages/react-native-reanimated/src/common/web/style/index.ts b/packages/react-native-reanimated/src/common/web/style/index.ts
@@ -0,0 +1,5 @@
+'use strict';
+export * from './builderFactories';
+export * from './builders';
+export * from './config';
+export * from './processors';
diff --git a/packages/react-native-reanimated/src/common/web/style/processors/index.ts b/packages/react-native-reanimated/src/common/web/style/processors/index.ts
@@ -1,8 +1,7 @@
 'use strict';
-export * from '../builders/shadows';
-export * from '../builders/transforms';
 export * from './colors';
 export * from './filter';
 export * from './font';
 export * from './margins';
 export * from './paddings';
+export * from './shadows';
diff --git a/packages/react-native-reanimated/src/common/web/style/processors/shadows.ts b/packages/react-native-reanimated/src/common/web/style/processors/shadows.ts
@@ -1,3 +1,4 @@
+'use strict';
 import type { BoxShadowValue } from 'react-native';
 
 import type { ValueProcessor } from '../../../types';
diff --git a/packages/react-native-reanimated/src/css/native/__tests__/registry.test.ts b/packages/react-native-reanimated/src/css/native/__tests__/registry.test.ts
@@ -1,5 +1,5 @@
 'use strict';
-import { BASE_PROPERTIES_CONFIG } from '../../../common/native/style';
+import { BASE_PROPERTIES_CONFIG } from '../../../common';
 import {
   ERROR_MESSAGES,
   getStyleBuilder,
diff --git a/packages/react-native-reanimated/src/css/native/index.ts b/packages/react-native-reanimated/src/css/native/index.ts
@@ -1,5 +1,5 @@
 'use strict';
-export * from '../../common/native/style';
+export * from '../../common/style';
 export * from './keyframes';
 export * from './managers';
 export * from './normalization';
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,7 +1,7 @@
 'use strict';
 import type { AnyRecord } from '../../../common';
 import { ReanimatedError } from '../../../common';
-import type { StyleBuilder } from '../../../common/native/style';
+import type { StyleBuilder } from '../../../common/style';
 import type { ShadowNodeWrapper } from '../../../commonTypes';
 import type { ViewInfo } from '../../../createAnimatedComponent/commonTypes';
 import type { CSSStyle } from '../../types';
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,6 +1,6 @@
 'use strict';
-import { type AnyRecord, ReanimatedError } from '../../../../common';
-import type { StyleBuilder } from '../../../../common/native';
+import type { AnyRecord, StyleBuilder } from '../../../../common';
+import { ReanimatedError } from '../../../../common';
 import type { StyleProps } from '../../../../commonTypes';
 import { PERCENTAGE_REGEX } from '../../../constants';
 import type {
diff --git a/packages/react-native-reanimated/src/css/native/registry.ts b/packages/react-native-reanimated/src/css/native/registry.ts
diff --git a/packages/react-native-reanimated/src/css/svg/native/processors/colors.ts b/packages/react-native-reanimated/src/css/svg/native/processors/colors.ts
diff --git a/packages/react-native-reanimated/src/css/web/animationParser.ts b/packages/react-native-reanimated/src/css/web/animationParser.ts
diff --git a/packages/react-native-reanimated/src/index.ts b/packages/react-native-reanimated/src/index.ts
diff --git a/packages/react-native-reanimated/src/updateProps/updateProps.ts b/packages/react-native-reanimated/src/updateProps/updateProps.ts
