Export ViewConfig processor attributes from ReactNativeStyleAttributes (facebook#55674)

Summary:
Pull Request resolved: facebook#55674

Centralize gated ViewConfig processor attributes into exported constants in `ReactNativeStyleAttributes.js`. This is a pure refactor — no new behavior. When `enableNativeCSSParsing()` is on, the JS processor is bypassed and the raw value is sent directly to native.

Exported attributes: `colorAttribute`, `filterAttribute`, `boxShadowAttribute`, `backgroundImageAttribute`, `backgroundSizeAttribute`, `backgroundPositionAttribute`, `backgroundRepeatAttribute`.

All ViewConfig files now import these constants instead of inlining `{process: require(...)}` or feature flag checks.

Changelog: [Internal]

Differential Revision: D94052734

Author: NickGerleman

packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -24,8 +24,39 @@ import processTransform from '../../StyleSheet/processTransform';
 import processTransformOrigin from '../../StyleSheet/processTransformOrigin';
 import sizesDiffer from '../../Utilities/differ/sizesDiffer';
 
+const nativeCSSParsing = ReactNativeFeatureFlags.enableNativeCSSParsing();
+
 const colorAttributes = {process: processColor};
 
+/**
+ * Gated style attribute types. When native CSS parsing is enabled, the JS
+ * processor is bypassed and the raw value is sent directly to native.
+ * These are exported so that other ViewConfigs can reuse them.
+ */
+export const filterAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processFilter};
+
+export const boxShadowAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processBoxShadow};
+
+export const backgroundImageAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processBackgroundImage};
+
+export const backgroundSizeAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processBackgroundSize};
+
+export const backgroundPositionAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processBackgroundPosition};
+
+export const backgroundRepeatAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processBackgroundRepeat};
+
 const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /**
    * Layout
@@ -125,9 +156,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /**
    * Filter
    */
-  filter: ReactNativeFeatureFlags.enableNativeCSSParsing()
-    ? true
-    : {process: processFilter},
+  filter: filterAttribute,
 
   /**
    * MixBlendMode
@@ -142,29 +171,27 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /*
    * BoxShadow
    */
-  boxShadow: ReactNativeFeatureFlags.enableNativeCSSParsing()
-    ? true
-    : {process: processBoxShadow},
+  boxShadow: boxShadowAttribute,
 
   /**
    * BackgroundImage
    */
-  experimental_backgroundImage: {process: processBackgroundImage},
+  experimental_backgroundImage: backgroundImageAttribute,
 
   /**
    * BackgroundSize
    */
-  experimental_backgroundSize: {process: processBackgroundSize},
+  experimental_backgroundSize: backgroundSizeAttribute,
 
   /**
    * BackgroundPosition
    */
-  experimental_backgroundPosition: {process: processBackgroundPosition},
+  experimental_backgroundPosition: backgroundPositionAttribute,
 
   /**
    * BackgroundRepeat
    */
-  experimental_backgroundRepeat: {process: processBackgroundRepeat},
+  experimental_backgroundRepeat: backgroundRepeatAttribute,
 
   /**
    * View

packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -10,8 +10,15 @@
 
 import type {PartialViewConfigWithoutName} from './PlatformBaseViewConfig';
 
-import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import ReactNativeStyleAttributes from '../Components/View/ReactNativeStyleAttributes';
+import {
+  backgroundImageAttribute,
+  backgroundPositionAttribute,
+  backgroundRepeatAttribute,
+  backgroundSizeAttribute,
+  boxShadowAttribute,
+  filterAttribute,
+} from '../Components/View/ReactNativeStyleAttributes';
 import {DynamicallyInjectedByGestureHandler} from './ViewConfigIgnore';
 
 const bubblingEventTypes = {
@@ -191,24 +198,12 @@ const validAttributesForNonEventProps = {
   backgroundColor: {process: require('../StyleSheet/processColor').default},
   transform: true,
   transformOrigin: true,
-  experimental_backgroundImage: ReactNativeFeatureFlags.enableNativeCSSParsing()
-    ? (true as const)
-    : {process: require('../StyleSheet/processBackgroundImage').default},
-  experimental_backgroundSize: {
-    process: require('../StyleSheet/processBackgroundSize').default,
-  },
-  experimental_backgroundPosition: {
-    process: require('../StyleSheet/processBackgroundPosition').default,
-  },
-  experimental_backgroundRepeat: {
-    process: require('../StyleSheet/processBackgroundRepeat').default,
-  },
-  boxShadow: ReactNativeFeatureFlags.enableNativeCSSParsing()
-    ? (true as const)
-    : {process: require('../StyleSheet/processBoxShadow').default},
-  filter: ReactNativeFeatureFlags.enableNativeCSSParsing()
-    ? (true as const)
-    : {process: require('../StyleSheet/processFilter').default},
+  experimental_backgroundImage: backgroundImageAttribute,
+  experimental_backgroundSize: backgroundSizeAttribute,
+  experimental_backgroundPosition: backgroundPositionAttribute,
+  experimental_backgroundRepeat: backgroundRepeatAttribute,
+  boxShadow: boxShadowAttribute,
+  filter: filterAttribute,
   mixBlendMode: true,
   isolation: true,
   opacity: true,

packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -10,8 +10,11 @@
 
 import type {PartialViewConfigWithoutName} from './PlatformBaseViewConfig';
 
-import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import ReactNativeStyleAttributes from '../Components/View/ReactNativeStyleAttributes';
+import {
+  boxShadowAttribute,
+  filterAttribute,
+} from '../Components/View/ReactNativeStyleAttributes';
 import {
   ConditionallyIgnoredEventHandlers,
   DynamicallyInjectedByGestureHandler,
@@ -228,12 +231,8 @@ const validAttributesForNonEventProps = {
   hitSlop: {diff: require('../Utilities/differ/insetsDiffer').default},
   collapsable: true,
   collapsableChildren: true,
-  filter: ReactNativeFeatureFlags.enableNativeCSSParsing()
-    ? (true as const)
-    : {process: require('../StyleSheet/processFilter').default},
-  boxShadow: ReactNativeFeatureFlags.enableNativeCSSParsing()
-    ? (true as const)
-    : {process: require('../StyleSheet/processBoxShadow').default},
+  filter: filterAttribute,
+  boxShadow: boxShadowAttribute,
   mixBlendMode: true,
   isolation: true,