CSSCommaSeparatedList (#48987)

Summary:

Adds a data type parser for a variable number of values of a given single data type (at least 1).

E.g. `CSSCommaSeparatedList<CSSShadow>` will represent the syntax of `<shadow>#` (ie the value produced by box-shadow).

Changelog: [internal]

Reviewed By: lenaic

Differential Revision: D68738165

Author: NickGerleman

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/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