chore: Some CSS code improvements (#8249)

## Summary

This PR contains some code extracted from the #8195 that can be added
separately in order not to add too much complexity to the already large
PR.

Author: MatiPl01

packages/react-native-reanimated/Common/cpp/reanimated/CSS/common/values/CSSLength.cpp

@@ -65,16 +65,14 @@ folly::dynamic CSSLength::toDynamic() const {
 }
 
 std::string CSSLength::toString() const {
-  if (isRelative) {
-    return std::to_string(value * 100) + "%";
-  }
-  return std::to_string(value);
+  return isRelative ? (std::to_string(value * 100) + "%")
+                    : std::to_string(value);
 }
 
 CSSLength CSSLength::interpolate(
     const double progress,
     const CSSLength &to,
-    const CSSResolvableValueInterpolationContext &context) const {
+    const ResolvableValueInterpolationContext &context) const {
   // If both value types are the same, we can interpolate without reading the
   // relative value from the shadow node
   // (also, when one of the values is 0, and the other is relative)
@@ -97,7 +95,7 @@ CSSLength CSSLength::interpolate(
 }
 
 std::optional<double> CSSLength::resolve(
-    const CSSResolvableValueInterpolationContext &context) const {
+    const ResolvableValueInterpolationContext &context) const {
   if (!isRelative) {
     return value;
   }

packages/react-native-reanimated/Common/cpp/reanimated/CSS/common/values/CSSLength.h

@@ -27,9 +27,9 @@ struct CSSLength : public CSSResolvableValue<CSSLength, double> {
   CSSLength interpolate(
       double progress,
       const CSSLength &to,
-      const CSSResolvableValueInterpolationContext &context) const override;
+      const ResolvableValueInterpolationContext &context) const override;
   std::optional<double> resolve(
-      const CSSResolvableValueInterpolationContext &context) const override;
+      const ResolvableValueInterpolationContext &context) const override;
 
   bool operator==(const CSSLength &other) const;
 

packages/react-native-reanimated/Common/cpp/reanimated/CSS/common/values/CSSValue.h

@@ -15,12 +15,12 @@ enum class RelativeTo {
   Self,
 };
 
-struct CSSValueInterpolationContext {
+struct ValueInterpolationContext {
   const std::shared_ptr<const ShadowNode> &node;
   const double fallbackInterpolateThreshold;
 };
 
-struct CSSResolvableValueInterpolationContext {
+struct ResolvableValueInterpolationContext {
   const std::shared_ptr<const ShadowNode> &node;
   const double fallbackInterpolateThreshold;
   const std::shared_ptr<ViewStylesRepository> &viewStylesRepository;
@@ -57,9 +57,9 @@ struct CSSResolvableValue : public CSSValue {
   virtual TDerived interpolate(
       double progress,
       const TDerived &to,
-      const CSSResolvableValueInterpolationContext &context) const = 0;
+      const ResolvableValueInterpolationContext &context) const = 0;
   virtual std::optional<TResolved> resolve(
-      const CSSResolvableValueInterpolationContext &context) const = 0;
+      const ResolvableValueInterpolationContext &context) const = 0;
   virtual bool canInterpolateTo(const TDerived &to) const {
     return true;
   }

packages/react-native-reanimated/Common/cpp/reanimated/CSS/common/values/CSSValueVariant.cpp

@@ -103,7 +103,7 @@ template <typename... AllowedTypes>
 CSSValueVariant<AllowedTypes...> CSSValueVariant<AllowedTypes...>::interpolate(
     const double progress,
     const CSSValueVariant &to,
-    const CSSValueInterpolationContext &context) const {
+    const ValueInterpolationContext &context) const {
   if (storage_.index() != to.storage_.index()) {
     return fallbackInterpolate(
         progress, to, context.fallbackInterpolateThreshold);
@@ -130,7 +130,7 @@ template <typename... AllowedTypes>
 CSSValueVariant<AllowedTypes...> CSSValueVariant<AllowedTypes...>::interpolate(
     const double progress,
     const CSSValueVariant &to,
-    const CSSResolvableValueInterpolationContext &context) const {
+    const ResolvableValueInterpolationContext &context) const {
   if (storage_.index() != to.storage_.index()) {
     return fallbackInterpolate(
         progress, to, context.fallbackInterpolateThreshold);

packages/react-native-reanimated/Common/cpp/reanimated/CSS/common/values/CSSValueVariant.h

@@ -102,15 +102,15 @@ class CSSValueVariant final : public CSSValue {
   CSSValueVariant interpolate(
       const double progress,
       const CSSValueVariant &to,
-      const CSSValueInterpolationContext &context) const;
+      const ValueInterpolationContext &context) const;
 
   /**
    * Interpolate (resolvable)
    */
   CSSValueVariant interpolate(
       const double progress,
       const CSSValueVariant &to,
-      const CSSResolvableValueInterpolationContext &context) const;
+      const ResolvableValueInterpolationContext &context) const;
 
  private:
   std::variant<AllowedTypes...> storage_;

packages/react-native-reanimated/Common/cpp/reanimated/CSS/interpolation/InterpolatorFactory.cpp

@@ -72,7 +72,7 @@ class ArrayInterpolatorFactory : public PropertyInterpolatorFactory {
 class TransformsInterpolatorFactory : public PropertyInterpolatorFactory {
  public:
   explicit TransformsInterpolatorFactory(
-      const std::shared_ptr<TransformInterpolators> &interpolators)
+      const std::shared_ptr<TransformOperationInterpolators> &interpolators)
       : PropertyInterpolatorFactory(), interpolators_(interpolators) {}
 
   const CSSValue &getDefaultValue() const override {
@@ -105,7 +105,7 @@ class TransformsInterpolatorFactory : public PropertyInterpolatorFactory {
     }
   };
 
-  const std::shared_ptr<TransformInterpolators> interpolators_;
+  const std::shared_ptr<TransformOperationInterpolators> interpolators_;
 };
 
 // Non-template function implementations
@@ -123,12 +123,12 @@ std::shared_ptr<PropertyInterpolatorFactory> transforms(
     const std::unordered_map<
         std::string,
         std::shared_ptr<TransformInterpolator>> &interpolators) {
-  TransformInterpolators result;
+  TransformOperationInterpolators result;
   for (const auto &[property, interpolator] : interpolators) {
     result[getTransformOperationType(property)] = interpolator;
   }
   return std::make_shared<TransformsInterpolatorFactory>(
-      std::make_shared<TransformInterpolators>(result));
+      std::make_shared<TransformOperationInterpolators>(result));
 }
 
 } // namespace reanimated::css

packages/react-native-reanimated/Common/cpp/reanimated/CSS/interpolation/InterpolatorFactory.h

@@ -153,7 +153,7 @@ auto transformOp(
     -> std::enable_if_t<
         std::is_base_of_v<TransformOperation, TOperation> &&
             std::is_constructible_v<TOperation, decltype(defaultValue)> &&
-            ResolvableOperation<TOperation>,
+            ResolvableTransformOp<TOperation>,
         std::shared_ptr<TransformInterpolator>> {
   return std::make_shared<TransformOperationInterpolator<TOperation>>(
       std::make_shared<TOperation>(defaultValue), std::move(config));

packages/react-native-reanimated/Common/cpp/reanimated/CSS/interpolation/transforms/TransformInterpolator.h

@@ -2,42 +2,58 @@
 
 namespace reanimated::css {
 
-PerspectiveOperation
+std::shared_ptr<TransformOperation> TransformInterpolator::resolveOperation(
+    const std::shared_ptr<TransformOperation> &operation,
+    const UpdateContext &context) const {
+  return operation;
+}
+
+folly::dynamic
 TransformOperationInterpolator<PerspectiveOperation>::interpolate(
     double progress,
-    const PerspectiveOperation &from,
-    const PerspectiveOperation &to,
-    const TransformInterpolatorUpdateContext &context) const {
-  if (to.value.value == 0)
-    return PerspectiveOperation(0);
-  if (from.value.value == 0)
-    return PerspectiveOperation(to.value);
-
-  return PerspectiveOperation(from.value.interpolate(progress, to.value));
+    const std::shared_ptr<TransformOperation> &from,
+    const std::shared_ptr<TransformOperation> &to,
+    const TransformInterpolationContext &context) const {
+  const auto &fromValue =
+      std::static_pointer_cast<PerspectiveOperation>(from)->value;
+  const auto &toValue =
+      std::static_pointer_cast<PerspectiveOperation>(to)->value;
+
+  if (fromValue.value == 0)
+    return from->toDynamic();
+  if (toValue.value == 0)
+    return to->toDynamic();
+
+  return PerspectiveOperation(fromValue.interpolate(progress, toValue))
+      .toDynamic();
 }
 
-MatrixOperation TransformOperationInterpolator<MatrixOperation>::interpolate(
+folly::dynamic TransformOperationInterpolator<MatrixOperation>::interpolate(
     double progress,
-    const MatrixOperation &from,
-    const MatrixOperation &to,
-    const TransformInterpolatorUpdateContext &context) const {
-  const auto fromMatrix = matrixFromOperation(from, context);
-  const auto toMatrix = matrixFromOperation(to, context);
+    const std::shared_ptr<TransformOperation> &from,
+    const std::shared_ptr<TransformOperation> &to,
+    const TransformInterpolationContext &context) const {
+  const auto fromMatrix = matrixFromOperation(
+      *std::static_pointer_cast<MatrixOperation>(from), context);
+  const auto toMatrix = matrixFromOperation(
+      *std::static_pointer_cast<MatrixOperation>(to), context);
   const auto decomposedFrom = fromMatrix.decompose();
   const auto decomposedTo = toMatrix.decompose();
 
   if (!decomposedFrom.has_value() || !decomposedTo.has_value()) {
-    return MatrixOperation(progress < 0.5 ? fromMatrix : toMatrix);
+    return MatrixOperation(progress < 0.5 ? fromMatrix : toMatrix).toDynamic();
   }
 
-  return MatrixOperation(TransformMatrix3D::recompose(
-      decomposedFrom->interpolate(progress, decomposedTo.value())));
+  return MatrixOperation(
+             TransformMatrix3D::recompose(
+                 decomposedFrom->interpolate(progress, decomposedTo.value())))
+      .toDynamic();
 }
 
 TransformMatrix3D
 TransformOperationInterpolator<MatrixOperation>::matrixFromOperation(
     const MatrixOperation &matrixOperation,
-    const TransformInterpolatorUpdateContext &context) const {
+    const TransformInterpolationContext &context) const {
   if (std::holds_alternative<TransformOperations>(matrixOperation.value)) {
     const auto &operations =
         std::get<TransformOperations>(matrixOperation.value);