Do not consume delimeter when not consuming component value

Summary:
Right now during parsing we can ask for a next component value, with a delimeter, and even if we don't have a component value to consume, we will consume the delimeter.

This is kind of awkward since e.g. trailing comma can be consumed, then we think syntax is valid. Let's try changing this.

Changelog: [Internal]

Differential Revision: D68474739

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

@@ -233,11 +233,14 @@ struct CSSComponentValueVisitorDispatcher {
   constexpr ReturnT consumeComponentValue(
       CSSDelimiter delimiter,
       const VisitorsT&... visitors) {
+    auto currentState = parser;
     if (!consumeDelimiter(delimiter)) {
+      parser = currentState;
       return {};
     }
 
     if (parser.peek().type() == parser.terminator_) {
+      parser = currentState;
       return {};
     }
 

packages/react-native/ReactCommon/react/renderer/css/tests/CSSSyntaxParserTest.cpp

@@ -579,4 +579,31 @@ TEST(CSSSyntaxParser, solidus_or_whitespace) {
   EXPECT_FALSE(delimValue1);
 }
 
+TEST(CSSSyntaxParser, delimeter_not_consumed_when_no_component_value) {
+  CSSSyntaxParser parser{"foo ,"};
+
+  auto identValue = parser.consumeComponentValue<std::string_view>(
+      [](const CSSPreservedToken& token) {
+        EXPECT_EQ(token.type(), CSSTokenType::Ident);
+        EXPECT_EQ(token.stringValue(), "foo");
+        return token.stringValue();
+      });
+
+  EXPECT_EQ(identValue, "foo");
+
+  auto identValue2 = parser.consumeComponentValue<bool>(
+      CSSDelimiter::Comma,
+      [](const CSSPreservedToken& /*token*/) { return true; });
+
+  EXPECT_FALSE(identValue2);
+
+  auto hasComma = parser.consumeComponentValue<bool>(
+      CSSDelimiter::Whitespace, [](const CSSPreservedToken& token) {
+        EXPECT_EQ(token.type(), CSSTokenType::Comma);
+        return true;
+      });
+
+  EXPECT_TRUE(hasComma);
+}
+
 } // namespace facebook::react