diff --git a/packages/react-native/ReactCommon/react/renderer/css/CSSCommaSeparatedList.h b/packages/react-native/ReactCommon/react/renderer/css/CSSCommaSeparatedList.h
new file mode 100644
index 00000000000000..ee640e65e9d3ef
--- /dev/null
+++ b/packages/react-native/ReactCommon/react/renderer/css/CSSCommaSeparatedList.h
@@ -0,0 +1,45 @@
+/*
+ * 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/CSSDataType.h>
+#include <react/renderer/css/CSSValueParser.h>
+
+namespace facebook::react {
+
+/**
+ * Represents a comma-separated repetition of a given single type.
+ * https://www.w3.org/TR/css-values-4/#mult-comma
+ */
+template <CSSDataType AllowedTypeT>
+struct CSSCommaSeparatedList : public std::vector<AllowedTypeT> {};
+
+template <CSSDataType AllowedTypeT>
+struct CSSDataTypeParser<CSSCommaSeparatedList<AllowedTypeT>> {
+  static inline auto consume(CSSSyntaxParser& parser)
+      -> std::optional<CSSCommaSeparatedList<AllowedTypeT>> {
+    CSSCommaSeparatedList<AllowedTypeT> result;
+    for (auto nextValue = parseNextCSSValue<AllowedTypeT>(parser);
+         !std::holds_alternative<std::monostate>(nextValue);
+         nextValue =
+             parseNextCSSValue<AllowedTypeT>(parser, CSSDelimiter::Comma)) {
+      result.push_back(std::move(std::get<AllowedTypeT>(nextValue)));
+    }
+
+    if (result.empty()) {
+      return {};
+    }
+
+    return result;
+  }
+};
+
+} // namespace facebook::react
diff --git a/packages/react-native/ReactCommon/react/renderer/css/CSSDataType.h b/packages/react-native/ReactCommon/react/renderer/css/CSSDataType.h
index 3147bb39af86b0..ac533422ee1615 100644
--- a/packages/react-native/ReactCommon/react/renderer/css/CSSDataType.h
+++ b/packages/react-native/ReactCommon/react/renderer/css/CSSDataType.h
@@ -48,29 +48,27 @@ concept CSSSimpleBlockSink =
  * concrete representation.
  */
 template <typename T, typename ReturnT = std::any>
-concept CSSPreservedTokenSink =
-    requires(const CSSPreservedToken& token, CSSSyntaxParser& parser) {
-      {
-        T::consumePreservedToken(token, parser)
-      } -> std::convertible_to<ReturnT>;
-    };
+concept CSSPreservedTokenSink = requires(const CSSPreservedToken& token) {
+  { T::consumePreservedToken(token) } -> std::convertible_to<ReturnT>;
+};
 
 /**
- * Accepts a CSS preserved token and may parse it into a concrete
- * representation.
+ * Accepts a raw syntax parser, to be able to parse compounded values
  */
 template <typename T, typename ReturnT = std::any>
-concept CSSSimplePreservedTokenSink = requires(const CSSPreservedToken& token) {
-  { T::consumePreservedToken(token) } -> std::convertible_to<ReturnT>;
+concept CSSParserSink = requires(CSSSyntaxParser& parser) {
+  { T::consume(parser) } -> std::convertible_to<ReturnT>;
 };
 
 /**
  * Represents a valid specialization of CSSDataTypeParser
  */
 template <typename T, typename ReturnT = std::any>
-concept CSSValidDataTypeParser = CSSFunctionBlockSink<T, ReturnT> ||
-    CSSSimpleBlockSink<T, ReturnT> || CSSPreservedTokenSink<T, ReturnT> ||
-    CSSSimplePreservedTokenSink<T, ReturnT>;
+concept CSSValidDataTypeParser =
+    ((CSSFunctionBlockSink<T, ReturnT> || CSSSimpleBlockSink<T, ReturnT> ||
+      CSSPreservedTokenSink<T, ReturnT>) &&
+     !CSSParserSink<T, ReturnT>) ||
+    CSSParserSink<T, ReturnT>;
 
 /**
  * Concrete representation for a CSS data type
diff --git a/packages/react-native/ReactCommon/react/renderer/css/CSSKeyword.h b/packages/react-native/ReactCommon/react/renderer/css/CSSKeyword.h
index 07bca3f5e99acc..c9dc5c9693542c 100644
--- a/packages/react-native/ReactCommon/react/renderer/css/CSSKeyword.h
+++ b/packages/react-native/ReactCommon/react/renderer/css/CSSKeyword.h
@@ -307,6 +307,11 @@ constexpr std::optional<KeywordT> parseCSSKeyword(std::string_view ident) {
         return KeywordT::InlineGrid;
       }
       break;
+    case fnv1a("inset"):
+      if constexpr (detail::hasInset<KeywordT>) {
+        return KeywordT::Inset;
+      }
+      break;
     case fnv1a("ltr"):
       if constexpr (detail::hasLtr<KeywordT>) {
         return KeywordT::Ltr;
diff --git a/packages/react-native/ReactCommon/react/renderer/css/CSSRatio.h b/packages/react-native/ReactCommon/react/renderer/css/CSSRatio.h
index 92111bbcc507f0..9adb77a8cd9216 100644
--- a/packages/react-native/ReactCommon/react/renderer/css/CSSRatio.h
+++ b/packages/react-native/ReactCommon/react/renderer/css/CSSRatio.h
@@ -39,23 +39,26 @@ struct CSSRatio {
 
 template <>
 struct CSSDataTypeParser<CSSRatio> {
-  static constexpr auto consumePreservedToken(
-      const CSSPreservedToken& token,
-      CSSSyntaxParser& parser) -> std::optional<CSSRatio> {
+  static constexpr auto consume(CSSSyntaxParser& parser)
+      -> std::optional<CSSRatio> {
     // <ratio> = <number [0,∞]> [ / <number [0,∞]> ]?
     // https://www.w3.org/TR/css-values-4/#ratio
-    if (token.numericValue() >= 0) {
-      float numerator = token.numericValue();
+    auto numerator = parseNextCSSValue<CSSNumber>(parser);
+    if (!std::holds_alternative<CSSNumber>(numerator)) {
+      return {};
+    }
 
+    auto numeratorValue = std::get<CSSNumber>(numerator).value;
+    if (numeratorValue >= 0) {
       auto denominator =
           peekNextCSSValue<CSSNumber>(parser, CSSDelimiter::Solidus);
       if (std::holds_alternative<CSSNumber>(denominator) &&
           std::get<CSSNumber>(denominator).value >= 0) {
         parseNextCSSValue<CSSNumber>(parser, CSSDelimiter::Solidus);
-        return CSSRatio{numerator, std::get<CSSNumber>(denominator).value};
+        return CSSRatio{numeratorValue, std::get<CSSNumber>(denominator).value};
       }
 
-      return CSSRatio{numerator, 1.0f};
+      return CSSRatio{numeratorValue, 1.0f};
     }
 
     return {};
diff --git a/packages/react-native/ReactCommon/react/renderer/css/CSSSyntaxParser.h b/packages/react-native/ReactCommon/react/renderer/css/CSSSyntaxParser.h
index 22c96834b9f971..9b84a75461123a 100644
--- a/packages/react-native/ReactCommon/react/renderer/css/CSSSyntaxParser.h
+++ b/packages/react-native/ReactCommon/react/renderer/css/CSSSyntaxParser.h
@@ -35,6 +35,13 @@ struct CSSSimpleBlock {
   CSSTokenType openBracketType{};
 };
 
+/**
+ * Describes a valid return type for a CSSSyntaxParser visitor
+ */
+template <typename T>
+concept CSSSyntaxVisitorReturn =
+    std::is_default_constructible_v<T> && std::equality_comparable<T>;
+
 /**
  * A CSSFunctionVisitor is called to start parsing a function component value.
  * At this point, the Parser is positioned at the start of the function
@@ -42,7 +49,7 @@ struct CSSSimpleBlock {
  * of the function block.
  */
 template <typename T, typename ReturnT>
-concept CSSFunctionVisitor =
+concept CSSFunctionVisitor = CSSSyntaxVisitorReturn<ReturnT> &&
     requires(T visitor, CSSFunctionBlock func, CSSSyntaxParser& blockParser) {
       { visitor(func, blockParser) } -> std::convertible_to<ReturnT>;
     };
@@ -52,7 +59,7 @@ concept CSSFunctionVisitor =
  * component value.
  */
 template <typename T, typename ReturnT>
-concept CSSPreservedTokenVisitor =
+concept CSSPreservedTokenVisitor = CSSSyntaxVisitorReturn<ReturnT> &&
     requires(T visitor, CSSPreservedToken token) {
       { visitor(token) } -> std::convertible_to<ReturnT>;
     };
@@ -63,7 +70,7 @@ concept CSSPreservedTokenVisitor =
  * of the block.
  */
 template <typename T, typename ReturnT>
-concept CSSSimpleBlockVisitor =
+concept CSSSimpleBlockVisitor = CSSSyntaxVisitorReturn<ReturnT> &&
     requires(T visitor, CSSSimpleBlock block, CSSSyntaxParser& blockParser) {
       { visitor(block, blockParser) } -> std::convertible_to<ReturnT>;
     };
@@ -72,16 +79,17 @@ concept CSSSimpleBlockVisitor =
  * Any visitor for a component value.
  */
 template <typename T, typename ReturnT>
-concept CSSComponentValueVisitor = CSSFunctionVisitor<T, ReturnT> ||
-    CSSPreservedTokenVisitor<T, ReturnT> || CSSSimpleBlockVisitor<T, ReturnT>;
+concept CSSComponentValueVisitor = CSSSyntaxVisitorReturn<ReturnT> &&
+    (CSSFunctionVisitor<T, ReturnT> || CSSPreservedTokenVisitor<T, ReturnT> ||
+     CSSSimpleBlockVisitor<T, ReturnT>);
 
 /**
  * Represents a variadic set of CSSComponentValueVisitor with no more than one
  * of a specific type of visitor.
  */
 template <typename ReturnT, typename... VisitorsT>
-concept CSSUniqueComponentValueVisitors =
-    (CSSComponentValueVisitor<VisitorsT, ReturnT> && ... && true) &&
+concept CSSUniqueComponentValueVisitors = CSSSyntaxVisitorReturn<ReturnT> &&
+    (CSSComponentValueVisitor<VisitorsT, ReturnT> && ...) &&
     ((CSSFunctionVisitor<VisitorsT, ReturnT> ? 1 : 0) + ... + 0) <= 1 &&
     ((CSSPreservedTokenVisitor<VisitorsT, ReturnT> ? 1 : 0) + ... + 0) <= 1 &&
     ((CSSSimpleBlockVisitor<VisitorsT, ReturnT> ? 1 : 0) + ... + 0) <= 1;
@@ -106,7 +114,9 @@ enum class CSSDelimiter {
  * https://www.w3.org/TR/css-syntax-3/#component-value
  */
 class CSSSyntaxParser {
-  template <typename ReturnT, CSSComponentValueVisitor<ReturnT>... VisitorsT>
+  template <
+      CSSSyntaxVisitorReturn ReturnT,
+      CSSComponentValueVisitor<ReturnT>... VisitorsT>
   friend struct CSSComponentValueVisitorDispatcher;
 
  public:
@@ -130,6 +140,11 @@ class CSSSyntaxParser {
    * higher-level data structure, and continue parsing within its scope using
    * the same underlying CSSSyntaxParser.
    *
+   * The state of the parser is reset if a visitor returns a default-constructed
+   * value for the given return type, even if it previously advanced the parser.
+   * If no visitor returns a non-default-constructed value, the component value
+   * will not be consumed.
+   *
    * https://www.w3.org/TR/css-syntax-3/#consume-component-value
    *
    * @param <ReturnT> caller-specified return type of visitors. This type will
@@ -142,47 +157,16 @@ class CSSSyntaxParser {
    * @returns the visitor returned value, or a default constructed value if no
    * visitor was matched, or a syntax error occurred.
    */
-  template <typename ReturnT = std::nullptr_t>
+  template <CSSSyntaxVisitorReturn ReturnT>
   constexpr ReturnT consumeComponentValue(
       CSSDelimiter delimiter,
       const CSSComponentValueVisitor<ReturnT> auto&... visitors)
     requires(CSSUniqueComponentValueVisitors<ReturnT, decltype(visitors)...>);
 
-  template <typename ReturnT = std::nullptr_t>
+  template <CSSSyntaxVisitorReturn ReturnT>
   constexpr ReturnT consumeComponentValue(
       const CSSComponentValueVisitor<ReturnT> auto&... visitors)
     requires(CSSUniqueComponentValueVisitors<ReturnT, decltype(visitors)...>);
-
-  /**
-   * Peek at the next component value without consuming it. The component value
-   * is provided to a passed in "visitor", typically a lambda which accepts the
-   * component value in a new scope. The visitor may read this component
-   * parameter into a higher-level data structure, and continue parsing within
-   * its scope using the same underlying CSSSyntaxParser.
-   *
-   * https://www.w3.org/TR/css-syntax-3/#consume-component-value
-   *
-   * @param <ReturnT> caller-specified return type of visitors. This type will
-   * be set to its default constructed state if consuming a component value with
-   * no matching visitors, or syntax error
-   * @param visitors A unique list of CSSComponentValueVisitor to be called on a
-   * match
-   * @param delimiter The expected delimeter to occur before the next component
-   * value
-   * @returns the visitor returned value, or a default constructed value if no
-   * visitor was matched, or a syntax error occurred.
-   */
-  template <typename ReturnT = std::nullptr_t>
-  constexpr ReturnT peekComponentValue(
-      CSSDelimiter delimiter,
-      const CSSComponentValueVisitor<ReturnT> auto&... visitors)
-    requires(CSSUniqueComponentValueVisitors<ReturnT, decltype(visitors)...>);
-
-  template <typename ReturnT = std::nullptr_t>
-  constexpr ReturnT peekComponentValue(
-      const CSSComponentValueVisitor<ReturnT> auto&... visitors)
-    requires(CSSUniqueComponentValueVisitors<ReturnT, decltype(visitors)...>);
-
   /**
    * The parser is considered finished when there are no more remaining tokens
    * to be processed
@@ -200,6 +184,59 @@ class CSSSyntaxParser {
     }
   }
 
+  /**
+   * Consume a delimiter, returning false if a required delimiter is not found.
+   */
+  constexpr bool consumeDelimiter(CSSDelimiter delimiter) {
+    if (delimiter == CSSDelimiter::None) {
+      return true;
+    }
+
+    bool hasWhiteSpace = peek().type() == CSSTokenType::WhiteSpace;
+    consumeWhitespace();
+
+    switch (delimiter) {
+      case CSSDelimiter::Comma:
+        if (peek().type() == CSSTokenType::Comma) {
+          consumeToken();
+          consumeWhitespace();
+          return true;
+        }
+        return false;
+      case CSSDelimiter::Whitespace:
+        return hasWhiteSpace;
+      case CSSDelimiter::OptionalWhitespace:
+        return true;
+      case CSSDelimiter::CommaOrWhitespace:
+        if (peek().type() == CSSTokenType::Comma) {
+          consumeToken();
+          consumeWhitespace();
+          return true;
+        }
+        return hasWhiteSpace;
+      case CSSDelimiter::Solidus:
+        if (peek().type() == CSSTokenType::Delim &&
+            peek().stringValue() == "/") {
+          consumeToken();
+          consumeWhitespace();
+          return true;
+        }
+        return false;
+      case CSSDelimiter::SolidusOrWhitespace:
+        if (peek().type() == CSSTokenType::Delim &&
+            peek().stringValue() == "/") {
+          consumeToken();
+          consumeWhitespace();
+          return true;
+        }
+        return hasWhiteSpace;
+      case CSSDelimiter::None:
+        return true;
+    }
+
+    return false;
+  }
+
  private:
   constexpr CSSSyntaxParser(CSSSyntaxParser& parser, CSSTokenType terminator)
       : tokenizer_{parser.tokenizer_},
@@ -226,7 +263,9 @@ class CSSSyntaxParser {
   CSSTokenType terminator_{CSSTokenType::EndOfFile};
 };
 
-template <typename ReturnT, CSSComponentValueVisitor<ReturnT>... VisitorsT>
+template <
+    CSSSyntaxVisitorReturn ReturnT,
+    CSSComponentValueVisitor<ReturnT>... VisitorsT>
 struct CSSComponentValueVisitorDispatcher {
   CSSSyntaxParser& parser;
 
@@ -234,7 +273,7 @@ struct CSSComponentValueVisitorDispatcher {
       CSSDelimiter delimiter,
       const VisitorsT&... visitors) {
     auto originalParser = parser;
-    if (!consumeDelimiter(delimiter)) {
+    if (!parser.consumeDelimiter(delimiter)) {
       parser = originalParser;
       return {};
     }
@@ -275,69 +314,8 @@ struct CSSComponentValueVisitorDispatcher {
         break;
     }
 
-    return ReturnT{};
-  }
-
-  /**
-   * Consume a delimiter, returning false if a required delimiter is not found.
-   */
-  constexpr bool consumeDelimiter(CSSDelimiter delimiter) {
-    if (delimiter == CSSDelimiter::None) {
-      return true;
-    }
-
-    bool hasWhiteSpace = parser.peek().type() == CSSTokenType::WhiteSpace;
-    parser.consumeWhitespace();
-
-    switch (delimiter) {
-      case CSSDelimiter::Comma:
-        if (parser.peek().type() == CSSTokenType::Comma) {
-          parser.consumeToken();
-          parser.consumeWhitespace();
-          return true;
-        }
-        return false;
-      case CSSDelimiter::Whitespace:
-        return hasWhiteSpace;
-      case CSSDelimiter::OptionalWhitespace:
-        return true;
-      case CSSDelimiter::CommaOrWhitespace:
-        if (parser.peek().type() == CSSTokenType::Comma) {
-          parser.consumeToken();
-          parser.consumeWhitespace();
-          return true;
-        }
-        return hasWhiteSpace;
-      case CSSDelimiter::Solidus:
-        if (parser.peek().type() == CSSTokenType::Delim &&
-            parser.peek().stringValue() == "/") {
-          parser.consumeToken();
-          parser.consumeWhitespace();
-          return true;
-        }
-        return false;
-      case CSSDelimiter::SolidusOrWhitespace:
-        if (parser.peek().type() == CSSTokenType::Delim &&
-            parser.peek().stringValue() == "/") {
-          parser.consumeToken();
-          parser.consumeWhitespace();
-          return true;
-        }
-        return hasWhiteSpace;
-      case CSSDelimiter::None:
-        return true;
-    }
-
-    return false;
-  }
-
-  constexpr ReturnT peekComponentValue(
-      CSSDelimiter delimiter,
-      const VisitorsT&... visitors) {
-    auto originalParser = parser;
-    auto ret = consumeComponentValue(delimiter, visitors...);
     parser = originalParser;
-    return ret;
+    return ReturnT{};
   }
 
   constexpr std::optional<ReturnT> visitFunction(
@@ -357,7 +335,8 @@ struct CSSComponentValueVisitorDispatcher {
       auto functionValue = visitor({name}, blockParser);
       parser.advanceToBlockParser(blockParser);
       parser.consumeWhitespace();
-      if (parser.peek().type() == CSSTokenType::CloseParen) {
+      if (parser.peek().type() == CSSTokenType::CloseParen &&
+          functionValue != ReturnT{}) {
         parser.consumeToken();
         return functionValue;
       }
@@ -369,11 +348,6 @@ struct CSSComponentValueVisitorDispatcher {
   }
 
   constexpr std::optional<ReturnT> visitFunction() {
-    while (parser.peek().type() != CSSTokenType::CloseParen) {
-      parser.consumeToken();
-    }
-    parser.consumeToken();
-
     return {};
   }
 
@@ -388,7 +362,7 @@ struct CSSComponentValueVisitorDispatcher {
       auto blockValue = visitor({openBracketType}, blockParser);
       parser.advanceToBlockParser(blockParser);
       parser.consumeWhitespace();
-      if (parser.peek().type() == endToken) {
+      if (parser.peek().type() == endToken && blockValue != ReturnT{}) {
         parser.consumeToken();
         return blockValue;
       }
@@ -399,10 +373,6 @@ struct CSSComponentValueVisitorDispatcher {
   }
 
   constexpr std::optional<ReturnT> visitSimpleBlock(CSSTokenType endToken) {
-    while (parser.peek().type() != endToken) {
-      parser.consumeToken();
-    }
-    parser.consumeToken();
     return {};
   }
 
@@ -410,18 +380,20 @@ struct CSSComponentValueVisitorDispatcher {
       const CSSComponentValueVisitor<ReturnT> auto& visitor,
       const CSSComponentValueVisitor<ReturnT> auto&... rest) {
     if constexpr (CSSPreservedTokenVisitor<decltype(visitor), ReturnT>) {
-      return visitor(parser.consumeToken());
+      auto ret = visitor(parser.consumeToken());
+      if (ret != ReturnT{}) {
+        return ret;
+      }
     }
     return visitPreservedToken(rest...);
   }
 
   constexpr std::optional<ReturnT> visitPreservedToken() {
-    parser.consumeToken();
     return {};
   }
 };
 
-template <typename ReturnT>
+template <CSSSyntaxVisitorReturn ReturnT>
 constexpr ReturnT CSSSyntaxParser::consumeComponentValue(
     CSSDelimiter delimiter,
     const CSSComponentValueVisitor<ReturnT> auto&... visitors)
@@ -432,7 +404,7 @@ constexpr ReturnT CSSSyntaxParser::consumeComponentValue(
       .consumeComponentValue(delimiter, visitors...);
 }
 
-template <typename ReturnT>
+template <CSSSyntaxVisitorReturn ReturnT>
 constexpr ReturnT CSSSyntaxParser::consumeComponentValue(
     const CSSComponentValueVisitor<ReturnT> auto&... visitors)
   requires(CSSUniqueComponentValueVisitors<ReturnT, decltype(visitors)...>)
@@ -440,23 +412,4 @@ constexpr ReturnT CSSSyntaxParser::consumeComponentValue(
   return consumeComponentValue<ReturnT>(CSSDelimiter::None, visitors...);
 }
 
-template <typename ReturnT>
-constexpr ReturnT CSSSyntaxParser::peekComponentValue(
-    CSSDelimiter delimiter,
-    const CSSComponentValueVisitor<ReturnT> auto&... visitors)
-  requires(CSSUniqueComponentValueVisitors<ReturnT, decltype(visitors)...>)
-{
-  return CSSComponentValueVisitorDispatcher<ReturnT, decltype(visitors)...>{
-      *this}
-      .peekComponentValue(delimiter, visitors...);
-}
-
-template <typename ReturnT>
-constexpr ReturnT CSSSyntaxParser::peekComponentValue(
-    const CSSComponentValueVisitor<ReturnT> auto&... visitors)
-  requires(CSSUniqueComponentValueVisitors<ReturnT, decltype(visitors)...>)
-{
-  return peekComponentValue<ReturnT>(CSSDelimiter::None, visitors...);
-}
-
 } // namespace facebook::react
diff --git a/packages/react-native/ReactCommon/react/renderer/css/CSSValueParser.h b/packages/react-native/ReactCommon/react/renderer/css/CSSValueParser.h
index 7ce6935e7c690d..bfd9cd65566b44 100644
--- a/packages/react-native/ReactCommon/react/renderer/css/CSSValueParser.h
+++ b/packages/react-native/ReactCommon/react/renderer/css/CSSValueParser.h
@@ -35,6 +35,14 @@ class CSSValueParser {
       CSSDelimiter delimeter = CSSDelimiter::None) {
     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) {
@@ -75,14 +83,6 @@ class CSSValueParser {
       CSSValidDataTypeParser... RestParserT>
   constexpr ReturnT tryConsumePreservedToken(const CSSPreservedToken& token) {
     if constexpr (CSSPreservedTokenSink<ParserT>) {
-      auto currentParser = parser_;
-      if (auto ret = ParserT::consumePreservedToken(token, parser_)) {
-        return *ret;
-      }
-      parser_ = currentParser;
-    }
-
-    if constexpr (CSSSimplePreservedTokenSink<ParserT>) {
       if (auto ret = ParserT::consumePreservedToken(token)) {
         return *ret;
       }
@@ -141,6 +141,29 @@ class CSSValueParser {
     return tryConsumeFunctionBlock<ReturnT, RestParserT...>(func, blockParser);
   }
 
+  template <typename ReturnT>
+  constexpr ReturnT tryConsumeParser(CSSDelimiter /*delimeter*/) {
+    return {};
+  }
+
+  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 tryConsumeParser<ReturnT, RestParserT...>(delimeter);
+  }
+
   CSSSyntaxParser& parser_;
 };
 
diff --git a/packages/react-native/ReactCommon/react/renderer/css/tests/CSSCommaSeparatedListTest.cpp b/packages/react-native/ReactCommon/react/renderer/css/tests/CSSCommaSeparatedListTest.cpp
new file mode 100644
index 00000000000000..d96ef2f2073d7c
--- /dev/null
+++ b/packages/react-native/ReactCommon/react/renderer/css/tests/CSSCommaSeparatedListTest.cpp
@@ -0,0 +1,92 @@
+/*
+ * 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.
+ */
+
+#include <gtest/gtest.h>
+#include <react/renderer/css/CSSCommaSeparatedList.h>
+#include <react/renderer/css/CSSNumber.h>
+#include <react/renderer/css/CSSValueParser.h>
+
+namespace facebook::react {
+
+TEST(CSSCommaSeparatedList, empty_values) {
+  auto emptyValue = parseCSSProperty<CSSCommaSeparatedList<CSSNumber>>("");
+  EXPECT_TRUE(std::holds_alternative<std::monostate>(emptyValue));
+
+  auto whitespaceValue =
+      parseCSSProperty<CSSCommaSeparatedList<CSSNumber>>(" ");
+  EXPECT_TRUE(std::holds_alternative<std::monostate>(whitespaceValue));
+
+  auto commaValue = parseCSSProperty<CSSCommaSeparatedList<CSSNumber>>(",");
+}
+
+TEST(CSSCommaSeparatedList, single_value) {
+  auto simpleValue = parseCSSProperty<CSSCommaSeparatedList<CSSNumber>>("20");
+  EXPECT_TRUE(
+      std::holds_alternative<CSSCommaSeparatedList<CSSNumber>>(simpleValue));
+  EXPECT_EQ(std::get<CSSCommaSeparatedList<CSSNumber>>(simpleValue).size(), 1);
+  EXPECT_EQ(
+      std::get<CSSCommaSeparatedList<CSSNumber>>(simpleValue)[0].value, 20);
+
+  auto whitespaceValue =
+      parseCSSProperty<CSSCommaSeparatedList<CSSNumber>>(" 20 ");
+  EXPECT_TRUE(std::holds_alternative<CSSCommaSeparatedList<CSSNumber>>(
+      whitespaceValue));
+  EXPECT_EQ(
+      std::get<CSSCommaSeparatedList<CSSNumber>>(whitespaceValue).size(), 1);
+  EXPECT_EQ(
+      std::get<CSSCommaSeparatedList<CSSNumber>>(whitespaceValue)[0].value, 20);
+}
+
+TEST(CSSCommaSeparatedList, wrong_type) {
+  auto simpleValue = parseCSSProperty<CSSCommaSeparatedList<CSSNumber>>("20px");
+  EXPECT_TRUE(std::holds_alternative<std::monostate>(simpleValue));
+}
+
+TEST(CSSCommaSeparatedList, multiple_values) {
+  auto simpleValue =
+      parseCSSProperty<CSSCommaSeparatedList<CSSNumber>>("20, 30, 40");
+  EXPECT_TRUE(
+      std::holds_alternative<CSSCommaSeparatedList<CSSNumber>>(simpleValue));
+  EXPECT_EQ(std::get<CSSCommaSeparatedList<CSSNumber>>(simpleValue).size(), 3);
+  EXPECT_EQ(
+      std::get<CSSCommaSeparatedList<CSSNumber>>(simpleValue)[0].value, 20);
+  EXPECT_EQ(
+      std::get<CSSCommaSeparatedList<CSSNumber>>(simpleValue)[1].value, 30);
+  EXPECT_EQ(
+      std::get<CSSCommaSeparatedList<CSSNumber>>(simpleValue)[2].value, 40);
+
+  auto whitespaceValue =
+      parseCSSProperty<CSSCommaSeparatedList<CSSNumber>>(" 20 , 30 , 40 ");
+  EXPECT_TRUE(std::holds_alternative<CSSCommaSeparatedList<CSSNumber>>(
+      whitespaceValue));
+  EXPECT_EQ(
+      std::get<CSSCommaSeparatedList<CSSNumber>>(whitespaceValue).size(), 3);
+  EXPECT_EQ(
+      std::get<CSSCommaSeparatedList<CSSNumber>>(whitespaceValue)[0].value, 20);
+  EXPECT_EQ(
+      std::get<CSSCommaSeparatedList<CSSNumber>>(whitespaceValue)[1].value, 30);
+  EXPECT_EQ(
+      std::get<CSSCommaSeparatedList<CSSNumber>>(whitespaceValue)[2].value, 40);
+}
+
+TEST(CSSCommaSeparatedList, extra_tokens) {
+  auto extraTokensValue =
+      parseCSSProperty<CSSCommaSeparatedList<CSSNumber>>("20, 30, 40 50");
+  EXPECT_TRUE(std::holds_alternative<std::monostate>(extraTokensValue));
+}
+
+TEST(CSSCommaSeparatedList, extra_commas) {
+  auto prefixCommaValue =
+      parseCSSProperty<CSSCommaSeparatedList<CSSNumber>>(",20");
+  EXPECT_TRUE(std::holds_alternative<std::monostate>(prefixCommaValue));
+
+  auto suffixCommaValue =
+      parseCSSProperty<CSSCommaSeparatedList<CSSNumber>>("20,");
+  EXPECT_TRUE(std::holds_alternative<std::monostate>(suffixCommaValue));
+}
+
+} // namespace facebook::react
diff --git a/packages/react-native/ReactCommon/react/renderer/css/tests/CSSSyntaxParserTest.cpp b/packages/react-native/ReactCommon/react/renderer/css/tests/CSSSyntaxParserTest.cpp
index 86336b104de1e3..494d4fc464ea08 100644
--- a/packages/react-native/ReactCommon/react/renderer/css/tests/CSSSyntaxParserTest.cpp
+++ b/packages/react-native/ReactCommon/react/renderer/css/tests/CSSSyntaxParserTest.cpp
@@ -382,88 +382,6 @@ TEST(CSSSyntaxParser, unconsumed_simple_block_args) {
   EXPECT_EQ(funcValue, std::nullopt);
 }
 
-TEST(CSSSyntaxParser, peek_does_not_consume) {
-  CSSSyntaxParser parser{"foo()"};
-  auto funcValue = parser.peekComponentValue<std::optional<std::string_view>>(
-      [&](const CSSFunctionBlock& function, CSSSyntaxParser& /*blockParser*/) {
-        EXPECT_EQ(function.name, "foo");
-        return function.name;
-      });
-
-  EXPECT_EQ(funcValue, "foo");
-
-  auto funcValue2 = parser.peekComponentValue<std::optional<std::string_view>>(
-      [&](const CSSFunctionBlock& function, CSSSyntaxParser& /*blockParser*/) {
-        EXPECT_EQ(function.name, "foo");
-        return function.name;
-      });
-
-  EXPECT_EQ(funcValue2, "foo");
-
-  auto funcValue3 =
-      parser.consumeComponentValue<std::optional<std::string_view>>(
-          [&](const CSSFunctionBlock& function,
-              CSSSyntaxParser& /*blockParser*/) {
-            EXPECT_EQ(function.name, "foo");
-            return function.name;
-          });
-
-  EXPECT_EQ(funcValue3, "foo");
-
-  auto funcValue4 = parser.peekComponentValue<std::optional<std::string_view>>(
-      [&](const CSSFunctionBlock& function, CSSSyntaxParser& /*blockParser*/) {
-        EXPECT_EQ(function.name, "foo");
-        return function.name;
-      });
-
-  EXPECT_EQ(funcValue4, std::nullopt);
-}
-
-TEST(CSSSyntaxParser, preserved_token_without_visitor_consumed) {
-  CSSSyntaxParser parser{"foo bar"};
-
-  parser.consumeComponentValue();
-
-  auto identValue = parser.consumeComponentValue<std::string_view>(
-      CSSDelimiter::Whitespace, [](const CSSPreservedToken& token) {
-        EXPECT_EQ(token.type(), CSSTokenType::Ident);
-        EXPECT_EQ(token.stringValue(), "bar");
-        return token.stringValue();
-      });
-
-  EXPECT_EQ(identValue, "bar");
-}
-
-TEST(CSSSyntaxParser, function_without_visitor_consumed) {
-  CSSSyntaxParser parser{"foo(a, b, c) bar"};
-
-  parser.consumeComponentValue();
-
-  auto identValue = parser.consumeComponentValue<std::string_view>(
-      CSSDelimiter::Whitespace, [](const CSSPreservedToken& token) {
-        EXPECT_EQ(token.type(), CSSTokenType::Ident);
-        EXPECT_EQ(token.stringValue(), "bar");
-        return token.stringValue();
-      });
-
-  EXPECT_EQ(identValue, "bar");
-}
-
-TEST(CSSSyntaxParser, simple_block_without_visitor_consumed) {
-  CSSSyntaxParser parser{"{a foo(abc)} bar"};
-
-  parser.consumeComponentValue();
-
-  auto identValue = parser.consumeComponentValue<std::string_view>(
-      CSSDelimiter::Whitespace, [](const CSSPreservedToken& token) {
-        EXPECT_EQ(token.type(), CSSTokenType::Ident);
-        EXPECT_EQ(token.stringValue(), "bar");
-        return token.stringValue();
-      });
-
-  EXPECT_EQ(identValue, "bar");
-}
-
 TEST(CSSSyntaxParser, solidus_delimiter) {
   CSSSyntaxParser parser{"foo / bar"};
 
@@ -606,4 +524,39 @@ TEST(CSSSyntaxParser, delimeter_not_consumed_when_no_component_value) {
   EXPECT_TRUE(hasComma);
 }
 
+TEST(CSSSyntaxParser, component_value_not_consumed_on_visitor_failure) {
+  CSSSyntaxParser parser{"foo"};
+
+  bool visitor1Attempted = false;
+  bool visitor1Ret =
+      parser.consumeComponentValue<bool>([&](const CSSPreservedToken& token) {
+        EXPECT_EQ(token.stringValue(), "foo");
+        visitor1Attempted = true;
+        return false;
+      });
+
+  EXPECT_TRUE(visitor1Attempted);
+  EXPECT_FALSE(visitor1Ret);
+
+  bool visitor2Attempted = false;
+  parser.consumeComponentValue<bool>([&](const CSSPreservedToken& token) {
+    EXPECT_EQ(token.stringValue(), "foo");
+    visitor2Attempted = true;
+    return true;
+  });
+
+  EXPECT_TRUE(visitor2Attempted);
+  EXPECT_TRUE(visitor2Attempted);
+
+  bool visitor3Attempted = false;
+  bool visitor3Ret =
+      parser.consumeComponentValue<bool>([&](const CSSPreservedToken& token) {
+        visitor3Attempted = true;
+        return true;
+      });
+
+  EXPECT_FALSE(visitor3Attempted);
+  EXPECT_FALSE(visitor3Ret);
+}
+
 } // namespace facebook::react
diff --git a/packages/react-native/ReactCommon/react/renderer/css/tests/CSSValueParserTest.cpp b/packages/react-native/ReactCommon/react/renderer/css/tests/CSSValueParserTest.cpp
new file mode 100644
index 00000000000000..b2384abbb94ca5
--- /dev/null
+++ b/packages/react-native/ReactCommon/react/renderer/css/tests/CSSValueParserTest.cpp
@@ -0,0 +1,66 @@
+/*
+ * 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.
+ */
+
+#include <gtest/gtest.h>
+#include <react/renderer/css/CSSDataType.h>
+#include <react/renderer/css/CSSNumber.h>
+#include <react/renderer/css/CSSValueParser.h>
+
+namespace facebook::react {
+
+struct ConsumeDataType {
+  float number{};
+
+  constexpr bool operator==(const ConsumeDataType& other) const = default;
+};
+
+template <>
+struct CSSDataTypeParser<ConsumeDataType> {
+  constexpr static std::optional<ConsumeDataType> consume(
+      CSSSyntaxParser& parser) {
+    auto val = parseNextCSSValue<CSSNumber>(parser);
+    if (std::holds_alternative<CSSNumber>(val)) {
+      return ConsumeDataType{std::get<CSSNumber>(val).value};
+    }
+
+    return {};
+  }
+};
+
+static_assert(CSSDataType<ConsumeDataType>);
+
+TEST(CSSValueParser, consume_multiple_with_delimeter) {
+  CSSSyntaxParser parser{"1 2, 3, 4 / 5"};
+
+  auto next = parseNextCSSValue<ConsumeDataType>(parser);
+  EXPECT_TRUE(std::holds_alternative<ConsumeDataType>(next));
+  EXPECT_EQ(std::get<ConsumeDataType>(next).number, 1);
+
+  next = parseNextCSSValue<ConsumeDataType>(parser, CSSDelimiter::None);
+  EXPECT_FALSE(std::holds_alternative<ConsumeDataType>(next));
+
+  next = parseNextCSSValue<ConsumeDataType>(parser, CSSDelimiter::Whitespace);
+  EXPECT_TRUE(std::holds_alternative<ConsumeDataType>(next));
+  EXPECT_EQ(std::get<ConsumeDataType>(next).number, 2);
+
+  next = parseNextCSSValue<ConsumeDataType>(parser, CSSDelimiter::Comma);
+  EXPECT_TRUE(std::holds_alternative<ConsumeDataType>(next));
+  EXPECT_EQ(std::get<ConsumeDataType>(next).number, 3);
+
+  next = parseNextCSSValue<ConsumeDataType>(parser, CSSDelimiter::Comma);
+  EXPECT_TRUE(std::holds_alternative<ConsumeDataType>(next));
+  EXPECT_EQ(std::get<ConsumeDataType>(next).number, 4);
+
+  next = parseNextCSSValue<ConsumeDataType>(parser, CSSDelimiter::Solidus);
+  EXPECT_TRUE(std::holds_alternative<ConsumeDataType>(next));
+  EXPECT_EQ(std::get<ConsumeDataType>(next).number, 5);
+
+  next = parseNextCSSValue<ConsumeDataType>(parser);
+  EXPECT_FALSE(std::holds_alternative<ConsumeDataType>(next));
+}
+
+} // namespace facebook::react