Skip to content

Replace CSSSyntaxParser with CSSValueParser in data type sinks #55754

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
NickGerleman wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Replace CSSSyntaxParser with CSSValueParser in data type sinks #55754

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ffb95be
Unify CSSCompoundDataType with its variant
NickGerleman Feb 25, 2026
c3236d7
Replace CSSSyntaxParser with CSSValueParser in data type sinks
NickGerleman Feb 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ...act-native/ReactCommon/react/renderer/components/view/BackgroundImagePropsConversions.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -477,7 +477,7 @@ void fromCSSColorStop(
}

std::optional<BackgroundImage> fromCSSBackgroundImage(
const CSSBackgroundImageVariant& cssBackgroundImage) {
const CSSBackgroundImage& cssBackgroundImage) {
if (std::holds_alternative<CSSLinearGradientFunction>(cssBackgroundImage)) {
const auto& gradient =
std::get<CSSLinearGradientFunction>(cssBackgroundImage);
Expand Down
4 changes: 2 additions & 2 deletions packages/react-native/ReactCommon/react/renderer/components/view/FilterPropsConversions.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ parseProcessedFilter(const PropsParserContext &context, const RawValue &value, s
result = filter;
}

inline FilterType filterTypeFromVariant(const CSSFilterFunctionVariant &filter)
inline FilterType filterTypeFromVariant(const CSSFilterFunction &filter)
{
return std::visit(
[](auto &&filter) -> FilterType {
Expand Down Expand Up @@ -148,7 +148,7 @@ inline FilterType filterTypeFromVariant(const CSSFilterFunctionVariant &filter)
filter);
}

inline std::optional<FilterFunction> fromCSSFilter(const CSSFilterFunctionVariant &cssFilter)
inline std::optional<FilterFunction> fromCSSFilter(const CSSFilterFunction &cssFilter)
{
return std::visit(
[&](auto &&filter) -> std::optional<FilterFunction> {
Expand Down
2 changes: 1 addition & 1 deletion packages/react-native/ReactCommon/react/renderer/components/view/conversions.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -550,7 +550,7 @@ inline ValueUnit cssLengthPercentageToValueUnit(const std::variant<CSSLength, CS
}
}

inline std::optional<TransformOperation> fromCSSTransformFunction(const CSSTransformFunctionVariant &cssTransform)
inline std::optional<TransformOperation> fromCSSTransformFunction(const CSSTransformFunction &cssTransform)
{
constexpr auto Zero = ValueUnit(0, UnitType::Point);
constexpr auto One = ValueUnit(1, UnitType::Point);
Expand Down
242 changes: 110 additions & 132 deletions packages/react-native/ReactCommon/react/renderer/css/CSSBackgroundImage.h
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/react-native/ReactCommon/react/renderer/css/CSSColor.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ struct CSSDataTypeParser<CSSColor> {
return {};
}

static constexpr auto consumeFunctionBlock(const CSSFunctionBlock &func, CSSSyntaxParser &parser)
static constexpr auto consumeFunctionBlock(const CSSFunctionBlock &func, CSSValueParser &parser)
-> std::optional<CSSColor>
{
return parseCSSColorFunction<CSSColor>(func.name, parser);
Expand Down
77 changes: 38 additions & 39 deletions packages/react-native/ReactCommon/react/renderer/css/CSSColorFunction.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@
#include <react/renderer/css/CSSAngle.h>
#include <react/renderer/css/CSSNumber.h>
#include <react/renderer/css/CSSPercentage.h>
#include <react/renderer/css/CSSSyntaxParser.h>
#include <react/renderer/css/CSSValueParser.h>
#include <react/utils/PackTraits.h>
#include <react/utils/fnv1a.h>
Expand Down Expand Up @@ -154,16 +153,19 @@ constexpr std::optional<float> normalizeComponent(
}

template <CSSDataType... FirstComponentAllowedTypesT>
constexpr bool isLegacyColorFunction(CSSSyntaxParser &parser)
constexpr bool isLegacyColorFunction(CSSValueParser &parser)
{
auto lookahead = parser;
auto next = parseNextCSSValue<FirstComponentAllowedTypesT...>(lookahead);
auto saved = parser.syntaxParser();
auto next = parser.parseNextValue<FirstComponentAllowedTypesT...>();
if (std::holds_alternative<std::monostate>(next)) {
parser.syntaxParser() = saved;
return false;
}

return lookahead.consumeComponentValue<bool>(
CSSDelimiter::OptionalWhitespace, [](CSSPreservedToken token) { return token.type() == CSSTokenType::Comma; });
parser.syntaxParser().consumeWhitespace();
bool isLegacy = parser.syntaxParser().peek().type() == CSSTokenType::Comma;
parser.syntaxParser() = saved;
return isLegacy;
}

/**
Expand All @@ -172,29 +174,29 @@ constexpr bool isLegacyColorFunction(CSSSyntaxParser &parser)
* https://www.w3.org/TR/css-color-4/#typedef-legacy-rgb-syntax
*/
template <typename CSSColor>
constexpr std::optional<CSSColor> parseLegacyRgbFunction(CSSSyntaxParser &parser)
constexpr std::optional<CSSColor> parseLegacyRgbFunction(CSSValueParser &parser)
{
auto rawRed = parseNextCSSValue<CSSNumber, CSSPercentage>(parser);
auto rawRed = parser.parseNextValue<CSSNumber, CSSPercentage>();
bool usesNumber = std::holds_alternative<CSSNumber>(rawRed);

auto red = normalizeComponent(rawRed, 255.0f);
if (!red.has_value()) {
return {};
}

auto green = usesNumber ? normalizeNumberComponent(parseNextCSSValue<CSSNumber>(parser, CSSDelimiter::Comma))
: normalizeComponent(parseNextCSSValue<CSSPercentage>(parser, CSSDelimiter::Comma), 255.0f);
auto green = usesNumber ? normalizeNumberComponent(parser.parseNextValue<CSSNumber>(CSSDelimiter::Comma))
: normalizeComponent(parser.parseNextValue<CSSPercentage>(CSSDelimiter::Comma), 255.0f);
if (!green.has_value()) {
return {};
}

auto blue = usesNumber ? normalizeNumberComponent(parseNextCSSValue<CSSNumber>(parser, CSSDelimiter::Comma))
: normalizeComponent(parseNextCSSValue<CSSPercentage>(parser, CSSDelimiter::Comma), 255.0f);
auto blue = usesNumber ? normalizeNumberComponent(parser.parseNextValue<CSSNumber>(CSSDelimiter::Comma))
: normalizeComponent(parser.parseNextValue<CSSPercentage>(CSSDelimiter::Comma), 255.0f);
if (!blue.has_value()) {
return {};
}

auto alpha = normalizeComponent(parseNextCSSValue<CSSNumber, CSSPercentage>(parser, CSSDelimiter::Comma), 1.0f);
auto alpha = normalizeComponent(parser.parseNextValue<CSSNumber, CSSPercentage>(CSSDelimiter::Comma), 1.0f);

return CSSColor{
.r = clamp255Component(*red),
Expand All @@ -210,26 +212,25 @@ constexpr std::optional<CSSColor> parseLegacyRgbFunction(CSSSyntaxParser &parser
* https://www.w3.org/TR/css-color-4/#typedef-modern-rgb-syntax
*/
template <typename CSSColor>
constexpr std::optional<CSSColor> parseModernRgbFunction(CSSSyntaxParser &parser)
constexpr std::optional<CSSColor> parseModernRgbFunction(CSSValueParser &parser)
{
auto red = normalizeComponent(parseNextCSSValue<CSSNumber, CSSPercentage>(parser), 255.0f);
auto red = normalizeComponent(parser.parseNextValue<CSSNumber, CSSPercentage>(), 255.0f);
if (!red.has_value()) {
return {};
}

auto green =
normalizeComponent(parseNextCSSValue<CSSNumber, CSSPercentage>(parser, CSSDelimiter::Whitespace), 255.0f);
auto green = normalizeComponent(parser.parseNextValue<CSSNumber, CSSPercentage>(CSSDelimiter::Whitespace), 255.0f);
if (!green.has_value()) {
return {};
}

auto blue = normalizeComponent(parseNextCSSValue<CSSNumber, CSSPercentage>(parser, CSSDelimiter::Whitespace), 255.0f);
auto blue = normalizeComponent(parser.parseNextValue<CSSNumber, CSSPercentage>(CSSDelimiter::Whitespace), 255.0f);
if (!blue.has_value()) {
return {};
}

auto alpha =
normalizeComponent(parseNextCSSValue<CSSNumber, CSSPercentage>(parser, CSSDelimiter::SolidusOrWhitespace), 1.0f);
normalizeComponent(parser.parseNextValue<CSSNumber, CSSPercentage>(CSSDelimiter::SolidusOrWhitespace), 1.0f);

return CSSColor{
.r = clamp255Component(*red),
Expand All @@ -244,7 +245,7 @@ constexpr std::optional<CSSColor> parseModernRgbFunction(CSSSyntaxParser &parser
* https://www.w3.org/TR/css-color-4/#funcdef-rgb
*/
template <typename CSSColor>
constexpr std::optional<CSSColor> parseRgbFunction(CSSSyntaxParser &parser)
constexpr std::optional<CSSColor> parseRgbFunction(CSSValueParser &parser)
{
if (isLegacyColorFunction<CSSNumber, CSSPercentage>(parser)) {
return parseLegacyRgbFunction<CSSColor>(parser);
Expand All @@ -259,24 +260,24 @@ constexpr std::optional<CSSColor> parseRgbFunction(CSSSyntaxParser &parser)
* https://www.w3.org/TR/css-color-4/#typedef-legacy-hsl-syntax
*/
template <typename CSSColor>
inline std::optional<CSSColor> parseLegacyHslFunction(CSSSyntaxParser &parser)
inline std::optional<CSSColor> parseLegacyHslFunction(CSSValueParser &parser)
{
auto h = normalizeHueComponent(parseNextCSSValue<CSSNumber, CSSAngle>(parser));
auto h = normalizeHueComponent(parser.parseNextValue<CSSNumber, CSSAngle>());
if (!h.has_value()) {
return {};
}

auto s = normalizeComponent(parseNextCSSValue<CSSPercentage>(parser, CSSDelimiter::Comma), 100.0f);
auto s = normalizeComponent(parser.parseNextValue<CSSPercentage>(CSSDelimiter::Comma), 100.0f);
if (!s.has_value()) {
return {};
}

auto l = normalizeComponent(parseNextCSSValue<CSSPercentage>(parser, CSSDelimiter::Comma), 100.0f);
auto l = normalizeComponent(parser.parseNextValue<CSSPercentage>(CSSDelimiter::Comma), 100.0f);
if (!l.has_value()) {
return {};
}

auto a = normalizeComponent(parseNextCSSValue<CSSNumber, CSSPercentage>(parser, CSSDelimiter::Comma), 1.0f);
auto a = normalizeComponent(parser.parseNextValue<CSSNumber, CSSPercentage>(CSSDelimiter::Comma), 1.0f);

auto [r, g, b] = hslToRgb(*h, *s, *l);

Expand All @@ -293,25 +294,24 @@ inline std::optional<CSSColor> parseLegacyHslFunction(CSSSyntaxParser &parser)
* it is valid. https://www.w3.org/TR/css-color-4/#typedef-modern-hsl-syntax
*/
template <typename CSSColor>
inline std::optional<CSSColor> parseModernHslFunction(CSSSyntaxParser &parser)
inline std::optional<CSSColor> parseModernHslFunction(CSSValueParser &parser)
{
auto h = normalizeHueComponent(parseNextCSSValue<CSSNumber, CSSAngle>(parser));
auto h = normalizeHueComponent(parser.parseNextValue<CSSNumber, CSSAngle>());
if (!h.has_value()) {
return {};
}

auto s = normalizeComponent(parseNextCSSValue<CSSNumber, CSSPercentage>(parser, CSSDelimiter::Whitespace), 100.0f);
auto s = normalizeComponent(parser.parseNextValue<CSSNumber, CSSPercentage>(CSSDelimiter::Whitespace), 100.0f);
if (!s.has_value()) {
return {};
}

auto l = normalizeComponent(parseNextCSSValue<CSSNumber, CSSPercentage>(parser, CSSDelimiter::Whitespace), 100.0f);
auto l = normalizeComponent(parser.parseNextValue<CSSNumber, CSSPercentage>(CSSDelimiter::Whitespace), 100.0f);
if (!l.has_value()) {
return {};
}

auto a =
normalizeComponent(parseNextCSSValue<CSSNumber, CSSPercentage>(parser, CSSDelimiter::SolidusOrWhitespace), 1.0f);
auto a = normalizeComponent(parser.parseNextValue<CSSNumber, CSSPercentage>(CSSDelimiter::SolidusOrWhitespace), 1.0f);

auto [r, g, b] = hslToRgb(*h, *s, *l);

Expand All @@ -328,7 +328,7 @@ inline std::optional<CSSColor> parseModernHslFunction(CSSSyntaxParser &parser)
* https://www.w3.org/TR/css-color-4/#funcdef-hsl
*/
template <typename CSSColor>
inline std::optional<CSSColor> parseHslFunction(CSSSyntaxParser &parser)
inline std::optional<CSSColor> parseHslFunction(CSSValueParser &parser)
{
if (isLegacyColorFunction<CSSNumber, CSSAngle>(parser)) {
return parseLegacyHslFunction<CSSColor>(parser);
Expand All @@ -342,25 +342,24 @@ inline std::optional<CSSColor> parseHslFunction(CSSSyntaxParser &parser)
* https://www.w3.org/TR/css-color-4/#funcdef-hwb
*/
template <typename CSSColor>
inline std::optional<CSSColor> parseHwbFunction(CSSSyntaxParser &parser)
inline std::optional<CSSColor> parseHwbFunction(CSSValueParser &parser)
{
auto h = normalizeHueComponent(parseNextCSSValue<CSSNumber, CSSAngle>(parser));
auto h = normalizeHueComponent(parser.parseNextValue<CSSNumber, CSSAngle>());
if (!h.has_value()) {
return {};
}

auto w = normalizeComponent(parseNextCSSValue<CSSNumber, CSSPercentage>(parser, CSSDelimiter::Whitespace), 100.0f);
auto w = normalizeComponent(parser.parseNextValue<CSSNumber, CSSPercentage>(CSSDelimiter::Whitespace), 100.0f);
if (!w.has_value()) {
return {};
}

auto b = normalizeComponent(parseNextCSSValue<CSSNumber, CSSPercentage>(parser, CSSDelimiter::Whitespace), 100.0f);
auto b = normalizeComponent(parser.parseNextValue<CSSNumber, CSSPercentage>(CSSDelimiter::Whitespace), 100.0f);
if (!b.has_value()) {
return {};
}

auto a =
normalizeComponent(parseNextCSSValue<CSSNumber, CSSPercentage>(parser, CSSDelimiter::SolidusOrWhitespace), 1.0f);
auto a = normalizeComponent(parser.parseNextValue<CSSNumber, CSSPercentage>(CSSDelimiter::SolidusOrWhitespace), 1.0f);

auto [red, green, blue] = hwbToRgb(*h, *w, *b);

Expand All @@ -380,7 +379,7 @@ inline std::optional<CSSColor> parseHwbFunction(CSSSyntaxParser &parser)
* https://www.w3.org/TR/css-color-4/#typedef-color-function
*/
template <typename CSSColor>
constexpr std::optional<CSSColor> parseCSSColorFunction(std::string_view colorFunction, CSSSyntaxParser &parser)
constexpr std::optional<CSSColor> parseCSSColorFunction(std::string_view colorFunction, CSSValueParser &parser)
{
switch (fnv1aLowercase(colorFunction)) {
// CSS Color Module Level 4 treats the alpha variants of functions as the
Expand Down
40 changes: 23 additions & 17 deletions packages/react-native/ReactCommon/react/renderer/css/CSSCompoundDataType.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,24 @@

namespace facebook::react {

namespace detail {
struct CSSCompoundDataTypeMarker {};
} // namespace detail

/**
* Allows grouping together multiple possible CSSDataType to parse.
* CSSCompoundDataType is a std::variant of the allowed types, serving both
* as storage and for template parameter deduction during parsing.
*/
template <CSSDataType... AllowedTypesT>
struct CSSCompoundDataType : public detail::CSSCompoundDataTypeMarker {};
using CSSCompoundDataType = std::variant<AllowedTypesT...>;

namespace detail {
template <typename T>
struct is_variant_of_data_types : std::false_type {};

template <CSSDataType... Ts>
struct is_variant_of_data_types<std::variant<Ts...>> : std::true_type {};
} // namespace detail

template <typename T>
concept CSSValidCompoundDataType = std::is_base_of_v<detail::CSSCompoundDataTypeMarker, T>;
concept CSSValidCompoundDataType = detail::is_variant_of_data_types<T>::value;

/**
* A concrete data type, or a compound data type which represents multiple other
Expand All @@ -38,40 +44,40 @@ template <CSSMaybeCompoundDataType... AllowedTypesT>
struct merge_data_types;

template <CSSDataType... AlllowedTypes1T, CSSDataType... AlllowedTypes2T, CSSMaybeCompoundDataType... RestT>
struct merge_data_types<CSSCompoundDataType<AlllowedTypes1T...>, CSSCompoundDataType<AlllowedTypes2T...>, RestT...> {
using type = typename merge_data_types<CSSCompoundDataType<AlllowedTypes1T..., AlllowedTypes2T...>, RestT...>::type;
struct merge_data_types<std::variant<AlllowedTypes1T...>, std::variant<AlllowedTypes2T...>, RestT...> {
using type = typename merge_data_types<std::variant<AlllowedTypes1T..., AlllowedTypes2T...>, RestT...>::type;
};

template <CSSDataType AlllowedType1T, CSSDataType... AlllowedTypes2T, CSSMaybeCompoundDataType... RestT>
struct merge_data_types<AlllowedType1T, CSSCompoundDataType<AlllowedTypes2T...>, RestT...> {
using type = typename merge_data_types<CSSCompoundDataType<AlllowedType1T, AlllowedTypes2T...>, RestT...>::type;
struct merge_data_types<AlllowedType1T, std::variant<AlllowedTypes2T...>, RestT...> {
using type = typename merge_data_types<std::variant<AlllowedType1T, AlllowedTypes2T...>, RestT...>::type;
};

template <CSSDataType AlllowedType2T, CSSDataType... AlllowedTypes1T, CSSMaybeCompoundDataType... RestT>
struct merge_data_types<CSSCompoundDataType<AlllowedTypes1T...>, AlllowedType2T, RestT...> {
using type = typename merge_data_types<CSSCompoundDataType<AlllowedTypes1T..., AlllowedType2T>, RestT...>::type;
struct merge_data_types<std::variant<AlllowedTypes1T...>, AlllowedType2T, RestT...> {
using type = typename merge_data_types<std::variant<AlllowedTypes1T..., AlllowedType2T>, RestT...>::type;
};

template <CSSDataType AlllowedType1T, CSSDataType AlllowedType2T, CSSMaybeCompoundDataType... RestT>
struct merge_data_types<AlllowedType1T, AlllowedType2T, RestT...> {
using type = typename merge_data_types<CSSCompoundDataType<AlllowedType1T, AlllowedType2T>, RestT...>::type;
using type = typename merge_data_types<std::variant<AlllowedType1T, AlllowedType2T>, RestT...>::type;
};

template <CSSDataType... AllowedTypesT>
struct merge_data_types<CSSCompoundDataType<AllowedTypesT...>> {
using type = CSSCompoundDataType<AllowedTypesT...>;
struct merge_data_types<std::variant<AllowedTypesT...>> {
using type = std::variant<AllowedTypesT...>;
};

template <CSSDataType AllowedTypeT>
struct merge_data_types<AllowedTypeT> {
using type = CSSCompoundDataType<AllowedTypeT>;
using type = std::variant<AllowedTypeT>;
};

template <typename... T>
struct merge_variant;

template <CSSDataType... AllowedTypesT, typename... RestT>
struct merge_variant<CSSCompoundDataType<AllowedTypesT...>, RestT...> {
struct merge_variant<std::variant<AllowedTypesT...>, RestT...> {
using type = std::variant<RestT..., AllowedTypesT...>;
};
} // namespace detail
Expand Down
Loading
Loading