Do not consume delimeter when not consuming component value (#48841)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/48841

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]

Reviewed By: lenaic

Differential Revision: D68474739

fbshipit-source-id: 47a942681bc8472ca28470eba821d4d95306ae5d

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

@@ -233,11 +233,14 @@ struct CSSComponentValueVisitorDispatcher {
   constexpr ReturnT consumeComponentValue(
       CSSDelimiter delimiter,
       const VisitorsT&... visitors) {
+    auto originalParser = parser;
     if (!consumeDelimiter(delimiter)) {
+      parser = originalParser;
       return {};
     }
 
     if (parser.peek().type() == parser.terminator_) {
+      parser = originalParser;
       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