react-native-tvos 0.82.1-0 → 0.83.0-0

package/ReactCommon/react/renderer/css/CSSBackgroundImage.h

@@ -0,0 +1,864 @@
+/*
+ * 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.
+ */
+
+#pragma once
+
+#include <optional>
+#include <variant>
+
+#include <react/renderer/css/CSSAngle.h>
+#include <react/renderer/css/CSSColor.h>
+#include <react/renderer/css/CSSCompoundDataType.h>
+#include <react/renderer/css/CSSDataType.h>
+#include <react/renderer/css/CSSLength.h>
+#include <react/renderer/css/CSSLengthPercentage.h>
+#include <react/renderer/css/CSSList.h>
+#include <react/renderer/css/CSSPercentage.h>
+#include <react/renderer/css/CSSValueParser.h>
+#include <react/utils/TemplateStringLiteral.h>
+#include <react/utils/fnv1a.h>
+#include <react/utils/iequals.h>
+
+namespace facebook::react {
+
+enum class CSSLinearGradientDirectionKeyword : uint8_t {
+  ToTopLeft,
+  ToTopRight,
+  ToBottomLeft,
+  ToBottomRight,
+};
+
+struct CSSLinearGradientDirection {
+  // angle or keyword like "to bottom"
+  std::variant<CSSAngle, CSSLinearGradientDirectionKeyword> value;
+
+  bool operator==(const CSSLinearGradientDirection &rhs) const = default;
+};
+
+template <>
+struct CSSDataTypeParser<CSSLinearGradientDirection> {
+  static constexpr auto consume(CSSSyntaxParser &parser) -> std::optional<CSSLinearGradientDirection>
+  {
+    return parseLinearGradientDirection(parser);
+  }
+
+ private:
+  static constexpr std::optional<CSSLinearGradientDirection> parseLinearGradientDirection(CSSSyntaxParser &parser)
+  {
+    auto angle = parseNextCSSValue<CSSAngle>(parser);
+    if (std::holds_alternative<CSSAngle>(angle)) {
+      return CSSLinearGradientDirection{std::get<CSSAngle>(angle)};
+    }
+    auto toResult = parser.consumeComponentValue<bool>([](const CSSPreservedToken &token) -> bool {
+      return token.type() == CSSTokenType::Ident && fnv1aLowercase(token.stringValue()) == fnv1a("to");
+    });
+
+    if (!toResult) {
+      // no direction found, default to 180 degrees (to bottom)
+      return CSSLinearGradientDirection{CSSAngle{180.0f}};
+    }
+
+    parser.consumeWhitespace();
+
+    std::optional<CSSKeyword> primaryDir;
+    auto primaryResult = parser.consumeComponentValue<std::optional<CSSKeyword>>(
+        [](const CSSPreservedToken &token) -> std::optional<CSSKeyword> {
+          if (token.type() == CSSTokenType::Ident) {
+            switch (fnv1aLowercase(token.stringValue())) {
+              case fnv1a("top"):
+                return CSSKeyword::Top;
+              case fnv1a("bottom"):
+                return CSSKeyword::Bottom;
+              case fnv1a("left"):
+                return CSSKeyword::Left;
+              case fnv1a("right"):
+                return CSSKeyword::Right;
+            }
+          }
+          return {};
+        });
+
+    if (!primaryResult) {
+      return {};
+    }
+
+    primaryDir = primaryResult;
+    parser.consumeWhitespace();
+
+    std::optional<CSSKeyword> secondaryDir;
+    auto secondaryResult = parser.consumeComponentValue<std::optional<CSSKeyword>>(
+        [&](const CSSPreservedToken &token) -> std::optional<CSSKeyword> {
+          if (token.type() == CSSTokenType::Ident) {
+            auto hash = fnv1aLowercase(token.stringValue());
+            // validate compatible combinations
+            if (primaryDir == CSSKeyword::Top || primaryDir == CSSKeyword::Bottom) {
+              if (hash == fnv1a("left")) {
+                return CSSKeyword::Left;
+              }
+              if (hash == fnv1a("right")) {
+                return CSSKeyword::Right;
+              }
+            }
+            if (primaryDir == CSSKeyword::Left || primaryDir == CSSKeyword::Right) {
+              if (hash == fnv1a("top")) {
+                return CSSKeyword::Top;
+              }
+              if (hash == fnv1a("bottom")) {
+                return CSSKeyword::Bottom;
+              }
+            }
+          }
+          return {};
+        });
+
+    if (secondaryResult) {
+      secondaryDir = secondaryResult;
+    }
+
+    if (primaryDir == CSSKeyword::Top) {
+      if (secondaryDir == CSSKeyword::Left) {
+        return CSSLinearGradientDirection{CSSLinearGradientDirectionKeyword::ToTopLeft};
+      } else if (secondaryDir == CSSKeyword::Right) {
+        return CSSLinearGradientDirection{CSSLinearGradientDirectionKeyword::ToTopRight};
+      } else {
+        // "to top" = 0 degrees
+        return CSSLinearGradientDirection{CSSAngle{0.0f}};
+      }
+    } else if (primaryDir == CSSKeyword::Bottom) {
+      if (secondaryDir == CSSKeyword::Left) {
+        return CSSLinearGradientDirection{CSSLinearGradientDirectionKeyword::ToBottomLeft};
+      } else if (secondaryDir == CSSKeyword::Right) {
+        return CSSLinearGradientDirection{CSSLinearGradientDirectionKeyword::ToBottomRight};
+      } else {
+        // "to bottom" = 180 degrees
+        return CSSLinearGradientDirection{CSSAngle{180.0f}};
+      }
+    } else if (primaryDir == CSSKeyword::Left) {
+      if (secondaryDir == CSSKeyword::Top) {
+        return CSSLinearGradientDirection{CSSLinearGradientDirectionKeyword::ToTopLeft};
+      } else if (secondaryDir == CSSKeyword::Bottom) {
+        return CSSLinearGradientDirection{CSSLinearGradientDirectionKeyword::ToBottomLeft};
+      } else {
+        // "to left" = 270 degrees
+        return CSSLinearGradientDirection{CSSAngle{270.0f}};
+      }
+    } else if (primaryDir == CSSKeyword::Right) {
+      if (secondaryDir == CSSKeyword::Top) {
+        return CSSLinearGradientDirection{CSSLinearGradientDirectionKeyword::ToTopRight};
+      } else if (secondaryDir == CSSKeyword::Bottom) {
+        return CSSLinearGradientDirection{CSSLinearGradientDirectionKeyword::ToBottomRight};
+      } else {
+        // "to right" = 90 degrees
+        return CSSLinearGradientDirection{CSSAngle{90.0f}};
+      }
+    }
+
+    return {};
+  }
+};
+
+static_assert(CSSDataType<CSSLinearGradientDirection>);
+
+/**
+ * Representation of a color hint (interpolation hint)
+ */
+struct CSSColorHint {
+  std::variant<CSSLength, CSSPercentage> position{}; // Support both lengths and percentages
+
+  bool operator==(const CSSColorHint &rhs) const
+  {
+    return position == rhs.position;
+  }
+};
+
+template <>
+struct CSSDataTypeParser<CSSColorHint> {
+  static auto consume(CSSSyntaxParser &parser) -> std::optional<CSSColorHint>
+  {
+    return parseCSSColorHint(parser);
+  }
+
+ private:
+  static std::optional<CSSColorHint> parseCSSColorHint(CSSSyntaxParser &parser)
+  {
+    auto position = parseNextCSSValue<CSSLengthPercentage>(parser);
+    if (std::holds_alternative<CSSLength>(position)) {
+      return CSSColorHint{std::get<CSSLength>(position)};
+    } else if (std::holds_alternative<CSSPercentage>(position)) {
+      return CSSColorHint{std::get<CSSPercentage>(position)};
+    }
+    return {};
+  }
+};
+
+static_assert(CSSDataType<CSSColorHint>);
+
+struct CSSColorStop {
+  CSSColor color{};
+  std::optional<std::variant<CSSLength, CSSPercentage>> startPosition{};
+  std::optional<std::variant<CSSLength, CSSPercentage>> endPosition{};
+
+  bool operator==(const CSSColorStop &rhs) const
+  {
+    if (color != rhs.color) {
+      return false;
+    }
+
+    if (startPosition.has_value() != rhs.startPosition.has_value()) {
+      return false;
+    }
+    if (startPosition.has_value()) {
+      if (startPosition->index() != rhs.startPosition->index()) {
+        return false;
+      }
+      if (*startPosition != *rhs.startPosition) {
+        return false;
+      }
+    }
+
+    if (endPosition.has_value() != rhs.endPosition.has_value()) {
+      return false;
+    }
+    if (endPosition.has_value()) {
+      if (endPosition->index() != rhs.endPosition->index()) {
+        return false;
+      }
+      if (*endPosition != *rhs.endPosition) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+};
+
+template <>
+struct CSSDataTypeParser<CSSColorStop> {
+  static constexpr auto consume(CSSSyntaxParser &parser) -> std::optional<CSSColorStop>
+  {
+    return parseCSSColorStop(parser);
+  }
+
+ private:
+  static constexpr std::optional<CSSColorStop> parseCSSColorStop(CSSSyntaxParser &parser)
+  {
+    auto color = parseNextCSSValue<CSSColor>(parser);
+    if (!std::holds_alternative<CSSColor>(color)) {
+      return {};
+    }
+
+    CSSColorStop colorStop;
+    colorStop.color = std::get<CSSColor>(color);
+
+    auto startPosition = parseNextCSSValue<CSSLengthPercentage>(parser, CSSDelimiter::Whitespace);
+    if (std::holds_alternative<CSSLength>(startPosition)) {
+      colorStop.startPosition = std::get<CSSLength>(startPosition);
+    } else if (std::holds_alternative<CSSPercentage>(startPosition)) {
+      colorStop.startPosition = std::get<CSSPercentage>(startPosition);
+    }
+
+    if (colorStop.startPosition) {
+      // Try to parse second optional position (supports both lengths and
+      // percentages)
+      auto endPosition = parseNextCSSValue<CSSLengthPercentage>(parser, CSSDelimiter::Whitespace);
+      if (std::holds_alternative<CSSLength>(endPosition)) {
+        colorStop.endPosition = std::get<CSSLength>(endPosition);
+      } else if (std::holds_alternative<CSSPercentage>(endPosition)) {
+        colorStop.endPosition = std::get<CSSPercentage>(endPosition);
+      }
+    }
+    return colorStop;
+  }
+};
+
+static_assert(CSSDataType<CSSColorStop>);
+
+struct CSSLinearGradientFunction {
+  std::optional<CSSLinearGradientDirection> direction{};
+  std::vector<std::variant<CSSColorStop, CSSColorHint>> items{}; // Color stops and color hints
+
+  bool operator==(const CSSLinearGradientFunction &rhs) const = default;
+
+  static std::pair<std::vector<std::variant<CSSColorStop, CSSColorHint>>, int> parseGradientColorStopsAndHints(
+      CSSSyntaxParser &parser)
+  {
+    std::vector<std::variant<CSSColorStop, CSSColorHint>> items;
+    int colorStopCount = 0;
+
+    std::optional<CSSColorStop> prevColorStop = std::nullopt;
+    do {
+      auto colorStop = parseNextCSSValue<CSSColorStop>(parser);
+      if (std::holds_alternative<CSSColorStop>(colorStop)) {
+        auto parsedColorStop = std::get<CSSColorStop>(colorStop);
+        items.emplace_back(parsedColorStop);
+        prevColorStop = parsedColorStop;
+        colorStopCount++;
+      } else {
+        auto colorHint = parseNextCSSValue<CSSColorHint>(parser);
+        if (std::holds_alternative<CSSColorHint>(colorHint)) {
+          // color hint must be between two color stops
+          if (!prevColorStop) {
+            return {};
+          }
+          auto nextColorStop = peekNextCSSValue<CSSColorStop>(parser, CSSDelimiter::Comma);
+          if (!std::holds_alternative<CSSColorStop>(nextColorStop)) {
+            return {};
+          }
+          items.emplace_back(std::get<CSSColorHint>(colorHint));
+        } else {
+          break; // No more valid items
+        }
+      }
+    } while (parser.consumeDelimiter(CSSDelimiter::Comma));
+
+    return {items, colorStopCount};
+  }
+};
+
+enum class CSSRadialGradientShape : uint8_t {
+  Circle,
+  Ellipse,
+};
+
+template <>
+struct CSSDataTypeParser<CSSRadialGradientShape> {
+  static constexpr auto consumePreservedToken(const CSSPreservedToken &token) -> std::optional<CSSRadialGradientShape>
+  {
+    if (token.type() == CSSTokenType::Ident) {
+      auto lowercase = fnv1aLowercase(token.stringValue());
+      if (lowercase == fnv1a("circle")) {
+        return CSSRadialGradientShape::Circle;
+      } else if (lowercase == fnv1a("ellipse")) {
+        return CSSRadialGradientShape::Ellipse;
+      }
+    }
+    return {};
+  }
+};
+
+static_assert(CSSDataType<CSSRadialGradientShape>);
+
+enum class CSSRadialGradientSizeKeyword : uint8_t {
+  ClosestSide,
+  ClosestCorner,
+  FarthestSide,
+  FarthestCorner,
+};
+
+template <>
+struct CSSDataTypeParser<CSSRadialGradientSizeKeyword> {
+  static constexpr auto consumePreservedToken(const CSSPreservedToken &token)
+      -> std::optional<CSSRadialGradientSizeKeyword>
+  {
+    if (token.type() == CSSTokenType::Ident) {
+      auto lowercase = fnv1aLowercase(token.stringValue());
+      if (lowercase == fnv1a("closest-side")) {
+        return CSSRadialGradientSizeKeyword::ClosestSide;
+      } else if (lowercase == fnv1a("closest-corner")) {
+        return CSSRadialGradientSizeKeyword::ClosestCorner;
+      } else if (lowercase == fnv1a("farthest-side")) {
+        return CSSRadialGradientSizeKeyword::FarthestSide;
+      } else if (lowercase == fnv1a("farthest-corner")) {
+        return CSSRadialGradientSizeKeyword::FarthestCorner;
+      }
+    }
+    return {};
+  }
+};
+
+static_assert(CSSDataType<CSSRadialGradientSizeKeyword>);
+
+struct CSSRadialGradientExplicitSize {
+  std::variant<CSSLength, CSSPercentage> sizeX{};
+  std::variant<CSSLength, CSSPercentage> sizeY{};
+
+  bool operator==(const CSSRadialGradientExplicitSize &rhs) const = default;
+};
+
+template <>
+struct CSSDataTypeParser<CSSRadialGradientExplicitSize> {
+  static auto consume(CSSSyntaxParser &syntaxParser) -> std::optional<CSSRadialGradientExplicitSize>
+  {
+    auto sizeX = parseNextCSSValue<CSSLengthPercentage>(syntaxParser);
+    if (std::holds_alternative<std::monostate>(sizeX)) {
+      return {};
+    }
+
+    syntaxParser.consumeWhitespace();
+
+    auto sizeY = parseNextCSSValue<CSSLengthPercentage>(syntaxParser);
+
+    CSSRadialGradientExplicitSize result;
+    if (std::holds_alternative<CSSLength>(sizeX)) {
+      result.sizeX = std::get<CSSLength>(sizeX);
+    } else {
+      result.sizeX = std::get<CSSPercentage>(sizeX);
+    }
+
+    if (std::holds_alternative<CSSLength>(sizeY) || std::holds_alternative<CSSPercentage>(sizeY)) {
+      if (std::holds_alternative<CSSLength>(sizeY)) {
+        result.sizeY = std::get<CSSLength>(sizeY);
+      } else {
+        result.sizeY = std::get<CSSPercentage>(sizeY);
+      }
+    } else {
+      result.sizeY = result.sizeX;
+    }
+
+    return result;
+  }
+};
+
+static_assert(CSSDataType<CSSRadialGradientExplicitSize>);
+
+using CSSRadialGradientSize = std::variant<CSSRadialGradientSizeKeyword, CSSRadialGradientExplicitSize>;
+
+struct CSSRadialGradientPosition {
+  std::optional<std::variant<CSSLength, CSSPercentage>> top{};
+  std::optional<std::variant<CSSLength, CSSPercentage>> bottom{};
+  std::optional<std::variant<CSSLength, CSSPercentage>> left{};
+  std::optional<std::variant<CSSLength, CSSPercentage>> right{};
+
+  bool operator==(const CSSRadialGradientPosition &rhs) const
+  {
+    return top == rhs.top && bottom == rhs.bottom && left == rhs.left && right == rhs.right;
+  }
+};
+
+struct CSSRadialGradientFunction {
+  std::optional<CSSRadialGradientShape> shape{};
+  std::optional<CSSRadialGradientSize> size{};
+  std::optional<CSSRadialGradientPosition> position{};
+  std::vector<std::variant<CSSColorStop, CSSColorHint>> items{}; // Color stops and color hints
+
+  bool operator==(const CSSRadialGradientFunction &rhs) const = default;
+};
+
+template <>
+struct CSSDataTypeParser<CSSRadialGradientFunction> {
+  static auto consumeFunctionBlock(const CSSFunctionBlock &func, CSSSyntaxParser &parser)
+      -> std::optional<CSSRadialGradientFunction>
+  {
+    if (!iequals(func.name, "radial-gradient")) {
+      return {};
+    }
+
+    CSSRadialGradientFunction gradient;
+
+    auto hasExplicitShape = false;
+    auto hasExplicitSingleSize = false;
+    auto shapeResult = parseNextCSSValue<CSSRadialGradientShape>(parser);
+    if (std::holds_alternative<CSSRadialGradientShape>(shapeResult)) {
+      parser.consumeWhitespace();
+    }
+
+    std::optional<CSSRadialGradientSize> sizeResult;
+
+    auto sizeKeywordResult = parseNextCSSValue<CSSRadialGradientSizeKeyword>(parser);
+
+    if (std::holds_alternative<CSSRadialGradientSizeKeyword>(sizeKeywordResult)) {
+      sizeResult = CSSRadialGradientSize{std::get<CSSRadialGradientSizeKeyword>(sizeKeywordResult)};
+      parser.consumeWhitespace();
+    } else {
+      auto explicitSizeResult = parseNextCSSValue<CSSRadialGradientExplicitSize>(parser);
+      if (std::holds_alternative<CSSRadialGradientExplicitSize>(explicitSizeResult)) {
+        auto explicitSize = std::get<CSSRadialGradientExplicitSize>(explicitSizeResult);
+        // negative value validation
+        if (std::holds_alternative<CSSLength>(explicitSize.sizeX)) {
+          const auto &lengthX = std::get<CSSLength>(explicitSize.sizeX);
+          if (lengthX.value < 0) {
+            return {};
+          }
+        } else if (std::holds_alternative<CSSPercentage>(explicitSize.sizeX)) {
+          const auto &percentageX = std::get<CSSPercentage>(explicitSize.sizeX);
+          if (percentageX.value < 0) {
+            return {};
+          }
+        }
+        if (std::holds_alternative<CSSLength>(explicitSize.sizeY)) {
+          const auto &lengthY = std::get<CSSLength>(explicitSize.sizeY);
+          if (lengthY.value < 0) {
+            return {};
+          }
+        } else if (std::holds_alternative<CSSPercentage>(explicitSize.sizeY)) {
+          const auto &percentageY = std::get<CSSPercentage>(explicitSize.sizeY);
+          if (percentageY.value < 0) {
+            return {};
+          }
+        }
+
+        // check if it's a single size (both X and Y are the same), we use it
+        // to set shape to circle
+        if (explicitSize.sizeX == explicitSize.sizeY) {
+          hasExplicitSingleSize = true;
+        }
+
+        sizeResult = CSSRadialGradientSize{explicitSize};
+        parser.consumeWhitespace();
+      }
+    }
+
+    if (std::holds_alternative<CSSRadialGradientShape>(shapeResult)) {
+      gradient.shape = std::get<CSSRadialGradientShape>(shapeResult);
+      hasExplicitShape = true;
+    } else {
+      // default to ellipse
+      gradient.shape = CSSRadialGradientShape::Ellipse;
+    }
+
+    if (sizeResult.has_value()) {
+      gradient.size = *sizeResult;
+    } else {
+      // default to farthest corner
+      gradient.size = CSSRadialGradientSize{CSSRadialGradientSizeKeyword::FarthestCorner};
+    }
+
+    if (!hasExplicitShape && hasExplicitSingleSize) {
+      gradient.shape = CSSRadialGradientShape::Circle;
+    }
+
+    if (hasExplicitSingleSize && hasExplicitShape && gradient.shape.value() == CSSRadialGradientShape::Ellipse) {
+      // if a single size is explicitly set and the shape is an ellipse do not
+      // apply any gradient. Same as web.
+      return {};
+    }
+
+    auto atResult = parser.consumeComponentValue<bool>([](const CSSPreservedToken &token) -> bool {
+      return token.type() == CSSTokenType::Ident && fnv1aLowercase(token.stringValue()) == fnv1a("at");
+    });
+
+    CSSRadialGradientPosition position;
+
+    if (atResult) {
+      parser.consumeWhitespace();
+      std::vector<std::variant<CSSLength, CSSPercentage, CSSKeyword>> positionKeywordValues;
+      for (int i = 0; i < 2; i++) {
+        auto keywordFound = false;
+        auto valueFound = false;
+
+        auto positionKeyword = parser.consumeComponentValue<std::optional<CSSKeyword>>(
+            [](const CSSPreservedToken &token) -> std::optional<CSSKeyword> {
+              if (token.type() == CSSTokenType::Ident) {
+                auto keyword = std::string(token.stringValue());
+                auto hash = fnv1aLowercase(keyword);
+                if (hash == fnv1a("top")) {
+                  return CSSKeyword::Top;
+                } else if (hash == fnv1a("bottom")) {
+                  return CSSKeyword::Bottom;
+                } else if (hash == fnv1a("left")) {
+                  return CSSKeyword::Left;
+                } else if (hash == fnv1a("right")) {
+                  return CSSKeyword::Right;
+                } else if (hash == fnv1a("center")) {
+                  return CSSKeyword::Center;
+                }
+              }
+              return {};
+            });
+
+        if (positionKeyword) {
+          // invalid position declaration of same keyword "at top 10% top 20%"
+          for (const auto &existingValue : positionKeywordValues) {
+            if (std::holds_alternative<CSSKeyword>(existingValue)) {
+              if (std::get<CSSKeyword>(existingValue) == positionKeyword) {
+                return {};
+              }
+            }
+          }
+          positionKeywordValues.emplace_back(*positionKeyword);
+          keywordFound = true;
+        }
+
+        parser.consumeWhitespace();
+
+        auto lengthPercentageValue = parseNextCSSValue<CSSLengthPercentage>(parser);
+
+        std::optional<decltype(positionKeywordValues)::value_type> value;
+        if (std::holds_alternative<CSSLength>(lengthPercentageValue)) {
+          value = std::get<CSSLength>(lengthPercentageValue);
+        } else if (std::holds_alternative<CSSPercentage>(lengthPercentageValue)) {
+          value = std::get<CSSPercentage>(lengthPercentageValue);
+        }
+        if (value.has_value()) {
+          positionKeywordValues.emplace_back(*value);
+          valueFound = true;
+        }
+
+        parser.consumeWhitespace();
+
+        if (!keywordFound && !valueFound) {
+          break;
+        }
+      }
+
+      if (positionKeywordValues.empty()) {
+        return {};
+      }
+
+      // 1. [ left | center | right | top | bottom | <length-percentage> ]
+      if (positionKeywordValues.size() == 1) {
+        auto value = positionKeywordValues[0];
+        if (std::holds_alternative<CSSKeyword>(value)) {
+          auto keyword = std::get<CSSKeyword>(value);
+          if (keyword == CSSKeyword::Left) {
+            position.top = CSSPercentage{50.0f};
+            position.left = CSSPercentage{0.0f};
+          } else if (keyword == CSSKeyword::Right) {
+            position.top = CSSPercentage{50.0f};
+            position.left = CSSPercentage{100.0f};
+          } else if (keyword == CSSKeyword::Top) {
+            position.top = CSSPercentage{0.0f};
+            position.left = CSSPercentage{50.0f};
+          } else if (keyword == CSSKeyword::Bottom) {
+            position.top = CSSPercentage{100.0f};
+            position.left = CSSPercentage{50.0f};
+          } else if (keyword == CSSKeyword::Center) {
+            position.left = CSSPercentage{50.0f};
+            position.top = CSSPercentage{50.0f};
+          } else {
+            return {};
+          }
+        } else if ((std::holds_alternative<CSSLength>(value) || std::holds_alternative<CSSPercentage>(value))) {
+          if (std::holds_alternative<CSSLength>(value)) {
+            position.left = std::get<CSSLength>(value);
+          } else {
+            position.left = std::get<CSSPercentage>(value);
+          }
+          position.top = CSSPercentage{50.0f};
+        } else {
+          return {};
+        }
+      }
+
+      else if (positionKeywordValues.size() == 2) {
+        auto value1 = positionKeywordValues[0];
+        auto value2 = positionKeywordValues[1];
+        // 2. [ left | center | right ] && [ top | center | bottom ]
+        if (std::holds_alternative<CSSKeyword>(value1) && std::holds_alternative<CSSKeyword>(value2)) {
+          auto keyword1 = std::get<CSSKeyword>(value1);
+          auto keyword2 = std::get<CSSKeyword>(value2);
+          auto isHorizontal = [](CSSKeyword kw) {
+            return kw == CSSKeyword::Left || kw == CSSKeyword::Center || kw == CSSKeyword::Right;
+          };
+          auto isVertical = [](CSSKeyword kw) {
+            return kw == CSSKeyword::Top || kw == CSSKeyword::Center || kw == CSSKeyword::Bottom;
+          };
+          if (isHorizontal(keyword1) && isVertical(keyword2)) {
+            // First horizontal, second vertical
+            if (keyword1 == CSSKeyword::Left) {
+              position.left = CSSPercentage{0.0f};
+            } else if (keyword1 == CSSKeyword::Right) {
+              position.right = CSSPercentage{0.0f};
+            } else if (keyword1 == CSSKeyword::Center) {
+              position.left = CSSPercentage{50.0f};
+            }
+
+            if (keyword2 == CSSKeyword::Top) {
+              position.top = CSSPercentage{0.0f};
+            } else if (keyword2 == CSSKeyword::Bottom) {
+              position.bottom = CSSPercentage{0.0f};
+            } else if (keyword2 == CSSKeyword::Center) {
+              position.top = CSSPercentage{50.0f};
+            }
+          } else if (isVertical(keyword1) && isHorizontal(keyword2)) {
+            // First vertical, second horizontal
+            if (keyword1 == CSSKeyword::Top) {
+              position.top = CSSPercentage{0.0f};
+            } else if (keyword1 == CSSKeyword::Bottom) {
+              position.bottom = CSSPercentage{0.0f};
+            } else if (keyword1 == CSSKeyword::Center) {
+              position.top = CSSPercentage{50.0f};
+            }
+
+            if (keyword2 == CSSKeyword::Left) {
+              position.left = CSSPercentage{0.0f};
+            } else if (keyword2 == CSSKeyword::Right) {
+              position.left = CSSPercentage{100.0f};
+            } else if (keyword2 == CSSKeyword::Center) {
+              position.left = CSSPercentage{50.0f};
+            }
+          } else {
+            return {};
+          }
+        }
+        // 3. [ left | center | right | <length-percentage> ] [ top | center |
+        // bottom | <length-percentage> ]
+        else {
+          if (std::holds_alternative<CSSKeyword>(value1)) {
+            auto keyword1 = std::get<CSSKeyword>(value1);
+            if (keyword1 == CSSKeyword::Left) {
+              position.left = CSSPercentage{0.0f};
+            } else if (keyword1 == CSSKeyword::Right) {
+              position.right = CSSPercentage{0.0f};
+            } else if (keyword1 == CSSKeyword::Center) {
+              position.left = CSSPercentage{50.0f};
+            } else {
+              return {};
+            }
+          } else if ((std::holds_alternative<CSSLength>(value1) || std::holds_alternative<CSSPercentage>(value1))) {
+            if (std::holds_alternative<CSSLength>(value1)) {
+              position.left = std::get<CSSLength>(value1);
+            } else {
+              position.left = std::get<CSSPercentage>(value1);
+            }
+          } else {
+            return {};
+          }
+
+          if (std::holds_alternative<CSSKeyword>(value2)) {
+            auto keyword2 = std::get<CSSKeyword>(value2);
+            if (keyword2 == CSSKeyword::Top) {
+              position.top = CSSPercentage{0.0f};
+            } else if (keyword2 == CSSKeyword::Bottom) {
+              position.bottom = CSSPercentage{0.f};
+            } else if (keyword2 == CSSKeyword::Center) {
+              position.top = CSSPercentage{50.0f};
+            } else {
+              return {};
+            }
+          } else if ((std::holds_alternative<CSSLength>(value2) || std::holds_alternative<CSSPercentage>(value2))) {
+            if (std::holds_alternative<CSSLength>(value2)) {
+              position.top = std::get<CSSLength>(value2);
+            } else {
+              position.top = std::get<CSSPercentage>(value2);
+            }
+          } else {
+            return {};
+          }
+        }
+      }
+
+      // 4. [ [ left | right ] <length-percentage> ] && [ [ top | bottom ]
+      // <length-percentage> ]
+      else if (positionKeywordValues.size() == 4) {
+        auto value1 = positionKeywordValues[0];
+        auto value2 = positionKeywordValues[1];
+        auto value3 = positionKeywordValues[2];
+        auto value4 = positionKeywordValues[3];
+
+        if (!std::holds_alternative<CSSKeyword>(value1)) {
+          return {};
+        }
+        if (!std::holds_alternative<CSSKeyword>(value3)) {
+          return {};
+        }
+        if ((!std::holds_alternative<CSSLength>(value2) && !std::holds_alternative<CSSPercentage>(value2))) {
+          return {};
+        }
+        if ((!std::holds_alternative<CSSLength>(value4) && !std::holds_alternative<CSSPercentage>(value4))) {
+          return {};
+        }
+
+        auto parsedValue2 = std::holds_alternative<CSSLength>(value2)
+            ? std::variant<CSSLength, CSSPercentage>{std::get<CSSLength>(value2)}
+            : std::variant<CSSLength, CSSPercentage>{std::get<CSSPercentage>(value2)};
+        auto parsedValue4 = std::holds_alternative<CSSLength>(value4)
+            ? std::variant<CSSLength, CSSPercentage>{std::get<CSSLength>(value4)}
+            : std::variant<CSSLength, CSSPercentage>{std::get<CSSPercentage>(value4)};
+        auto keyword1 = std::get<CSSKeyword>(value1);
+        auto keyword3 = std::get<CSSKeyword>(value3);
+
+        if (keyword1 == CSSKeyword::Left) {
+          position.left = parsedValue2;
+        } else if (keyword1 == CSSKeyword::Right) {
+          position.right = parsedValue2;
+        } else if (keyword1 == CSSKeyword::Top) {
+          position.top = parsedValue2;
+        } else if (keyword1 == CSSKeyword::Bottom) {
+          position.bottom = parsedValue2;
+        } else {
+          return {};
+        }
+
+        if (keyword3 == CSSKeyword::Left) {
+          position.left = parsedValue4;
+        } else if (keyword3 == CSSKeyword::Right) {
+          position.right = parsedValue4;
+        } else if (keyword3 == CSSKeyword::Top) {
+          position.top = parsedValue4;
+        } else if (keyword3 == CSSKeyword::Bottom) {
+          position.bottom = parsedValue4;
+        } else {
+          return {};
+        }
+      } else {
+        return {};
+      }
+
+      gradient.position = position;
+    } else {
+      // Default position
+      position.top = CSSPercentage{50.0f};
+      position.left = CSSPercentage{50.0f};
+      gradient.position = position;
+    }
+
+    parser.consumeDelimiter(CSSDelimiter::Comma);
+    auto [items, colorStopCount] = CSSLinearGradientFunction::parseGradientColorStopsAndHints(parser);
+
+    if (items.empty() || colorStopCount < 2) {
+      return {};
+    }
+
+    gradient.items = std::move(items);
+    return gradient;
+  }
+};
+
+static_assert(CSSDataType<CSSRadialGradientFunction>);
+
+template <>
+struct CSSDataTypeParser<CSSLinearGradientFunction> {
+  static auto consumeFunctionBlock(const CSSFunctionBlock &func, CSSSyntaxParser &parser)
+      -> std::optional<CSSLinearGradientFunction>
+  {
+    if (!iequals(func.name, "linear-gradient")) {
+      return {};
+    }
+
+    CSSLinearGradientFunction gradient;
+
+    auto parsedDirection = parseNextCSSValue<CSSLinearGradientDirection>(parser);
+    if (!std::holds_alternative<CSSLinearGradientDirection>(parsedDirection)) {
+      return {};
+    }
+
+    parser.consumeDelimiter(CSSDelimiter::Comma);
+
+    gradient.direction = std::get<CSSLinearGradientDirection>(parsedDirection);
+
+    auto [items, colorStopCount] = CSSLinearGradientFunction::parseGradientColorStopsAndHints(parser);
+
+    if (items.empty() || colorStopCount < 2) {
+      return {};
+    }
+
+    gradient.items = std::move(items);
+
+    return gradient;
+  }
+};
+
+static_assert(CSSDataType<CSSLinearGradientFunction>);
+
+/**
+ * Representation of <background-image>
+ * https://www.w3.org/TR/css-backgrounds-3/#background-image
+ */
+using CSSBackgroundImage = CSSCompoundDataType<CSSLinearGradientFunction, CSSRadialGradientFunction>;
+
+/**
+ * Variant of possible CSS background image types
+ */
+using CSSBackgroundImageVariant = CSSVariantWithTypes<CSSBackgroundImage>;
+
+/**
+ * Representation of <background-image-list>
+ */
+using CSSBackgroundImageList = CSSCommaSeparatedList<CSSBackgroundImage>;
+
+} // namespace facebook::react