Fix missing handling of "inset" CSS Keyword

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

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

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;

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 {};