Replace CSSSyntaxParser with CSSValueParser in data type sinks

Summary:
Previously, CSSDataTypeParser sinks received a raw CSSSyntaxParser& reference,
which exposed low-level tokenization APIs (consumeComponentValue with lambdas,
consumeToken, etc.) that data type parsers should not use directly. This made
it unclear what operations are appropriate when implementing a new CSS data
type.

This change promotes detail::CSSValueParser to a public CSSValueParser class
that wraps CSSSyntaxParser and exposes only value-level parsing operations:
parseNextValue, peekNextValue, consumeWhitespace, consumeDelimiter, isFinished,
peekNextTokenIs, and saveState/restoreState for lookahead patterns.

All CSSDataTypeParser sink methods now receive CSSValueParser& instead of
CSSSyntaxParser&, and use parser.parseNextValue<T>() instead of the free
function parseNextCSSValue<T>(parser). Direct consumeComponentValue calls in
gradient parsers (CSSBackgroundImage.h) are replaced with keyword set parsing
via parseNextValue<KeywordEnum>, with new To/At keywords added to CSSKeyword.

The free functions parseCSSProperty, parseNextCSSValue, and peekNextCSSValue
remain as convenience wrappers for backward compatibility.

Changelog: [Internal]

Reviewed By: jorge-cab

Differential Revision: D94357104

fbshipit-source-id: 3ba2ba236c9c6e82673e2759a6c7af803599b7f0

Author: NickGerleman

packages/react-native/ReactCommon/react/renderer/css/CSSBackgroundImage.h

@@ -47,7 +47,7 @@ struct CSSDataTypeParser<CSSColor> {
     return {};
   }
 
-  static constexpr auto consumeFunctionBlock(const CSSFunctionBlock &func, CSSSyntaxParser &parser)
+  static constexpr auto consumeFunctionBlock(const CSSFunctionBlock &func, CSSValueParser &parser)
       -> std::optional<CSSColor>
   {
     return parseCSSColorFunction<CSSColor>(func.name, parser);

packages/react-native/ReactCommon/react/renderer/css/CSSColor.h

@@ -17,7 +17,6 @@
 #include <react/renderer/css/CSSAngle.h>
 #include <react/renderer/css/CSSNumber.h>
 #include <react/renderer/css/CSSPercentage.h>
-#include <react/renderer/css/CSSSyntaxParser.h>
 #include <react/renderer/css/CSSValueParser.h>
 #include <react/utils/PackTraits.h>
 #include <react/utils/fnv1a.h>
@@ -154,16 +153,19 @@ constexpr std::optional<float> normalizeComponent(
 }
 
 template <CSSDataType... FirstComponentAllowedTypesT>
-constexpr bool isLegacyColorFunction(CSSSyntaxParser &parser)
+constexpr bool isLegacyColorFunction(CSSValueParser &parser)
 {
-  auto lookahead = parser;
-  auto next = parseNextCSSValue<FirstComponentAllowedTypesT...>(lookahead);
+  auto saved = parser.syntaxParser();
+  auto next = parser.parseNextValue<FirstComponentAllowedTypesT...>();
   if (std::holds_alternative<std::monostate>(next)) {
+    parser.syntaxParser() = saved;
     return false;
   }
 
-  return lookahead.consumeComponentValue<bool>(
-      CSSDelimiter::OptionalWhitespace, [](CSSPreservedToken token) { return token.type() == CSSTokenType::Comma; });
+  parser.syntaxParser().consumeWhitespace();
+  bool isLegacy = parser.syntaxParser().peek().type() == CSSTokenType::Comma;
+  parser.syntaxParser() = saved;
+  return isLegacy;
 }
 
 /**
@@ -172,29 +174,29 @@ constexpr bool isLegacyColorFunction(CSSSyntaxParser &parser)
  * https://www.w3.org/TR/css-color-4/#typedef-legacy-rgb-syntax
  */
 template <typename CSSColor>
-constexpr std::optional<CSSColor> parseLegacyRgbFunction(CSSSyntaxParser &parser)
+constexpr std::optional<CSSColor> parseLegacyRgbFunction(CSSValueParser &parser)
 {
-  auto rawRed = parseNextCSSValue<CSSNumber, CSSPercentage>(parser);
+  auto rawRed = parser.parseNextValue<CSSNumber, CSSPercentage>();
   bool usesNumber = std::holds_alternative<CSSNumber>(rawRed);
 
   auto red = normalizeComponent(rawRed, 255.0f);
   if (!red.has_value()) {
     return {};
   }
 
-  auto green = usesNumber ? normalizeNumberComponent(parseNextCSSValue<CSSNumber>(parser, CSSDelimiter::Comma))
-                          : normalizeComponent(parseNextCSSValue<CSSPercentage>(parser, CSSDelimiter::Comma), 255.0f);
+  auto green = usesNumber ? normalizeNumberComponent(parser.parseNextValue<CSSNumber>(CSSDelimiter::Comma))
+                          : normalizeComponent(parser.parseNextValue<CSSPercentage>(CSSDelimiter::Comma), 255.0f);
   if (!green.has_value()) {
     return {};
   }
 
-  auto blue = usesNumber ? normalizeNumberComponent(parseNextCSSValue<CSSNumber>(parser, CSSDelimiter::Comma))
-                         : normalizeComponent(parseNextCSSValue<CSSPercentage>(parser, CSSDelimiter::Comma), 255.0f);
+  auto blue = usesNumber ? normalizeNumberComponent(parser.parseNextValue<CSSNumber>(CSSDelimiter::Comma))
+                         : normalizeComponent(parser.parseNextValue<CSSPercentage>(CSSDelimiter::Comma), 255.0f);
   if (!blue.has_value()) {
     return {};
   }
 
-  auto alpha = normalizeComponent(parseNextCSSValue<CSSNumber, CSSPercentage>(parser, CSSDelimiter::Comma), 1.0f);
+  auto alpha = normalizeComponent(parser.parseNextValue<CSSNumber, CSSPercentage>(CSSDelimiter::Comma), 1.0f);
 
   return CSSColor{
       .r = clamp255Component(*red),
@@ -210,26 +212,25 @@ constexpr std::optional<CSSColor> parseLegacyRgbFunction(CSSSyntaxParser &parser
  * https://www.w3.org/TR/css-color-4/#typedef-modern-rgb-syntax
  */
 template <typename CSSColor>
-constexpr std::optional<CSSColor> parseModernRgbFunction(CSSSyntaxParser &parser)
+constexpr std::optional<CSSColor> parseModernRgbFunction(CSSValueParser &parser)
 {
-  auto red = normalizeComponent(parseNextCSSValue<CSSNumber, CSSPercentage>(parser), 255.0f);
+  auto red = normalizeComponent(parser.parseNextValue<CSSNumber, CSSPercentage>(), 255.0f);
   if (!red.has_value()) {
     return {};
   }
 
-  auto green =
-      normalizeComponent(parseNextCSSValue<CSSNumber, CSSPercentage>(parser, CSSDelimiter::Whitespace), 255.0f);
+  auto green = normalizeComponent(parser.parseNextValue<CSSNumber, CSSPercentage>(CSSDelimiter::Whitespace), 255.0f);
   if (!green.has_value()) {
     return {};
   }
 
-  auto blue = normalizeComponent(parseNextCSSValue<CSSNumber, CSSPercentage>(parser, CSSDelimiter::Whitespace), 255.0f);
+  auto blue = normalizeComponent(parser.parseNextValue<CSSNumber, CSSPercentage>(CSSDelimiter::Whitespace), 255.0f);
   if (!blue.has_value()) {
     return {};
   }
 
   auto alpha =
-      normalizeComponent(parseNextCSSValue<CSSNumber, CSSPercentage>(parser, CSSDelimiter::SolidusOrWhitespace), 1.0f);
+      normalizeComponent(parser.parseNextValue<CSSNumber, CSSPercentage>(CSSDelimiter::SolidusOrWhitespace), 1.0f);
 
   return CSSColor{
       .r = clamp255Component(*red),
@@ -244,7 +245,7 @@ constexpr std::optional<CSSColor> parseModernRgbFunction(CSSSyntaxParser &parser
  * https://www.w3.org/TR/css-color-4/#funcdef-rgb
  */
 template <typename CSSColor>
-constexpr std::optional<CSSColor> parseRgbFunction(CSSSyntaxParser &parser)
+constexpr std::optional<CSSColor> parseRgbFunction(CSSValueParser &parser)
 {
   if (isLegacyColorFunction<CSSNumber, CSSPercentage>(parser)) {
     return parseLegacyRgbFunction<CSSColor>(parser);
@@ -259,24 +260,24 @@ constexpr std::optional<CSSColor> parseRgbFunction(CSSSyntaxParser &parser)
  * https://www.w3.org/TR/css-color-4/#typedef-legacy-hsl-syntax
  */
 template <typename CSSColor>
-inline std::optional<CSSColor> parseLegacyHslFunction(CSSSyntaxParser &parser)
+inline std::optional<CSSColor> parseLegacyHslFunction(CSSValueParser &parser)
 {
-  auto h = normalizeHueComponent(parseNextCSSValue<CSSNumber, CSSAngle>(parser));
+  auto h = normalizeHueComponent(parser.parseNextValue<CSSNumber, CSSAngle>());
   if (!h.has_value()) {
     return {};
   }
 
-  auto s = normalizeComponent(parseNextCSSValue<CSSPercentage>(parser, CSSDelimiter::Comma), 100.0f);
+  auto s = normalizeComponent(parser.parseNextValue<CSSPercentage>(CSSDelimiter::Comma), 100.0f);
   if (!s.has_value()) {
     return {};
   }
 
-  auto l = normalizeComponent(parseNextCSSValue<CSSPercentage>(parser, CSSDelimiter::Comma), 100.0f);
+  auto l = normalizeComponent(parser.parseNextValue<CSSPercentage>(CSSDelimiter::Comma), 100.0f);
   if (!l.has_value()) {
     return {};
   }
 
-  auto a = normalizeComponent(parseNextCSSValue<CSSNumber, CSSPercentage>(parser, CSSDelimiter::Comma), 1.0f);
+  auto a = normalizeComponent(parser.parseNextValue<CSSNumber, CSSPercentage>(CSSDelimiter::Comma), 1.0f);
 
   auto [r, g, b] = hslToRgb(*h, *s, *l);
 
@@ -293,25 +294,24 @@ inline std::optional<CSSColor> parseLegacyHslFunction(CSSSyntaxParser &parser)
  * it is valid. https://www.w3.org/TR/css-color-4/#typedef-modern-hsl-syntax
  */
 template <typename CSSColor>
-inline std::optional<CSSColor> parseModernHslFunction(CSSSyntaxParser &parser)
+inline std::optional<CSSColor> parseModernHslFunction(CSSValueParser &parser)
 {
-  auto h = normalizeHueComponent(parseNextCSSValue<CSSNumber, CSSAngle>(parser));
+  auto h = normalizeHueComponent(parser.parseNextValue<CSSNumber, CSSAngle>());
   if (!h.has_value()) {
     return {};
   }
 
-  auto s = normalizeComponent(parseNextCSSValue<CSSNumber, CSSPercentage>(parser, CSSDelimiter::Whitespace), 100.0f);
+  auto s = normalizeComponent(parser.parseNextValue<CSSNumber, CSSPercentage>(CSSDelimiter::Whitespace), 100.0f);
   if (!s.has_value()) {
     return {};
   }
 
-  auto l = normalizeComponent(parseNextCSSValue<CSSNumber, CSSPercentage>(parser, CSSDelimiter::Whitespace), 100.0f);
+  auto l = normalizeComponent(parser.parseNextValue<CSSNumber, CSSPercentage>(CSSDelimiter::Whitespace), 100.0f);
   if (!l.has_value()) {
     return {};
   }
 
-  auto a =
-      normalizeComponent(parseNextCSSValue<CSSNumber, CSSPercentage>(parser, CSSDelimiter::SolidusOrWhitespace), 1.0f);
+  auto a = normalizeComponent(parser.parseNextValue<CSSNumber, CSSPercentage>(CSSDelimiter::SolidusOrWhitespace), 1.0f);
 
   auto [r, g, b] = hslToRgb(*h, *s, *l);
 
@@ -328,7 +328,7 @@ inline std::optional<CSSColor> parseModernHslFunction(CSSSyntaxParser &parser)
  * https://www.w3.org/TR/css-color-4/#funcdef-hsl
  */
 template <typename CSSColor>
-inline std::optional<CSSColor> parseHslFunction(CSSSyntaxParser &parser)
+inline std::optional<CSSColor> parseHslFunction(CSSValueParser &parser)
 {
   if (isLegacyColorFunction<CSSNumber, CSSAngle>(parser)) {
     return parseLegacyHslFunction<CSSColor>(parser);
@@ -342,25 +342,24 @@ inline std::optional<CSSColor> parseHslFunction(CSSSyntaxParser &parser)
  * https://www.w3.org/TR/css-color-4/#funcdef-hwb
  */
 template <typename CSSColor>
-inline std::optional<CSSColor> parseHwbFunction(CSSSyntaxParser &parser)
+inline std::optional<CSSColor> parseHwbFunction(CSSValueParser &parser)
 {
-  auto h = normalizeHueComponent(parseNextCSSValue<CSSNumber, CSSAngle>(parser));
+  auto h = normalizeHueComponent(parser.parseNextValue<CSSNumber, CSSAngle>());
   if (!h.has_value()) {
     return {};
   }
 
-  auto w = normalizeComponent(parseNextCSSValue<CSSNumber, CSSPercentage>(parser, CSSDelimiter::Whitespace), 100.0f);
+  auto w = normalizeComponent(parser.parseNextValue<CSSNumber, CSSPercentage>(CSSDelimiter::Whitespace), 100.0f);
   if (!w.has_value()) {
     return {};
   }
 
-  auto b = normalizeComponent(parseNextCSSValue<CSSNumber, CSSPercentage>(parser, CSSDelimiter::Whitespace), 100.0f);
+  auto b = normalizeComponent(parser.parseNextValue<CSSNumber, CSSPercentage>(CSSDelimiter::Whitespace), 100.0f);
   if (!b.has_value()) {
     return {};
   }
 
-  auto a =
-      normalizeComponent(parseNextCSSValue<CSSNumber, CSSPercentage>(parser, CSSDelimiter::SolidusOrWhitespace), 1.0f);
+  auto a = normalizeComponent(parser.parseNextValue<CSSNumber, CSSPercentage>(CSSDelimiter::SolidusOrWhitespace), 1.0f);
 
   auto [red, green, blue] = hwbToRgb(*h, *w, *b);
 
@@ -380,7 +379,7 @@ inline std::optional<CSSColor> parseHwbFunction(CSSSyntaxParser &parser)
  * https://www.w3.org/TR/css-color-4/#typedef-color-function
  */
 template <typename CSSColor>
-constexpr std::optional<CSSColor> parseCSSColorFunction(std::string_view colorFunction, CSSSyntaxParser &parser)
+constexpr std::optional<CSSColor> parseCSSColorFunction(std::string_view colorFunction, CSSValueParser &parser)
 {
   switch (fnv1aLowercase(colorFunction)) {
     // CSS Color Module Level 4 treats the alpha variants of functions as the

packages/react-native/ReactCommon/react/renderer/css/CSSColorFunction.h

@@ -16,6 +16,8 @@
 
 namespace facebook::react {
 
+class CSSValueParser;
+
 /**
  * May be specialized to instruct the CSS value parser how to parse a given data
  * type, according to CSSValidDataTypeParser.
@@ -24,37 +26,40 @@ template <typename CSSDataTypeT>
 struct CSSDataTypeParser {};
 
 /**
- * Accepts a CSS function block and may parse it (and future syntax) into a
- * concrete representation.
+ * Accepts a CSS function block and may parse it into a concrete representation.
+ * The CSSValueParser provides methods for parsing sub-values within the
+ * function block scope.
  */
 template <typename T, typename ReturnT = std::any>
-concept CSSFunctionBlockSink = requires(const CSSFunctionBlock &func, CSSSyntaxParser &parser) {
+concept CSSFunctionBlockSink = requires(const CSSFunctionBlock &func, CSSValueParser &parser) {
   { T::consumeFunctionBlock(func, parser) } -> std::convertible_to<ReturnT>;
 };
 
 /**
- * Accepts a CSS simple block and may parse it (and future syntax) into a
- * concrete representation.
+ * Accepts a CSS simple block and may parse it into a concrete representation.
+ * The CSSValueParser provides methods for parsing sub-values within the
+ * block scope.
  */
 template <typename T, typename ReturnT = std::any>
-concept CSSSimpleBlockSink = requires(const CSSSimpleBlock &block, CSSSyntaxParser &parser) {
+concept CSSSimpleBlockSink = requires(const CSSSimpleBlock &block, CSSValueParser &parser) {
   { T::consumeSimpleBlock(block, parser) } -> std::convertible_to<ReturnT>;
 };
 
 /**
- * Accepts a CSS preserved token and may parse it (and future syntax) into a
- * concrete representation.
+ * Accepts a CSS preserved token and may parse it into a concrete
+ * representation.
  */
 template <typename T, typename ReturnT = std::any>
 concept CSSPreservedTokenSink = requires(const CSSPreservedToken &token) {
   { T::consumePreservedToken(token) } -> std::convertible_to<ReturnT>;
 };
 
 /**
- * Accepts a raw syntax parser, to be able to parse compounded values
+ * Accepts a CSSValueParser to be able to parse compounded values spanning
+ * multiple component values.
  */
 template <typename T, typename ReturnT = std::any>
-concept CSSParserSink = requires(CSSSyntaxParser &parser) {
+concept CSSParserSink = requires(CSSValueParser &parser) {
   { T::consume(parser) } -> std::convertible_to<ReturnT>;
 };
 

packages/react-native/ReactCommon/react/renderer/css/CSSDataType.h

@@ -28,14 +28,14 @@ namespace detail {
 template <typename DataT, TemplateStringLiteral Name>
   requires(std::is_same_v<decltype(DataT::amount), float>)
 struct CSSFilterSimpleAmountParser {
-  static constexpr auto consumeFunctionBlock(const CSSFunctionBlock &func, CSSSyntaxParser &parser)
+  static constexpr auto consumeFunctionBlock(const CSSFunctionBlock &func, CSSValueParser &parser)
       -> std::optional<DataT>
   {
     if (!iequals(func.name, Name)) {
       return {};
     }
 
-    auto amount = parseNextCSSValue<CSSNumber, CSSPercentage>(parser);
+    auto amount = parser.parseNextValue<CSSNumber, CSSPercentage>();
     if (std::holds_alternative<CSSNumber>(amount)) {
       if (std::get<CSSNumber>(amount).value < 0.0f) {
         return {};
@@ -65,14 +65,14 @@ struct CSSBlurFilter {
 
 template <>
 struct CSSDataTypeParser<CSSBlurFilter> {
-  static constexpr auto consumeFunctionBlock(const CSSFunctionBlock &func, CSSSyntaxParser &parser)
+  static constexpr auto consumeFunctionBlock(const CSSFunctionBlock &func, CSSValueParser &parser)
       -> std::optional<CSSBlurFilter>
   {
     if (!iequals(func.name, "blur")) {
       return {};
     }
 
-    auto len = parseNextCSSValue<CSSLength>(parser);
+    auto len = parser.parseNextValue<CSSLength>();
     return CSSBlurFilter{std::holds_alternative<CSSLength>(len) ? std::get<CSSLength>(len) : CSSLength{}};
   }
 };
@@ -123,7 +123,7 @@ struct CSSDropShadowFilter {
 
 template <>
 struct CSSDataTypeParser<CSSDropShadowFilter> {
-  static constexpr auto consumeFunctionBlock(const CSSFunctionBlock &func, CSSSyntaxParser &parser)
+  static constexpr auto consumeFunctionBlock(const CSSFunctionBlock &func, CSSValueParser &parser)
       -> std::optional<CSSDropShadowFilter>
   {
     if (!iequals(func.name, "drop-shadow")) {
@@ -133,7 +133,7 @@ struct CSSDataTypeParser<CSSDropShadowFilter> {
     std::optional<CSSColor> color{};
     std::optional<std::array<CSSLength, 3>> lengths{};
 
-    auto firstVal = parseNextCSSValue<CSSColor, CSSLength>(parser);
+    auto firstVal = parser.parseNextValue<CSSColor, CSSLength>();
     if (std::holds_alternative<std::monostate>(firstVal)) {
       return {};
     }
@@ -147,7 +147,7 @@ struct CSSDataTypeParser<CSSDropShadowFilter> {
       }
     }
 
-    auto secondVal = parseNextCSSValue<CSSColor, CSSLength>(parser, CSSDelimiter::Whitespace);
+    auto secondVal = parser.parseNextValue<CSSColor, CSSLength>(CSSDelimiter::Whitespace);
     if (std::holds_alternative<CSSColor>(secondVal)) {
       if (color.has_value()) {
         return {};
@@ -173,14 +173,14 @@ struct CSSDataTypeParser<CSSDropShadowFilter> {
   }
 
  private:
-  static constexpr std::optional<std::array<CSSLength, 3>> parseLengths(CSSLength offsetX, CSSSyntaxParser &parser)
+  static constexpr std::optional<std::array<CSSLength, 3>> parseLengths(CSSLength offsetX, CSSValueParser &parser)
   {
-    auto offsetY = parseNextCSSValue<CSSLength>(parser, CSSDelimiter::Whitespace);
+    auto offsetY = parser.parseNextValue<CSSLength>(CSSDelimiter::Whitespace);
     if (!std::holds_alternative<CSSLength>(offsetY)) {
       return {};
     }
 
-    auto standardDeviation = parseNextCSSValue<CSSLength>(parser, CSSDelimiter::Whitespace);
+    auto standardDeviation = parser.parseNextValue<CSSLength>(CSSDelimiter::Whitespace);
     if (std::holds_alternative<CSSLength>(standardDeviation) && std::get<CSSLength>(standardDeviation).value < 0.0f) {
       return {};
     }
@@ -220,14 +220,14 @@ struct CSSHueRotateFilter {
 
 template <>
 struct CSSDataTypeParser<CSSHueRotateFilter> {
-  static constexpr auto consumeFunctionBlock(const CSSFunctionBlock &func, CSSSyntaxParser &parser)
+  static constexpr auto consumeFunctionBlock(const CSSFunctionBlock &func, CSSValueParser &parser)
       -> std::optional<CSSHueRotateFilter>
   {
     if (!iequals(func.name, "hue-rotate")) {
       return {};
     }
 
-    auto angle = parseNextCSSValue<CSSAngle, CSSZero>(parser);
+    auto angle = parser.parseNextValue<CSSAngle, CSSZero>();
     return CSSHueRotateFilter{std::holds_alternative<CSSAngle>(angle) ? std::get<CSSAngle>(angle).degrees : 0.0f};
   }
 };