Move renderer color parsing out of headers (#58521)

packages/react-native/Package.swift

@@ -288,21 +288,29 @@ let reactJsErrorHandler = RNTarget(
   dependencies: [.reactNativeDependencies, .jsi, .reactFeatureFlags, .reactDebug, .reactTurboModuleBridging]
 )
 
+/// React-renderercss.podspec
+let reactRendererCss = RNTarget(
+  name: .reactRendererCss,
+  path: "ReactCommon/react/renderer/css",
+  excludedPaths: ["tests"],
+  dependencies: [.reactNativeDependencies, .reactDebug, .reactUtils]
+)
+
 /// React-graphicsApple
 /// This represents the React-graphicsApple BUCK module
 let reactGraphicsApple = RNTarget(
   name: .reactGraphicsApple,
   path: "ReactCommon/react/renderer/graphics/platform/ios",
   linkedFrameworks: ["UIKit", "CoreGraphics"],
-  dependencies: [.reactDebug, .jsi, .reactUtils, .reactNativeDependencies]
+  dependencies: [.reactDebug, .jsi, .reactUtils, .reactNativeDependencies, .reactRendererCss]
 )
 
 /// React-graphics.podspec
 let reactGraphics = RNTarget(
   name: .reactGraphics,
   path: "ReactCommon/react/renderer/graphics",
   excludedPaths: ["platform", "tests"],
-  dependencies: [.reactNativeDependencies, .jsi, .reactJsiExecutor, .reactRendererDebug, .reactUtils, .reactGraphicsApple]
+  dependencies: [.reactNativeDependencies, .jsi, .reactJsiExecutor, .reactRendererDebug, .reactUtils, .reactGraphicsApple, .reactRendererCss]
 )
 
 /// ReactCommon.podspec
@@ -492,7 +500,7 @@ let reactFabric = RNTarget(
     "observers/resize/tests",
     "scheduler/tests",
   ],
-  dependencies: [.reactNativeDependencies, .reactJsiExecutor, .rctTypesafety, .reactTurboModuleCore, .jsi, .logger, .reactDebug, .reactFeatureFlags, .reactUtils, .reactRuntimeScheduler, .reactCxxReact, .reactRendererDebug, .reactGraphics, .yoga, .reactJsInspectorTracing],
+  dependencies: [.reactNativeDependencies, .reactJsiExecutor, .rctTypesafety, .reactTurboModuleCore, .jsi, .logger, .reactDebug, .reactFeatureFlags, .reactUtils, .reactRuntimeScheduler, .reactCxxReact, .reactRendererDebug, .reactGraphics, .reactRendererCss, .yoga, .reactJsInspectorTracing],
   sources: ["animated", "animationbackend", "animations", "attributedstring", "core", "componentregistry", "componentregistry/native", "components/root", "components/view", "components/view/platform/cxx", "components/scrollview", "components/scrollview/platform/cxx", "components/scrollview/platform/ios", "components/legacyviewmanagerinterop", "components/legacyviewmanagerinterop/platform/ios", "dom", "scheduler", "mounting", "observers/events", "observers/intersection", "observers/mutation", "observers/resize", "telemetry", "consistency", "leakchecker", "uimanager", "uimanager/consistency", "viewtransition"]
 )
 
@@ -714,6 +722,7 @@ let targets = [
   reactPerformanceTimeline,
   reactRuntimeScheduler,
   rctTypesafety,
+  reactRendererCss,
   reactGraphics,
   reactGraphicsApple,
   reactImageManager,

packages/react-native/ReactCommon/React-Fabric.podspec

@@ -77,6 +77,7 @@ Pod::Spec.new do |s|
   end
 
   s.subspec "attributedstring" do |ss|
+    ss.dependency           "React-renderercss"
     ss.source_files         = podspec_sources("react/renderer/attributedstring/**/*.{m,mm,cpp,h}", "react/renderer/attributedstring/**/*.{h}")
     ss.exclude_files        = "react/renderer/attributedstring/tests"
     ss.header_dir           = "react/renderer/attributedstring"
@@ -222,6 +223,7 @@ Pod::Spec.new do |s|
     end
 
     ss.subspec "intersection" do |sss|
+      sss.dependency           "React-renderercss"
       sss.source_files         = podspec_sources("react/renderer/observers/intersection/**/*.{m,mm,cpp,h}", "react/renderer/observers/intersection/**/*.h")
       sss.exclude_files        = "react/renderer/observers/intersection/tests"
       sss.header_dir           = "react/renderer/observers/intersection"

packages/react-native/ReactCommon/react/renderer/attributedstring/CMakeLists.txt

@@ -21,6 +21,7 @@ target_link_libraries(react_renderer_attributedstring
         react_debug
         rrc_view
         react_renderer_core
+        react_renderer_css
         react_renderer_debug
         react_renderer_graphics
         react_renderer_mapbuffer

packages/react-native/ReactCommon/react/renderer/graphics/CMakeLists.txt

@@ -32,6 +32,7 @@ target_link_libraries(react_renderer_graphics
         folly_runtime
         react_cxxstableapi
         react_debug
+        react_renderer_css
         react_renderer_debug
         react_utils
 )

packages/react-native/ReactCommon/react/renderer/graphics/React-graphics.podspec

@@ -57,6 +57,7 @@ Pod::Spec.new do |s|
   s.dependency "React-utils"
   s.dependency "React-rendererdebug"
   s.dependency "React-cxxstableapi"
+  s.dependency "React-renderercss"
 
   depend_on_js_engine(s)
   add_rn_third_party_dependencies(s)

packages/react-native/ReactCommon/react/renderer/graphics/fromRawValueShared.cpp

@@ -0,0 +1,78 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include <react/renderer/graphics/fromRawValueShared.h>
+
+#include <react/debug/react_native_expect.h>
+#include <react/featureflags/ReactNativeFeatureFlags.h>
+#include <react/renderer/css/CSSColor.h>
+#include <react/renderer/css/CSSValueParser.h>
+
+namespace facebook::react {
+
+void fromRawValueShared(
+    const ContextContainer& contextContainer,
+    int32_t surfaceId,
+    const RawValue& value,
+    SharedColor& result,
+    parsePlatformColorFn parsePlatformColor) {
+  ColorComponents colorComponents = {
+      .red = 0, .green = 0, .blue = 0, .alpha = 0};
+
+  if (ReactNativeFeatureFlags::enableNativeCSSParsing() &&
+      value.hasType<std::string>()) {
+    auto cssColor = parseCSSProperty<CSSColor>((std::string)value);
+    if (std::holds_alternative<CSSColor>(cssColor)) {
+      auto c = std::get<CSSColor>(cssColor);
+      result = hostPlatformColorFromRGBA(c.r, c.g, c.b, c.a);
+      return;
+    }
+    // Unparseable string - fall through to parsePlatformColor
+    result = parsePlatformColor(contextContainer, surfaceId, value);
+  } else if (value.hasType<int>()) {
+    auto argb = (int64_t)value;
+    auto ratio = 255.f;
+    colorComponents.alpha = ((argb >> 24) & 0xFF) / ratio;
+    colorComponents.red = ((argb >> 16) & 0xFF) / ratio;
+    colorComponents.green = ((argb >> 8) & 0xFF) / ratio;
+    colorComponents.blue = (argb & 0xFF) / ratio;
+
+    result = colorFromComponents(colorComponents);
+  } else if (value.hasType<std::vector<float>>()) {
+    auto items = (std::vector<float>)value;
+    auto length = items.size();
+    react_native_expect(length == 3 || length == 4);
+    colorComponents.red = items.at(0);
+    colorComponents.green = items.at(1);
+    colorComponents.blue = items.at(2);
+    colorComponents.alpha = length == 4 ? items.at(3) : 1.0f;
+
+    result = colorFromComponents(colorComponents);
+  } else {
+    if (value.hasType<std::unordered_map<std::string, RawValue>>()) {
+      const auto& items = (std::unordered_map<std::string, RawValue>)value;
+      if (items.find("space") != items.end()) {
+        colorComponents.red = (float)items.at("r");
+        colorComponents.green = (float)items.at("g");
+        colorComponents.blue = (float)items.at("b");
+        colorComponents.alpha = (float)items.at("a");
+        colorComponents.colorSpace = getDefaultColorSpace();
+        std::string space = (std::string)items.at("space");
+        if (space == "display-p3") {
+          colorComponents.colorSpace = ColorSpace::DisplayP3;
+        } else if (space == "srgb") {
+          colorComponents.colorSpace = ColorSpace::sRGB;
+        }
+        result = colorFromComponents(colorComponents);
+        return;
+      }
+    }
+    result = parsePlatformColor(contextContainer, surfaceId, value);
+  }
+}
+
+} // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/graphics/fromRawValueShared.h

@@ -8,74 +8,19 @@
 #pragma once
 
 #include <react/cxxstableapi/UmbrellaGuard.h>
-#include <react/debug/react_native_expect.h>
-#include <react/featureflags/ReactNativeFeatureFlags.h>
 #include <react/renderer/core/RawValue.h>
-#include <react/renderer/css/CSSColor.h>
-#include <react/renderer/css/CSSValueParser.h>
 #include <react/renderer/graphics/Color.h>
 #include <react/utils/ContextContainer.h>
 
 namespace facebook::react {
+
 using parsePlatformColorFn = SharedColor (*)(const ContextContainer &, int32_t, const RawValue &);
 
-inline void fromRawValueShared(
+void fromRawValueShared(
     const ContextContainer &contextContainer,
     int32_t surfaceId,
     const RawValue &value,
     SharedColor &result,
-    parsePlatformColorFn parsePlatformColor)
-{
-  ColorComponents colorComponents = {0, 0, 0, 0};
-
-  if (ReactNativeFeatureFlags::enableNativeCSSParsing() && value.hasType<std::string>()) {
-    auto cssColor = parseCSSProperty<CSSColor>((std::string)value);
-    if (std::holds_alternative<CSSColor>(cssColor)) {
-      auto c = std::get<CSSColor>(cssColor);
-      result = hostPlatformColorFromRGBA(c.r, c.g, c.b, c.a);
-      return;
-    }
-    // Unparseable string - fall through to parsePlatformColor
-    result = parsePlatformColor(contextContainer, surfaceId, value);
-  } else if (value.hasType<int>()) {
-    auto argb = (int64_t)value;
-    auto ratio = 255.f;
-    colorComponents.alpha = ((argb >> 24) & 0xFF) / ratio;
-    colorComponents.red = ((argb >> 16) & 0xFF) / ratio;
-    colorComponents.green = ((argb >> 8) & 0xFF) / ratio;
-    colorComponents.blue = (argb & 0xFF) / ratio;
-
-    result = colorFromComponents(colorComponents);
-  } else if (value.hasType<std::vector<float>>()) {
-    auto items = (std::vector<float>)value;
-    auto length = items.size();
-    react_native_expect(length == 3 || length == 4);
-    colorComponents.red = items.at(0);
-    colorComponents.green = items.at(1);
-    colorComponents.blue = items.at(2);
-    colorComponents.alpha = length == 4 ? items.at(3) : 1.0f;
+    parsePlatformColorFn parsePlatformColor);
 
-    result = colorFromComponents(colorComponents);
-  } else {
-    if (value.hasType<std::unordered_map<std::string, RawValue>>()) {
-      const auto &items = (std::unordered_map<std::string, RawValue>)value;
-      if (items.find("space") != items.end()) {
-        colorComponents.red = (float)items.at("r");
-        colorComponents.green = (float)items.at("g");
-        colorComponents.blue = (float)items.at("b");
-        colorComponents.alpha = (float)items.at("a");
-        colorComponents.colorSpace = getDefaultColorSpace();
-        std::string space = (std::string)items.at("space");
-        if (space == "display-p3") {
-          colorComponents.colorSpace = ColorSpace::DisplayP3;
-        } else if (space == "srgb") {
-          colorComponents.colorSpace = ColorSpace::sRGB;
-        }
-        result = colorFromComponents(colorComponents);
-        return;
-      }
-    }
-    result = parsePlatformColor(contextContainer, surfaceId, value);
-  }
-}
 } // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/graphics/platform/android/react/renderer/graphics/PlatformColorParser.cpp

@@ -0,0 +1,125 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include <react/renderer/graphics/PlatformColorParser.h>
+
+#include "configurePlatformColorCacheInvalidationHook.h"
+
+#include <fbjni/fbjni.h>
+#include <folly/container/EvictingCacheMap.h>
+#include <react/renderer/css/CSSColor.h>
+#include <react/renderer/css/CSSValueParser.h>
+#include <functional>
+#include <mutex>
+#include <optional>
+#include <unordered_map>
+
+namespace facebook::react {
+
+size_t hashGetColourArguments(
+    int32_t surfaceId,
+    const std::vector<std::string>& resourcePaths) {
+  size_t seed = std::hash<int32_t>{}(surfaceId);
+  for (const auto& path : resourcePaths) {
+    seed ^=
+        std::hash<std::string>{}(path) + 0x9e3779b9 + (seed << 6) + (seed >> 2);
+  }
+  return seed;
+}
+
+SharedColor parsePlatformColor(
+    const ContextContainer& contextContainer,
+    int32_t surfaceId,
+    const RawValue& value) {
+  Color color{};
+  if (value.hasType<std::unordered_map<std::string, RawValue>>()) {
+    // Mixed array + string values, so read as a map of RawValue (a map of
+    // vector<string> would assert on the fallback string).
+    auto map = (std::unordered_map<std::string, RawValue>)value;
+
+    std::vector<std::string> resourcePaths;
+    auto resourcePathsIt = map.find("resource_paths");
+    if (resourcePathsIt != map.end() &&
+        resourcePathsIt->second.hasType<std::vector<std::string>>()) {
+      resourcePaths = (std::vector<std::string>)resourcePathsIt->second;
+    }
+
+    bool resolved = false;
+    if (!resourcePaths.empty()) {
+      // Cache the (costly) JNI results. A cached nullopt is an explicit miss,
+      // distinct from a path that resolves to transparent (ARGB 0).
+      static std::mutex getColorCacheMutex;
+      static folly::EvictingCacheMap<size_t, std::optional<Color>>
+          getColorCache(64);
+
+      // Listen for appearance changes, which should invalidate the cache
+      static std::once_flag setupCacheInvalidation;
+      std::call_once(
+          setupCacheInvalidation,
+          configurePlatformColorCacheInvalidationHook,
+          [&] {
+            std::scoped_lock lock(getColorCacheMutex);
+            getColorCache.clear();
+          });
+
+      auto hash = hashGetColourArguments(surfaceId, resourcePaths);
+      std::optional<Color> resolvedColor;
+      {
+        std::scoped_lock lock(getColorCacheMutex);
+        auto iterator = getColorCache.find(hash);
+        if (iterator != getColorCache.end()) {
+          resolvedColor = iterator->second;
+        } else {
+          const auto& fabricUIManager =
+              contextContainer.at<jni::global_ref<jobject>>("FabricUIManager");
+          // Boxed Integer: null is an explicit miss; a non-null value may be 0
+          // (transparent black).
+          static auto getColorFromJava =
+              fabricUIManager->getClass()
+                  ->getMethod<jni::JInteger::javaobject(
+                      jint, jni::JArrayClass<jni::JString>)>("getColor");
+          auto javaResourcePaths =
+              jni::JArrayClass<jni::JString>::newArray(resourcePaths.size());
+
+          for (int i = 0; i < resourcePaths.size(); i++) {
+            javaResourcePaths->setElement(
+                i, *jni::make_jstring(resourcePaths[i]));
+          }
+          auto boxedColor =
+              getColorFromJava(fabricUIManager, surfaceId, *javaResourcePaths);
+          if (boxedColor) {
+            resolvedColor = static_cast<Color>(boxedColor->value());
+          }
+          getColorCache.set(hash, resolvedColor);
+        }
+      }
+      if (resolvedColor.has_value()) {
+        color = *resolvedColor;
+        resolved = true;
+      }
+    }
+
+    // No path resolved: parse the raw fallback with the shared CSS parser (the
+    // same parser iOS Fabric uses).
+    if (!resolved) {
+      auto fallbackIt = map.find("fallback");
+      if (fallbackIt != map.end() &&
+          fallbackIt->second.hasType<std::string>()) {
+        auto cssColor =
+            parseCSSProperty<CSSColor>((std::string)fallbackIt->second);
+        if (std::holds_alternative<CSSColor>(cssColor)) {
+          const auto& c = std::get<CSSColor>(cssColor);
+          color = hostPlatformColorFromRGBA(c.r, c.g, c.b, c.a);
+        }
+      }
+    }
+  }
+
+  return color;
+}
+
+} // namespace facebook::react