Relocate native style builders to the common dir

MatiPl01 · MatiPl01 · commit 447b3c8c7213 · 2025-10-23T10:58:18.000+02:00
diff --git a/packages/react-native-reanimated/src/common/native/index.ts b/packages/react-native-reanimated/src/common/native/index.ts
@@ -0,0 +1 @@
+export * from './style';
diff --git a/packages/react-native-reanimated/src/common/native/style/__tests__/createStyleBuilder.test.ts b/packages/react-native-reanimated/src/common/native/style/__tests__/createStyleBuilder.test.ts
diff --git a/packages/react-native-reanimated/src/common/native/style/config.ts b/packages/react-native-reanimated/src/common/native/style/config.ts
diff --git a/packages/react-native-reanimated/src/common/native/style/createStyleBuilder.ts b/packages/react-native-reanimated/src/common/native/style/createStyleBuilder.ts
@@ -1,7 +1,7 @@
 'use strict';
 
-import type { AnyRecord } from '../../../common';
-import { isConfigPropertyAlias, isDefined, isRecord } from '../../utils';
+import { isConfigPropertyAlias, isDefined, isRecord } from '../../../css/utils';
+import type { AnyRecord } from '../..';
 import type {
   StyleBuilder,
   StyleBuilderConfig,
diff --git a/packages/react-native-reanimated/src/common/native/style/index.ts b/packages/react-native-reanimated/src/common/native/style/index.ts
diff --git a/packages/react-native-reanimated/src/common/native/style/processors/__tests__/colors.test.ts b/packages/react-native-reanimated/src/common/native/style/processors/__tests__/colors.test.ts
@@ -1,6 +1,10 @@
 'use strict';
-import { ReanimatedError } from '../../errors';
-import { ERROR_MESSAGES, processColor, processColorsInProps } from '../colors';
+import { ReanimatedError } from '../../../../errors';
+import {
+  ERROR_MESSAGES,
+  processColor,
+  processColorsInProps,
+} from '../../../../processors';
 
 describe(processColorsInProps, () => {
   describe('properly converts colors in props', () => {
diff --git a/packages/react-native-reanimated/src/common/native/style/processors/__tests__/others.test.ts b/packages/react-native-reanimated/src/common/native/style/processors/__tests__/others.test.ts
@@ -1,5 +1,5 @@
 'use strict';
-import { ReanimatedError } from '../../../../../common';
+import { ReanimatedError } from '../../../..';
 import { ERROR_MESSAGES, processAspectRatio } from '../others';
 
 describe(processAspectRatio, () => {
diff --git a/packages/react-native-reanimated/src/common/native/style/processors/__tests__/shadows.test.ts b/packages/react-native-reanimated/src/common/native/style/processors/__tests__/shadows.test.ts
@@ -1,7 +1,7 @@
 'use strict';
 import type { BoxShadowValue } from 'react-native';
 
-import { processColor } from '../colors';
+import { processColor } from '../../../../processors/colors';
 import type { ProcessedBoxShadowValue } from '../shadows';
 import { processBoxShadowNative } from '../shadows';
 
diff --git a/packages/react-native-reanimated/src/common/native/style/processors/__tests__/transform.test.ts b/packages/react-native-reanimated/src/common/native/style/processors/__tests__/transform.test.ts
@@ -1,6 +1,6 @@
 'use strict';
-import { ReanimatedError } from '../../../../../common';
-import type { TransformsArray } from '../../../../types';
+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/native/style/processors/__tests__/transformOrigin.test.ts b/packages/react-native-reanimated/src/common/native/style/processors/__tests__/transformOrigin.test.ts
@@ -1,6 +1,9 @@
 'use strict';
-import { ReanimatedError } from '../../errors';
-import type { NormalizedTransformOrigin, TransformOrigin } from '../../types';
+import { ReanimatedError } from '../../../../errors';
+import type {
+  NormalizedTransformOrigin,
+  TransformOrigin,
+} from '../../../../types';
 import { ERROR_MESSAGES, processTransformOrigin } from '../transformOrigin';
 
 describe(processTransformOrigin, () => {
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
@@ -0,0 +1,32 @@
+'use strict';
+import type { ColorValue } from 'react-native';
+
+import type { Maybe, ValueProcessor } from '../../..';
+import {
+  processColor as processColorInternal,
+  ReanimatedError,
+} from '../../..';
+
+export const ERROR_MESSAGES = {
+  invalidColor: (color: Readonly<ColorValue | number>) =>
+    `Invalid color value: ${String(color)}`,
+};
+
+export const processColor: ValueProcessor<
+  ColorValue | number,
+  number | string
+> = (value) => {
+  let normalizedColor: Maybe<number | string> = null;
+
+  if (typeof value === 'string' && value === 'transparent') {
+    normalizedColor = 'transparent';
+  } else {
+    normalizedColor = processColorInternal(value);
+  }
+
+  if (!normalizedColor && normalizedColor !== 0) {
+    throw new ReanimatedError(ERROR_MESSAGES.invalidColor(value));
+  }
+
+  return normalizedColor;
+};
diff --git a/packages/react-native-reanimated/src/common/native/style/processors/font.ts b/packages/react-native-reanimated/src/common/native/style/processors/font.ts
@@ -1,7 +1,7 @@
 'use strict';
-import type { ValueProcessor } from '../../../../common';
-import { ReanimatedError } from '../../../../common';
-import { FONT_WEIGHT_MAPPINGS } from '../../../constants';
+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/native/style/processors/index.ts b/packages/react-native-reanimated/src/common/native/style/processors/index.ts
diff --git a/packages/react-native-reanimated/src/common/native/style/processors/insets.ts b/packages/react-native-reanimated/src/common/native/style/processors/insets.ts
@@ -1,7 +1,7 @@
 'use strict';
 import type { DimensionValue } from 'react-native';
 
-import type { ValueProcessor } from '../../../../common';
+import type { ValueProcessor } from '../../..';
 
 type InsetProcessor = ValueProcessor<
   DimensionValue,
diff --git a/packages/react-native-reanimated/src/common/native/style/processors/others.ts b/packages/react-native-reanimated/src/common/native/style/processors/others.ts
@@ -1,6 +1,6 @@
 'use strict';
-import type { ValueProcessor } from '../../../../common';
-import { ReanimatedError } from '../../../../common';
+import type { ValueProcessor } from '../../..';
+import { ReanimatedError } from '../../..';
 
 export const ERROR_MESSAGES = {
   unsupportedAspectRatio: (ratio: string | number) =>
diff --git a/packages/react-native-reanimated/src/common/native/style/processors/shadows.ts b/packages/react-native-reanimated/src/common/native/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 type { ValueProcessor } from '../types';
-import { maybeAddSuffix, parseBoxShadowString } from '../utils';
-import { processColor } from './colors';
+import { IS_ANDROID } from '../../../constants';
+import { ReanimatedError } from '../../../errors';
+import { processColor } from '../../../processors/colors';
+import type { ValueProcessor } from '../../../types';
+import { parseBoxShadowString } from '../../../utils';
 
 const ERROR_MESSAGES = {
   notArrayObject: (value: object) =>
@@ -75,34 +75,3 @@ export const processBoxShadowNative: ValueProcessor<
     };
   });
 };
-
-export const processBoxShadowWeb: ValueProcessor<
-  string | ReadonlyArray<BoxShadowValue>,
-  string
-> = (value) => {
-  const parsedShadow =
-    typeof value === 'string' ? parseBoxShadowString(value) : value;
-
-  return parsedShadow
-    .map(
-      ({
-        offsetX,
-        offsetY,
-        color = '#000',
-        blurRadius = '',
-        spreadDistance = '',
-        inset = '',
-      }) =>
-        [
-          maybeAddSuffix(offsetX, 'px'),
-          maybeAddSuffix(offsetY, 'px'),
-          maybeAddSuffix(blurRadius, 'px'),
-          maybeAddSuffix(spreadDistance, 'px'),
-          color,
-          inset ? 'inset' : '',
-        ]
-          .filter(Boolean)
-          .join(' ')
-    )
-    .join(', ');
-};
diff --git a/packages/react-native-reanimated/src/common/native/style/processors/transform.ts b/packages/react-native-reanimated/src/common/native/style/processors/transform.ts
@@ -1,8 +1,13 @@
 'use strict';
-import type { ValueProcessor } from '../../../../common';
-import { ReanimatedError } from '../../../../common';
-import type { TransformsArray } from '../../../types';
-import { isAngle, isNumber, isNumberArray, isPercentage } from '../../../utils';
+import type { TransformsArray } from '../../../../css/types';
+import {
+  isAngle,
+  isNumber,
+  isNumberArray,
+  isPercentage,
+} 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/native/style/processors/transformOrigin.ts b/packages/react-native-reanimated/src/common/native/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/native/style/types.ts b/packages/react-native-reanimated/src/common/native/style/types.ts
@@ -1,6 +1,6 @@
 'use strict';
-import type { AnyRecord, ValueProcessor } from '../../../common';
-import type { ConfigPropertyAlias } from '../../types';
+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/style/index.ts b/packages/react-native-reanimated/src/common/web/style/index.ts
@@ -0,0 +1 @@
+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
@@ -0,0 +1 @@
+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
@@ -0,0 +1,35 @@
+import type { BoxShadowValue } from 'react-native';
+
+import type { ValueProcessor } from '../../../types';
+import { maybeAddSuffix, parseBoxShadowString } from '../../../utils';
+
+export const processBoxShadowWeb: ValueProcessor<
+  string | ReadonlyArray<BoxShadowValue>,
+  string
+> = (value) => {
+  const parsedShadow =
+    typeof value === 'string' ? parseBoxShadowString(value) : value;
+
+  return parsedShadow
+    .map(
+      ({
+        offsetX,
+        offsetY,
+        color = '#000',
+        blurRadius = '',
+        spreadDistance = '',
+        inset = '',
+      }) =>
+        [
+          maybeAddSuffix(offsetX, 'px'),
+          maybeAddSuffix(offsetY, 'px'),
+          maybeAddSuffix(blurRadius, 'px'),
+          maybeAddSuffix(spreadDistance, 'px'),
+          color,
+          inset ? 'inset' : '',
+        ]
+          .filter(Boolean)
+          .join(' ')
+    )
+    .join(', ');
+};
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,11 +1,11 @@
 'use strict';
+import { BASE_PROPERTIES_CONFIG } from '../../../common/native/style';
 import {
   ERROR_MESSAGES,
   getStyleBuilder,
   hasStyleBuilder,
   registerComponentStyleBuilder,
 } from '../registry';
-import { BASE_PROPERTIES_CONFIG } from '../style';
 
 describe('registry', () => {
   describe('hasStyleBuilder', () => {
diff --git a/packages/react-native-reanimated/src/css/native/index.ts b/packages/react-native-reanimated/src/css/native/index.ts
@@ -1,8 +1,8 @@
 'use strict';
+export * from '../../common/native/style';
 export * from './keyframes';
 export * from './managers';
 export * from './normalization';
 export * from './proxy';
 export * from './registry';
-export * from './style';
 export type * 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,14 +1,14 @@
 'use strict';
 import type { AnyRecord } from '../../../common';
 import { ReanimatedError } from '../../../common';
+import type { StyleBuilder } from '../../../common/native/style';
 import type { ShadowNodeWrapper } from '../../../commonTypes';
 import type { ViewInfo } from '../../../createAnimatedComponent/commonTypes';
 import type { CSSStyle } from '../../types';
 import type { ICSSManager } from '../../types/interfaces';
 import { filterCSSAndStyleProperties } from '../../utils';
 import { setViewStyle } from '../proxy';
 import { getStyleBuilder, hasStyleBuilder } from '../registry';
-import type { StyleBuilder } from '../style';
 import CSSAnimationsManager from './CSSAnimationsManager';
 import CSSTransitionsManager from './CSSTransitionsManager';
 
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 } from '../../../../common';
-import { ReanimatedError } from '../../../../common';
+import { type AnyRecord, ReanimatedError } from '../../../../common';
+import type { StyleBuilder } from '../../../../common/native';
 import type { StyleProps } from '../../../../commonTypes';
 import { PERCENTAGE_REGEX } from '../../../constants';
 import type {
@@ -9,7 +9,6 @@ import type {
   CSSAnimationTimingFunction,
 } from '../../../types';
 import { isDefined, isNumber } from '../../../utils';
-import type { StyleBuilder } from '../../style';
 import type {
   NormalizedCSSAnimationKeyframesConfig,
   NormalizedCSSKeyframesStyle,
diff --git a/packages/react-native-reanimated/src/css/native/registry.ts b/packages/react-native-reanimated/src/css/native/registry.ts
@@ -1,7 +1,13 @@
 'use strict';
 import { ReanimatedError } from '../../common';
-import type { StyleBuilder, StyleBuilderConfig } from './style';
-import { BASE_PROPERTIES_CONFIG, createStyleBuilder } from './style';
+import type {
+  StyleBuilder,
+  StyleBuilderConfig,
+} from '../../common/native/style';
+import {
+  BASE_PROPERTIES_CONFIG,
+  createStyleBuilder,
+} from '../../common/native/style';
 
 export const ERROR_MESSAGES = {
   styleBuilderNotFound: (componentName: string) =>
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 { processBoxShadowWeb } from '../../common/web/style';
 import type { StyleBuilderConfig } from './style';
 import {
   boxShadowBuilder,
diff --git a/packages/react-native-reanimated/src/updateProps/updateProps.ts b/packages/react-native-reanimated/src/updateProps/updateProps.ts
@@ -6,12 +6,12 @@ import { runOnJS, runOnUI } from 'react-native-worklets';
 import {
   IS_JEST,
   processBoxShadowNative,
-  processBoxShadowWeb,
   processColorsInProps,
   processTransformOrigin,
   ReanimatedError,
   SHOULD_BE_USE_WEB,
 } from '../common';
+import { processBoxShadowWeb } from '../common/web/style';
 import type {
   AnimatedStyle,
   ShadowNodeWrapper,
