react-native-tvos 0.78.0-0rc4 → 0.79.0-0

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

@@ -0,0 +1,226 @@
+/*
+ * 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 <type_traits>
+#include <variant>
+
+#include <react/renderer/css/CSSDataType.h>
+#include <react/renderer/css/CSSLength.h>
+#include <react/renderer/css/CSSLengthPercentage.h>
+#include <react/renderer/css/CSSValueParser.h>
+
+namespace facebook::react {
+
+/**
+ * One of the positional keywords for the `transform-origin` property.
+ */
+enum class CSSTransformOriginKeyword : std::underlying_type_t<CSSKeyword> {
+  Center = static_cast<std::underlying_type_t<CSSKeyword>>(CSSKeyword::Center),
+  Left = static_cast<std::underlying_type_t<CSSKeyword>>(CSSKeyword::Left),
+  Right = static_cast<std::underlying_type_t<CSSKeyword>>(CSSKeyword::Right),
+  Top = static_cast<std::underlying_type_t<CSSKeyword>>(CSSKeyword::Top),
+  Bottom = static_cast<std::underlying_type_t<CSSKeyword>>(CSSKeyword::Bottom),
+};
+
+static_assert(CSSDataType<CSSTransformOriginKeyword>);
+
+/**
+ * Representation of the value produced by the `transform-origin` property.
+ * https://drafts.csswg.org/css-transforms/#propdef-transform-origin
+ */
+struct CSSTransformOrigin {
+  std::variant<CSSLength, CSSPercentage> x{};
+  std::variant<CSSLength, CSSPercentage> y{};
+  CSSLength z{};
+
+  constexpr bool operator==(const CSSTransformOrigin& rhs) const = default;
+};
+
+template <>
+struct CSSDataTypeParser<CSSTransformOrigin> {
+  static constexpr auto consume(CSSSyntaxParser& parser)
+      -> std::optional<CSSTransformOrigin> {
+    //  [ left | center | right | top | bottom | <length-percentage> ]
+    // |
+    //   [ left | center | right | <length-percentage> ]
+    //   [ top | center | bottom | <length-percentage> ] <length>?
+    // |
+    //   [ [ center | left | right ] && [ center | top | bottom ] ] <length>?
+
+    auto firstValue =
+        parseNextCSSValue<CSSLengthPercentage, CSSTransformOriginKeyword>(
+            parser);
+    if (std::holds_alternative<std::monostate>(firstValue)) {
+      return {};
+    }
+
+    auto secondValue =
+        parseNextCSSValue<CSSLengthPercentage, CSSTransformOriginKeyword>(
+            parser, CSSDelimiter::Whitespace);
+
+    if (std::holds_alternative<std::monostate>(secondValue)) {
+      return singleValue(firstValue);
+    }
+
+    auto thirdValue =
+        parseNextCSSValue<CSSLength>(parser, CSSDelimiter::Whitespace);
+
+    if (std::holds_alternative<CSSLength>(firstValue) ||
+        std::holds_alternative<CSSPercentage>(firstValue) ||
+        std::holds_alternative<CSSLength>(secondValue) ||
+        std::holds_alternative<CSSPercentage>(secondValue)) {
+      return xyLengthPercentageValue(firstValue, secondValue, thirdValue);
+    }
+
+    if (std::holds_alternative<CSSTransformOriginKeyword>(firstValue) &&
+        std::holds_alternative<CSSTransformOriginKeyword>(secondValue)) {
+      return xyKeywordValue(
+          std::get<CSSTransformOriginKeyword>(firstValue),
+          std::get<CSSTransformOriginKeyword>(secondValue),
+          thirdValue);
+    }
+
+    return {};
+  }
+
+ private:
+  static constexpr CSSTransformOrigin singleValue(
+      const std::variant<
+          std::monostate,
+          CSSLength,
+          CSSPercentage,
+          CSSTransformOriginKeyword>& value) {
+    CSSTransformOrigin result{};
+
+    if (std::holds_alternative<CSSLength>(value)) {
+      result.x = std::get<CSSLength>(value);
+      result.y = keywordPercentage(CSSTransformOriginKeyword::Center);
+    } else if (std::holds_alternative<CSSPercentage>(value)) {
+      result.x = std::get<CSSPercentage>(value);
+      result.y = keywordPercentage(CSSTransformOriginKeyword::Center);
+    } else if (std::holds_alternative<CSSTransformOriginKeyword>(value)) {
+      if (isHorizontalKeyword(std::get<CSSTransformOriginKeyword>(value))) {
+        result.x =
+            keywordPercentage(std::get<CSSTransformOriginKeyword>(value));
+        result.y = keywordPercentage(CSSTransformOriginKeyword::Center);
+      } else {
+        result.x = keywordPercentage(CSSTransformOriginKeyword::Center);
+        result.y =
+            keywordPercentage(std::get<CSSTransformOriginKeyword>(value));
+      }
+    }
+
+    return result;
+  }
+
+  static constexpr std::optional<CSSTransformOrigin> xyLengthPercentageValue(
+      const std::variant<
+          std::monostate,
+          CSSLength,
+          CSSPercentage,
+          CSSTransformOriginKeyword>& val1,
+      const std::variant<
+          std::monostate,
+          CSSLength,
+          CSSPercentage,
+          CSSTransformOriginKeyword>& val2,
+      const std::variant<std::monostate, CSSLength>& val3) {
+    CSSTransformOrigin result{};
+
+    if (std::holds_alternative<CSSLength>(val1)) {
+      result.x = std::get<CSSLength>(val1);
+    } else if (std::holds_alternative<CSSPercentage>(val1)) {
+      result.x = std::get<CSSPercentage>(val1);
+    } else if (std::holds_alternative<CSSTransformOriginKeyword>(val1)) {
+      if (!isHorizontalKeyword(std::get<CSSTransformOriginKeyword>(val1))) {
+        return {};
+      }
+
+      result.x = keywordPercentage(std::get<CSSTransformOriginKeyword>(val1));
+    }
+
+    if (std::holds_alternative<CSSLength>(val2)) {
+      result.y = std::get<CSSLength>(val2);
+    } else if (std::holds_alternative<CSSPercentage>(val2)) {
+      result.y = std::get<CSSPercentage>(val2);
+    } else if (std::holds_alternative<CSSTransformOriginKeyword>(val2)) {
+      if (!isVerticalKeyword(std::get<CSSTransformOriginKeyword>(val2))) {
+        return {};
+      }
+
+      result.y = keywordPercentage(std::get<CSSTransformOriginKeyword>(val2));
+    }
+
+    if (std::holds_alternative<CSSLength>(val3)) {
+      result.z = std::get<CSSLength>(val3);
+    }
+
+    return result;
+  }
+
+  static constexpr std::optional<CSSTransformOrigin> xyKeywordValue(
+      CSSTransformOriginKeyword val1,
+      CSSTransformOriginKeyword val2,
+      const std::variant<std::monostate, CSSLength>& val3) {
+    if (isHorizontalKeyword(val1) && isVerticalKeyword(val2)) {
+      return CSSTransformOrigin{
+          .x = keywordPercentage(val1),
+          .y = keywordPercentage(val2),
+          .z = std::holds_alternative<CSSLength>(val3)
+              ? std::get<CSSLength>(val3)
+              : CSSLength{}};
+    }
+
+    if (isVerticalKeyword(val1) && isHorizontalKeyword(val2)) {
+      return CSSTransformOrigin{
+          .x = keywordPercentage(val2),
+          .y = keywordPercentage(val1),
+          .z = std::holds_alternative<CSSLength>(val3)
+              ? std::get<CSSLength>(val3)
+              : CSSLength{}};
+    }
+
+    return {};
+  }
+
+  static constexpr bool isHorizontalKeyword(CSSTransformOriginKeyword keyword) {
+    return keyword == CSSTransformOriginKeyword::Left ||
+        keyword == CSSTransformOriginKeyword::Center ||
+        keyword == CSSTransformOriginKeyword::Right;
+  }
+
+  static constexpr bool isVerticalKeyword(CSSTransformOriginKeyword keyword) {
+    return keyword == CSSTransformOriginKeyword::Top ||
+        keyword == CSSTransformOriginKeyword::Center ||
+        keyword == CSSTransformOriginKeyword::Bottom;
+  }
+
+  static constexpr CSSPercentage keywordPercentage(
+      CSSTransformOriginKeyword keyword) {
+    switch (keyword) {
+      case CSSTransformOriginKeyword::Left:
+        return CSSPercentage{0.0f};
+      case CSSTransformOriginKeyword::Top:
+        return CSSPercentage{0.0f};
+      case CSSTransformOriginKeyword::Center:
+        return CSSPercentage{50.0f};
+      case CSSTransformOriginKeyword::Right:
+        return CSSPercentage{100.0f};
+      case CSSTransformOriginKeyword::Bottom:
+        return CSSPercentage{100.0f};
+    }
+
+    return {};
+  }
+};
+
+static_assert(CSSDataType<CSSTransformOrigin>);
+
+} // namespace facebook::react

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

@@ -9,83 +9,59 @@
 
 #include <optional>
 #include <type_traits>
+#include <variant>
 
-#include <react/renderer/css/CSSAngleUnit.h>
-#include <react/renderer/css/CSSColorUtils.h>
-#include <react/renderer/css/CSSProperties.h>
+#include <react/renderer/css/CSSCompoundDataType.h>
+#include <react/renderer/css/CSSDataType.h>
+#include <react/renderer/css/CSSKeyword.h>
 #include <react/renderer/css/CSSSyntaxParser.h>
-#include <react/renderer/css/CSSValueVariant.h>
 
 namespace facebook::react {
 
 namespace detail {
 
-template <CSSDataType... AllowedTypesT>
 class CSSValueParser {
-  using CSSValue = CSSValueVariant<AllowedTypesT...>;
-
  public:
-  explicit constexpr CSSValueParser(std::string_view css) : parser_{css} {}
+  explicit constexpr CSSValueParser(CSSSyntaxParser& parser)
+      : parser_{parser} {}
 
   /*
    * Attempts to parse the characters starting at the current component value
-   * into one of the given data types.
+   * into one of the given data types. Types are attempted in order, which the
+   * caller must consider (e.g. a number token should be preferred to be a
+   * <number> before <length>).
    */
-  constexpr CSSValue consumeValue(
-      CSSComponentValueDelimiter delimeter = CSSComponentValueDelimiter::None) {
-    return parser_.consumeComponentValue<CSSValue>(
-        delimeter, [&](const CSSPreservedToken& token) {
-          // CSS-global keywords
-          if constexpr (hasType<CSSWideKeyword>()) {
-            if (auto cssWideKeyword = consumeCSSWideKeyword(token)) {
-              return *cssWideKeyword;
-            }
-          }
-          // Property-specific keywords
-          if constexpr (hasType<typename CSSValue::Keyword>()) {
-            if (auto keyword = consumeKeyword(token)) {
-              return *keyword;
-            }
-          }
-          // <ratio>
-          if constexpr (hasType<CSSRatio>()) {
-            if (auto ratio = consumeRatio(token)) {
-              return *ratio;
-            }
-          }
-          // <number>
-          if constexpr (hasType<CSSNumber>()) {
-            if (auto number = consumeNumber(token)) {
-              return *number;
-            }
-          }
-          // <length>
-          if constexpr (hasType<CSSLength>()) {
-            if (auto length = consumeLength(token)) {
-              return *length;
-            }
-          }
-          // <angle>
-          if constexpr (hasType<CSSAngle>()) {
-            if (auto angle = consumeAngle(token)) {
-              return *angle;
-            }
-          }
-          // <percentage>
-          if constexpr (hasType<CSSPercentage>()) {
-            if (auto percentage = consumePercentage(token)) {
-              return *percentage;
-            }
-          }
-          // <color>
-          if constexpr (hasType<CSSColor>()) {
-            if (auto colorValue = consumeColorToken(token)) {
-              return *colorValue;
-            }
-          }
-          return CSSValue{};
+  template <CSSDataType... AllowedTypesT>
+  constexpr std::variant<std::monostate, AllowedTypesT...> consumeValue(
+      CSSDelimiter delimeter,
+      CSSCompoundDataType<AllowedTypesT...>) {
+    using ReturnT = std::variant<std::monostate, AllowedTypesT...>;
+
+    auto consumedValue =
+        tryConsumeParser<ReturnT, CSSDataTypeParser<AllowedTypesT>...>(
+            delimeter);
+
+    if (!std::holds_alternative<std::monostate>(consumedValue)) {
+      return consumedValue;
+    }
+
+    return parser_.consumeComponentValue<ReturnT>(
+        delimeter,
+        [&](const CSSPreservedToken& token) {
+          return tryConsumePreservedToken<
+              ReturnT,
+              CSSDataTypeParser<AllowedTypesT>...>(token);
+        },
+        [&](const CSSSimpleBlock& block, CSSSyntaxParser& blockParser) {
+          return tryConsumeSimpleBlock<
+              ReturnT,
+              CSSDataTypeParser<AllowedTypesT>...>(block, blockParser);
+        },
+        [&](const CSSFunctionBlock& func, CSSSyntaxParser& blockParser) {
+          return tryConsumeFunctionBlock<
+              ReturnT,
+              CSSDataTypeParser<AllowedTypesT>...>(func, blockParser);
         });
-    // TODO: support function component values and simple blocks
   }
 
   constexpr bool isFinished() const {
@@ -97,221 +73,162 @@ class CSSValueParser {
   }
 
  private:
-  template <CSSDataType T>
-  constexpr static bool hasType() {
-    return traits::containsType<T, AllowedTypesT...>();
-  }
-
-  template <typename T>
-  constexpr static bool hasType() {
-    return false;
-  }
-
-  constexpr std::optional<CSSValue> consumeKeyword(
-      const CSSPreservedToken& token) {
-    if (token.type() == CSSTokenType::Ident) {
-      if (auto keyword = parseCSSKeyword<typename CSSValue::Keyword>(
-              token.stringValue())) {
-        return CSSValue::keyword(*keyword);
-      }
-    }
+  template <typename ReturnT>
+  constexpr ReturnT tryConsumePreservedToken(
+      const CSSPreservedToken& /*token*/) {
     return {};
   }
 
-  constexpr std::optional<CSSValue> consumeCSSWideKeyword(
-      const CSSPreservedToken& token) {
-    if (token.type() == CSSTokenType::Ident) {
-      if (auto keyword = parseCSSKeyword<CSSWideKeyword>(token.stringValue())) {
-        return CSSValue::cssWideKeyword(*keyword);
+  template <
+      typename ReturnT,
+      CSSValidDataTypeParser ParserT,
+      CSSValidDataTypeParser... RestParserT>
+  constexpr ReturnT tryConsumePreservedToken(const CSSPreservedToken& token) {
+    if constexpr (CSSPreservedTokenSink<ParserT>) {
+      if (auto ret = ParserT::consumePreservedToken(token)) {
+        return *ret;
       }
     }
-    return {};
-  }
 
-  constexpr std::optional<CSSValue> consumeAngle(
-      const CSSPreservedToken& token) {
-    if (token.type() == CSSTokenType::Dimension) {
-      if (auto unit = parseCSSAngleUnit(token.unit())) {
-        return CSSValue::angle(canonicalize(token.numericValue(), *unit));
-      }
-    }
-    return {};
+    return tryConsumePreservedToken<ReturnT, RestParserT...>(token);
   }
 
-  constexpr std::optional<CSSValue> consumePercentage(
-      const CSSPreservedToken& token) {
-    if (token.type() == CSSTokenType::Percentage) {
-      return CSSValue::percentage(token.numericValue());
-    }
-
+  template <typename ReturnT>
+  constexpr ReturnT tryConsumeSimpleBlock(
+      const CSSSimpleBlock& /*token*/,
+      CSSSyntaxParser& /*blockParser*/) {
     return {};
   }
 
-  constexpr std::optional<CSSValue> consumeNumber(
-      const CSSPreservedToken& token) {
-    if (token.type() == CSSTokenType::Number) {
-      return CSSValue::number(token.numericValue());
+  template <
+      typename ReturnT,
+      CSSValidDataTypeParser ParserT,
+      CSSValidDataTypeParser... RestParserT>
+  constexpr ReturnT tryConsumeSimpleBlock(
+      const CSSSimpleBlock& block,
+      CSSSyntaxParser& blockParser) {
+    if constexpr (CSSSimpleBlockSink<ParserT>) {
+      auto currentParser = blockParser;
+      if (auto ret = ParserT::consumeSimpleBlock(block, blockParser)) {
+        return *ret;
+      }
+      blockParser = currentParser;
     }
 
-    return {};
+    return tryConsumeSimpleBlock<ReturnT, RestParserT...>(block, blockParser);
   }
 
-  constexpr std::optional<CSSValue> consumeLength(
-      const CSSPreservedToken& token) {
-    switch (token.type()) {
-      case CSSTokenType::Dimension:
-        if (auto unit = parseCSSLengthUnit(token.unit())) {
-          return CSSValue::length(token.numericValue(), *unit);
-        }
-        break;
-      case CSSTokenType::Number:
-        // For zero lengths the unit identifier is optional (i.e. can be
-        // syntactically represented as the <number> 0). However, if a 0
-        // could be parsed as either a <number> or a <length> in a
-        // property (such as line-height), it must parse as a <number>.
-        // https://www.w3.org/TR/css-values-4/#lengths
-        if (token.numericValue() == 0) {
-          return CSSValue::length(token.numericValue(), CSSLengthUnit::Px);
-        }
-        break;
-      default:
-        break;
-    }
-
+  template <typename ReturnT>
+  constexpr ReturnT tryConsumeFunctionBlock(
+      const CSSFunctionBlock& /*func*/,
+      CSSSyntaxParser& /*blockParser*/) {
     return {};
   }
 
-  constexpr std::optional<CSSValue> consumeRatio(
-      const CSSPreservedToken& token) {
-    // <ratio> = <number [0,∞]> [ / <number [0,∞]> ]?
-    // https://www.w3.org/TR/css-values-4/#ratio
-    if (isValidRatioPart(token.numericValue())) {
-      float numerator = token.numericValue();
-
-      CSSSyntaxParser lookaheadParser{parser_};
-
-      auto hasSolidus = lookaheadParser.consumeComponentValue<bool>(
-          CSSComponentValueDelimiter::Whitespace,
-          [&](const CSSPreservedToken& token) {
-            return token.type() == CSSTokenType::Delim &&
-                token.stringValue() == "/";
-          });
-
-      if (!hasSolidus) {
-        return CSSValue::ratio(numerator, 1.0f);
-      }
-
-      // TODO: support math expression substituion for <number>
-      auto denominator =
-          lookaheadParser.consumeComponentValue<std::optional<float>>(
-              CSSComponentValueDelimiter::Whitespace,
-              [&](const CSSPreservedToken& token) {
-                if (token.type() == CSSTokenType::Number &&
-                    isValidRatioPart(token.numericValue())) {
-                  return std::optional(token.numericValue());
-                }
-                return std::optional<float>{};
-              });
-
-      if (denominator.has_value()) {
-        parser_ = lookaheadParser;
-        return CSSValue::ratio(numerator, *denominator);
+  template <
+      typename ReturnT,
+      CSSValidDataTypeParser ParserT,
+      CSSValidDataTypeParser... RestParserT>
+  constexpr ReturnT tryConsumeFunctionBlock(
+      const CSSFunctionBlock& func,
+      CSSSyntaxParser& blockParser) {
+    if constexpr (CSSFunctionBlockSink<ParserT>) {
+      auto currentParser = blockParser;
+      if (auto ret = ParserT::consumeFunctionBlock(func, blockParser)) {
+        return *ret;
       }
+      blockParser = currentParser;
     }
 
-    return {};
+    return tryConsumeFunctionBlock<ReturnT, RestParserT...>(func, blockParser);
   }
 
-  constexpr bool isValidRatioPart(float value) {
-    // If either number in the <ratio> is 0 or infinite, it represents a
-    // degenerate ratio (and, generally, won’t do anything).
-    // https://www.w3.org/TR/css-values-4/#ratios
-    return value > 0.0f && value != +std::numeric_limits<float>::infinity() &&
-        value != -std::numeric_limits<float>::infinity();
+  template <typename ReturnT>
+  constexpr ReturnT tryConsumeParser(CSSDelimiter /*delimeter*/) {
+    return {};
   }
 
-  constexpr std::optional<CSSValue> consumeColorToken(
-      const CSSPreservedToken& token) {
-    if (token.type() == CSSTokenType::Ident) {
-      return parseCSSNamedColor<CSSValue>(token.stringValue());
-    } else if (token.type() != CSSTokenType::Hash) {
-      return {};
-    }
-
-    // https://www.w3.org/TR/css-color-4/#hex-color
-    std::string_view hexColorValue = token.stringValue();
-    if (isValidHexColor(hexColorValue)) {
-      if (hexColorValue.length() == 3) {
-        return CSSValue::color(
-            hexToNumeric(hexColorValue.substr(0, 1), HexColorType::Short),
-            hexToNumeric(hexColorValue.substr(1, 1), HexColorType::Short),
-            hexToNumeric(hexColorValue.substr(2, 1), HexColorType::Short),
-            255u);
-      } else if (hexColorValue.length() == 4) {
-        return CSSValue::color(
-            hexToNumeric(hexColorValue.substr(0, 1), HexColorType::Short),
-            hexToNumeric(hexColorValue.substr(1, 1), HexColorType::Short),
-            hexToNumeric(hexColorValue.substr(2, 1), HexColorType::Short),
-            hexToNumeric(hexColorValue.substr(3, 1), HexColorType::Short));
-      } else if (hexColorValue.length() == 6) {
-        return CSSValue::color(
-            hexToNumeric(hexColorValue.substr(0, 2), HexColorType::Long),
-            hexToNumeric(hexColorValue.substr(2, 2), HexColorType::Long),
-            hexToNumeric(hexColorValue.substr(4, 2), HexColorType::Long),
-            255u);
-      } else if (hexColorValue.length() == 8) {
-        return CSSValue::color(
-            hexToNumeric(hexColorValue.substr(0, 2), HexColorType::Long),
-            hexToNumeric(hexColorValue.substr(2, 2), HexColorType::Long),
-            hexToNumeric(hexColorValue.substr(4, 2), HexColorType::Long),
-            hexToNumeric(hexColorValue.substr(6, 2), HexColorType::Long));
+  template <
+      typename ReturnT,
+      CSSValidDataTypeParser ParserT,
+      CSSValidDataTypeParser... RestParserT>
+  constexpr ReturnT tryConsumeParser(CSSDelimiter delimeter) {
+    if constexpr (CSSParserSink<ParserT>) {
+      auto originalParser = parser_;
+      if (parser_.consumeDelimiter(delimeter)) {
+        if (auto ret = ParserT::consume(parser_)) {
+          return *ret;
+        }
       }
+      parser_ = originalParser;
     }
-    return {};
+
+    return tryConsumeParser<ReturnT, RestParserT...>(delimeter);
   }
 
-  CSSSyntaxParser parser_;
+  CSSSyntaxParser& parser_;
 };
 
-template <CSSDataType... AllowedTypesT>
-constexpr void parseCSSValue(
-    std::string_view css,
-    CSSValueVariant<AllowedTypesT...>& value) {
-  detail::CSSValueParser<AllowedTypesT...> parser(css);
+} // namespace detail
+
+/**
+ * Parse a single CSS property value. Returns a variant holding std::monostate
+ * on syntax error.
+ */
+template <CSSMaybeCompoundDataType... AllowedTypesT>
+constexpr auto parseCSSProperty(std::string_view css)
+    -> CSSVariantWithTypes<
+        CSSMergedDataTypes<CSSWideKeyword, AllowedTypesT...>,
+        std::monostate> {
+  CSSSyntaxParser syntaxParser(css);
+  detail::CSSValueParser parser(syntaxParser);
 
   parser.consumeWhitespace();
-  auto componentValue = parser.consumeValue();
+  auto value = parser.consumeValue(
+      CSSDelimiter::None,
+      CSSMergedDataTypes<CSSWideKeyword, AllowedTypesT...>{});
   parser.consumeWhitespace();
 
   if (parser.isFinished()) {
-    value = std::move(componentValue);
-  } else {
-    value = {};
+    return value;
   }
-};
 
-} // namespace detail
+  return {};
+};
 
 /**
- * Parse a single CSS value. Returns a default-constructed
- * CSSValueVariant (CSSKeyword::Unset) on syntax error.
+ * Attempts to parse the next CSS value of a given set of data types, at the
+ * current location of the syntax parser, advancing the syntax parser
  */
-template <CSSDataType... AllowedTypesT>
-CSSValueVariant<AllowedTypesT...> parseCSSValue(std::string_view css) {
-  CSSValueVariant<AllowedTypesT...> value;
-  detail::parseCSSValue<AllowedTypesT...>(css, value);
-  return value;
-};
+template <CSSMaybeCompoundDataType... AllowedTypesT>
+constexpr auto parseNextCSSValue(
+    CSSSyntaxParser& syntaxParser,
+    CSSDelimiter delimeter = CSSDelimiter::None)
+    -> CSSVariantWithTypes<
+        CSSMergedDataTypes<AllowedTypesT...>,
+        std::monostate> {
+  detail::CSSValueParser valueParser(syntaxParser);
+  return valueParser.consumeValue(
+      delimeter, CSSMergedDataTypes<AllowedTypesT...>{});
+}
 
 /**
- * Parses a CSS property into its declared value type.
+ * Attempts to parse the next CSS value of a given set of data types, at the
+ * current location of the syntax parser, without advancing the syntax parser
  */
-template <CSSProp Prop>
-constexpr CSSDeclaredValue<Prop> parseCSSProp(std::string_view css) {
-  // For now we only allow parsing props composed of a single component value.
-  CSSDeclaredValue<Prop> value;
-  detail::parseCSSValue(css, value);
-  return value;
+template <CSSMaybeCompoundDataType... AllowedTypesT>
+constexpr auto peekNextCSSValue(
+    CSSSyntaxParser& syntaxParser,
+    CSSDelimiter delimeter = CSSDelimiter::None)
+    -> CSSVariantWithTypes<
+        CSSMergedDataTypes<AllowedTypesT...>,
+        std::monostate> {
+  auto savedParser = syntaxParser;
+  detail::CSSValueParser valueParser(syntaxParser);
+  auto ret = valueParser.consumeValue(
+      delimeter, CSSMergedDataTypes<AllowedTypesT...>{});
+  syntaxParser = savedParser;
+  return ret;
 }
 
 } // namespace facebook::react