From 1e5cc693fcf4ed898df7e191d8a330efd348349a Mon Sep 17 00:00:00 2001
From: Nick Gerleman <ngerlem@meta.com>
Date: Mon, 3 Feb 2025 16:04:07 -0800
Subject: [PATCH] Add equality operators to CSS data types (#48989)

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

tsia

Also added a quick helper to CSSColor used later.

Changelog: [Internal]

Reviewed By: joevilches

Differential Revision: D68741768

fbshipit-source-id: e0b4c75c15891e4957c7e05a7a89820c1bea72c3
---
 .../react-native/ReactCommon/react/renderer/css/CSSAngle.h  | 2 ++
 .../react-native/ReactCommon/react/renderer/css/CSSColor.h  | 6 ++++++
 .../ReactCommon/react/renderer/css/CSSDataType.h            | 5 +++--
 .../react-native/ReactCommon/react/renderer/css/CSSLength.h | 2 ++
 .../react-native/ReactCommon/react/renderer/css/CSSNumber.h | 2 ++
 .../ReactCommon/react/renderer/css/CSSPercentage.h          | 2 ++
 .../react-native/ReactCommon/react/renderer/css/CSSRatio.h  | 2 ++
 7 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/react-native/ReactCommon/react/renderer/css/CSSAngle.h b/packages/react-native/ReactCommon/react/renderer/css/CSSAngle.h
index 8f97e351699..7f89682335e 100644
--- a/packages/react-native/ReactCommon/react/renderer/css/CSSAngle.h
+++ b/packages/react-native/ReactCommon/react/renderer/css/CSSAngle.h
@@ -20,6 +20,8 @@ namespace facebook::react {
  */
 struct CSSAngle {
   float degrees{};
+
+  constexpr bool operator==(const CSSAngle& rhs) const = default;
 };
 
 template <>
diff --git a/packages/react-native/ReactCommon/react/renderer/css/CSSColor.h b/packages/react-native/ReactCommon/react/renderer/css/CSSColor.h
index b5d36b241d4..0a2c22234c6 100644
--- a/packages/react-native/ReactCommon/react/renderer/css/CSSColor.h
+++ b/packages/react-native/ReactCommon/react/renderer/css/CSSColor.h
@@ -25,6 +25,12 @@ struct CSSColor {
   uint8_t g{};
   uint8_t b{};
   uint8_t a{};
+
+  constexpr bool operator==(const CSSColor& rhs) const = default;
+
+  static constexpr CSSColor black() {
+    return {0, 0, 0, 255};
+  }
 };
 
 template <>
diff --git a/packages/react-native/ReactCommon/react/renderer/css/CSSDataType.h b/packages/react-native/ReactCommon/react/renderer/css/CSSDataType.h
index 111b208bc5d..3147bb39af8 100644
--- a/packages/react-native/ReactCommon/react/renderer/css/CSSDataType.h
+++ b/packages/react-native/ReactCommon/react/renderer/css/CSSDataType.h
@@ -73,10 +73,11 @@ concept CSSValidDataTypeParser = CSSFunctionBlockSink<T, ReturnT> ||
     CSSSimplePreservedTokenSink<T, ReturnT>;
 
 /**
- * Concrete representation for a CSS data type, or keywords
+ * Concrete representation for a CSS data type
  */
 template <typename T>
 concept CSSDataType =
-    CSSValidDataTypeParser<CSSDataTypeParser<T>, std::optional<T>>;
+    CSSValidDataTypeParser<CSSDataTypeParser<T>, std::optional<T>> &&
+    std::equality_comparable<T>;
 
 } // namespace facebook::react
diff --git a/packages/react-native/ReactCommon/react/renderer/css/CSSLength.h b/packages/react-native/ReactCommon/react/renderer/css/CSSLength.h
index 8b4de0213ba..39849450f15 100644
--- a/packages/react-native/ReactCommon/react/renderer/css/CSSLength.h
+++ b/packages/react-native/ReactCommon/react/renderer/css/CSSLength.h
@@ -21,6 +21,8 @@ namespace facebook::react {
 struct CSSLength {
   float value{};
   CSSLengthUnit unit{CSSLengthUnit::Px};
+
+  constexpr bool operator==(const CSSLength& rhs) const = default;
 };
 
 template <>
diff --git a/packages/react-native/ReactCommon/react/renderer/css/CSSNumber.h b/packages/react-native/ReactCommon/react/renderer/css/CSSNumber.h
index 328ace3d2b0..366c94ece6a 100644
--- a/packages/react-native/ReactCommon/react/renderer/css/CSSNumber.h
+++ b/packages/react-native/ReactCommon/react/renderer/css/CSSNumber.h
@@ -19,6 +19,8 @@ namespace facebook::react {
  */
 struct CSSNumber {
   float value{};
+
+  constexpr bool operator==(const CSSNumber& rhs) const = default;
 };
 
 template <>
diff --git a/packages/react-native/ReactCommon/react/renderer/css/CSSPercentage.h b/packages/react-native/ReactCommon/react/renderer/css/CSSPercentage.h
index 329c92c7154..42ed92aaf87 100644
--- a/packages/react-native/ReactCommon/react/renderer/css/CSSPercentage.h
+++ b/packages/react-native/ReactCommon/react/renderer/css/CSSPercentage.h
@@ -19,6 +19,8 @@ namespace facebook::react {
  */
 struct CSSPercentage {
   float value{};
+
+  constexpr bool operator==(const CSSPercentage& rhs) const = default;
 };
 
 template <>
diff --git a/packages/react-native/ReactCommon/react/renderer/css/CSSRatio.h b/packages/react-native/ReactCommon/react/renderer/css/CSSRatio.h
index a2d14978863..92111bbcc50 100644
--- a/packages/react-native/ReactCommon/react/renderer/css/CSSRatio.h
+++ b/packages/react-native/ReactCommon/react/renderer/css/CSSRatio.h
@@ -24,6 +24,8 @@ struct CSSRatio {
   float numerator{};
   float denominator{};
 
+  constexpr bool operator==(const CSSRatio& rhs) const = default;
+
   constexpr bool isDegenerate() const {
     // If either number in the <ratio> is 0 or infinite, it represents a
     // degenerate ratio (and, generally, won’t do anything).