chore: Relocate style processors to the common dir

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',

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';
 

packages/react-native-reanimated/src/common/constants/index.ts

@@ -0,0 +1,3 @@
+'use strict';
+export * from './font';
+export * from './platform';

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';

packages/react-native-reanimated/src/css/native/style/__tests__/createStyleBuilder.test.ts → 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 '../../types';
 import createStyleBuilder from '../createStyleBuilder';
 // TODO - add more tests
 

packages/react-native-reanimated/src/css/native/style/config.ts → packages/react-native-reanimated/src/common/style/config.ts

@@ -1,13 +1,11 @@
 'use strict';
-import type { PlainStyle } from '../../../common';
+import { IS_ANDROID } from '../constants';
+import type { PlainStyle } from '../types';
+import { processTransformOrigin } from '../web';
 import {
-  IS_ANDROID,
+  processAspectRatio,
   processBoxShadowNative,
   processColor,
-  processTransformOrigin,
-} from '../../../common';
-import {
-  processAspectRatio,
   processFontWeight,
   processGap,
   processInset,

packages/react-native-reanimated/src/css/native/style/createStyleBuilder.ts → packages/react-native-reanimated/src/common/style/createStyleBuilder.ts

@@ -1,7 +1,7 @@
 'use strict';
 
-import type { AnyRecord } from '../../../common';
-import { isConfigPropertyAlias, isDefined, isRecord } from '../../utils';
+import type { AnyRecord } from '../types';
+import { isConfigPropertyAlias, isDefined, isRecord } from '../utils';
 import type {
   StyleBuilder,
   StyleBuilderConfig,

packages/react-native-reanimated/src/common/processors/__tests__/colors.test.ts → packages/react-native-reanimated/src/common/style/processors/__tests__/colors.test.ts

@@ -1,5 +1,5 @@
 'use strict';
-import { ReanimatedError } from '../../errors';
+import { ReanimatedError } from '../../../errors';
 import { ERROR_MESSAGES, processColor, processColorsInProps } from '../colors';
 
 describe(processColorsInProps, () => {

packages/react-native-reanimated/src/css/native/style/processors/__tests__/others.test.ts → packages/react-native-reanimated/src/common/style/processors/__tests__/others.test.ts

@@ -1,5 +1,5 @@
 'use strict';
-import { ReanimatedError } from '../../../../../common';
+import { ReanimatedError } from '../../../errors';
 import { ERROR_MESSAGES, processAspectRatio } from '../others';
 
 describe(processAspectRatio, () => {

packages/react-native-reanimated/src/css/native/style/processors/__tests__/transform.test.ts → packages/react-native-reanimated/src/common/style/processors/__tests__/transform.test.ts

@@ -1,6 +1,6 @@
 'use strict';
-import { ReanimatedError } from '../../../../../common';
-import type { TransformsArray } from '../../../../types';
+import { ReanimatedError } from '../../../errors';
+import type { TransformsArray } from '../../../types';
 import { ERROR_MESSAGES, processTransform } from '../transform';
 
 describe(processTransform, () => {

packages/react-native-reanimated/src/common/processors/__tests__/transformOrigin.test.ts → packages/react-native-reanimated/src/common/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, () => {

packages/react-native-reanimated/src/common/processors/colors.ts → 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 {

packages/react-native-reanimated/src/css/native/style/processors/font.ts → packages/react-native-reanimated/src/common/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 '../../constants';
+import { ReanimatedError } from '../../errors';
+import type { ValueProcessor } from '../../types';
 
 const ERROR_MESSAGES = {
   invalidFontWeight: (weight: string | number) =>

packages/react-native-reanimated/src/css/native/style/processors/index.ts → 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';

packages/react-native-reanimated/src/css/native/style/processors/insets.ts → 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 '../../../../common';
+import type { ValueProcessor } from '../../types';
 
 type InsetProcessor = ValueProcessor<
   DimensionValue,

packages/react-native-reanimated/src/css/native/style/processors/others.ts → packages/react-native-reanimated/src/common/style/processors/others.ts

@@ -1,6 +1,6 @@
 'use strict';
-import type { ValueProcessor } from '../../../../common';
-import { ReanimatedError } from '../../../../common';
+import { ReanimatedError } from '../../errors';
+import type { ValueProcessor } from '../../types';
 
 export const ERROR_MESSAGES = {
   unsupportedAspectRatio: (ratio: string | number) =>

packages/react-native-reanimated/src/common/processors/shadows.ts → packages/react-native-reanimated/src/common/style/processors/shadows.ts

@@ -2,10 +2,10 @@
 '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 { IS_ANDROID } from '../../constants';
+import { ReanimatedError } from '../../errors';
+import type { ValueProcessor } from '../../types';
+import { parseBoxShadowString } from '../../utils';
 import { processColor } from './colors';
 
 const ERROR_MESSAGES = {
@@ -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(', ');
-};