From ddf68eb949b3fb5004a811068474da329a753d95 Mon Sep 17 00:00:00 2001
From: Nick Gerleman <ngerlem@meta.com>
Date: Thu, 16 Jan 2025 11:42:34 -0800
Subject: [PATCH] Handle "transparent" color ident (#48716)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/48716

`transparent` is specced as a special `<named-color>` outside the table the others were derived from. Let's add it, since it is supported today by `normalizeColor`.

https://www.w3.org/TR/css-color-4/#named-colors

Changelog: [Internal]

Reviewed By: rshest

Differential Revision: D68246770

fbshipit-source-id: 3ff7ed68ebb3d6bc59b24a25d35342620670f0c3
---
 .../ReactCommon/react/renderer/css/CSSColorUtils.h       | 3 +++
 .../ReactCommon/react/renderer/css/CSSValue.h            | 4 ++++
 .../react/renderer/css/tests/CSSValueParserTest.cpp      | 9 +++++++++
 3 files changed, 16 insertions(+)

diff --git a/packages/react-native/ReactCommon/react/renderer/css/CSSColorUtils.h b/packages/react-native/ReactCommon/react/renderer/css/CSSColorUtils.h
index 3eb3d1b29de..ca384138779 100644
--- a/packages/react-native/ReactCommon/react/renderer/css/CSSColorUtils.h
+++ b/packages/react-native/ReactCommon/react/renderer/css/CSSColorUtils.h
@@ -12,6 +12,7 @@
 #include <optional>
 
 namespace facebook::react {
+
 // https://www.w3.org/TR/css-color-4/#named-colors
 template <typename CSSValueT>
 constexpr std::optional<CSSValueT> parseCSSNamedColor(std::string_view name) {
@@ -298,6 +299,8 @@ constexpr std::optional<CSSValueT> parseCSSNamedColor(std::string_view name) {
       return CSSValueT::color(216, 191, 216, 255);
     case fnv1a("tomato"):
       return CSSValueT::color(255, 99, 71, 255);
+    case fnv1a("transparent"):
+      return CSSValueT::color(0, 0, 0, 0);
     case fnv1a("turquoise"):
       return CSSValueT::color(64, 224, 208, 255);
     case fnv1a("violet"):
diff --git a/packages/react-native/ReactCommon/react/renderer/css/CSSValue.h b/packages/react-native/ReactCommon/react/renderer/css/CSSValue.h
index 62c890c3df2..1b39c78caf5 100644
--- a/packages/react-native/ReactCommon/react/renderer/css/CSSValue.h
+++ b/packages/react-native/ReactCommon/react/renderer/css/CSSValue.h
@@ -82,6 +82,10 @@ struct CSSAngle {
   float degrees{};
 };
 
+/**
+ * Representation of CSS <color> data type
+ * https://www.w3.org/TR/css-color-5/#typedef-color
+ */
 struct CSSColor {
   uint8_t r{};
   uint8_t g{};
diff --git a/packages/react-native/ReactCommon/react/renderer/css/tests/CSSValueParserTest.cpp b/packages/react-native/ReactCommon/react/renderer/css/tests/CSSValueParserTest.cpp
index 205410af33b..5908316ba71 100644
--- a/packages/react-native/ReactCommon/react/renderer/css/tests/CSSValueParserTest.cpp
+++ b/packages/react-native/ReactCommon/react/renderer/css/tests/CSSValueParserTest.cpp
@@ -415,5 +415,14 @@ TEST(CSSValueParser, named_colors) {
   EXPECT_EQ(namedColorMixedCaseTestValue.getColor().g, 255);
   EXPECT_EQ(namedColorMixedCaseTestValue.getColor().b, 127);
   EXPECT_EQ(namedColorMixedCaseTestValue.getColor().a, 255);
+
+  auto transparentColor =
+      parseCSSValue<CSSWideKeyword, CSSColor>("transparent");
+  EXPECT_EQ(transparentColor.type(), CSSValueType::Color);
+  EXPECT_EQ(transparentColor.getColor().r, 0);
+  EXPECT_EQ(transparentColor.getColor().g, 0);
+  EXPECT_EQ(transparentColor.getColor().b, 0);
+  EXPECT_EQ(transparentColor.getColor().a, 0);
 }
+
 } // namespace facebook::react