Wire native CSS parsing for fontVariant (#55684)

Summary:
Pull Request resolved: #55684

Gate `processFontVariant` behind `enableNativeCSSParsing()`. When the flag is on, CSS font-variant strings like `"small-caps oldstyle-nums"` are parsed natively using the existing CSS font-variant parser instead of being preprocessed in JS.

Also removes `react_native_expect(false)` hard error on unknown font variant values, replacing it with a graceful skip.

Changelog: [Internal]

Reviewed By: jorge-cab

Differential Revision: D94052733

fbshipit-source-id: 160f8d97723e42aa9d63b868df84dcd68fca9a2f

Author: NickGerleman

packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -71,6 +71,10 @@ export const aspectRatioAttribute: AnyAttributeType = nativeCSSParsing
   ? true
   : {process: processAspectRatio};
 
+export const fontVariantAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processFontVariant};
+
 const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /**
    * Layout
@@ -252,7 +256,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   fontFamily: true,
   fontSize: true,
   fontStyle: true,
-  fontVariant: {process: processFontVariant},
+  fontVariant: fontVariantAttribute,
   fontWeight: true,
   includeFontPadding: true,
   letterSpacing: true,

packages/react-native/ReactCommon/react/renderer/attributedstring/conversions.h

@@ -9,6 +9,7 @@
 
 #include <folly/dynamic.h>
 #include <react/debug/react_native_expect.h>
+#include <react/featureflags/ReactNativeFeatureFlags.h>
 #include <react/renderer/attributedstring/AttributedString.h>
 #include <react/renderer/attributedstring/ParagraphAttributes.h>
 #include <react/renderer/attributedstring/TextAttributes.h>
@@ -21,6 +22,8 @@
 #include <react/renderer/core/conversions.h>
 #include <react/renderer/core/graphicsConversions.h>
 #include <react/renderer/core/propsConversions.h>
+#include <react/renderer/css/CSSFontVariant.h>
+#include <react/renderer/css/CSSValueParser.h>
 #include <unordered_map>
 
 #ifdef RN_SERIALIZABLE_STATE
@@ -317,7 +320,66 @@ inline std::string toString(const FontStyle &fontStyle)
   return "normal";
 }
 
-inline void fromRawValue(const PropsParserContext &context, const RawValue &value, FontVariant &result)
+inline std::optional<FontVariant> fontVariantFromCSSFontVariant(CSSFontVariant cssVariant)
+{
+  switch (cssVariant) {
+    case CSSFontVariant::SmallCaps:
+      return FontVariant::SmallCaps;
+    case CSSFontVariant::OldstyleNums:
+      return FontVariant::OldstyleNums;
+    case CSSFontVariant::LiningNums:
+      return FontVariant::LiningNums;
+    case CSSFontVariant::TabularNums:
+      return FontVariant::TabularNums;
+    case CSSFontVariant::ProportionalNums:
+      return FontVariant::ProportionalNums;
+    case CSSFontVariant::StylisticOne:
+      return FontVariant::StylisticOne;
+    case CSSFontVariant::StylisticTwo:
+      return FontVariant::StylisticTwo;
+    case CSSFontVariant::StylisticThree:
+      return FontVariant::StylisticThree;
+    case CSSFontVariant::StylisticFour:
+      return FontVariant::StylisticFour;
+    case CSSFontVariant::StylisticFive:
+      return FontVariant::StylisticFive;
+    case CSSFontVariant::StylisticSix:
+      return FontVariant::StylisticSix;
+    case CSSFontVariant::StylisticSeven:
+      return FontVariant::StylisticSeven;
+    case CSSFontVariant::StylisticEight:
+      return FontVariant::StylisticEight;
+    case CSSFontVariant::StylisticNine:
+      return FontVariant::StylisticNine;
+    case CSSFontVariant::StylisticTen:
+      return FontVariant::StylisticTen;
+    case CSSFontVariant::StylisticEleven:
+      return FontVariant::StylisticEleven;
+    case CSSFontVariant::StylisticTwelve:
+      return FontVariant::StylisticTwelve;
+    case CSSFontVariant::StylisticThirteen:
+      return FontVariant::StylisticThirteen;
+    case CSSFontVariant::StylisticFourteen:
+      return FontVariant::StylisticFourteen;
+    case CSSFontVariant::StylisticFifteen:
+      return FontVariant::StylisticFifteen;
+    case CSSFontVariant::StylisticSixteen:
+      return FontVariant::StylisticSixteen;
+    case CSSFontVariant::StylisticSeventeen:
+      return FontVariant::StylisticSeventeen;
+    case CSSFontVariant::StylisticEighteen:
+      return FontVariant::StylisticEighteen;
+    case CSSFontVariant::StylisticNineteen:
+      return FontVariant::StylisticNineteen;
+    case CSSFontVariant::StylisticTwenty:
+      return FontVariant::StylisticTwenty;
+    default:
+      // Ligature variants (CommonLigatures, etc.) have no FontVariant equivalent
+      return std::nullopt;
+  }
+}
+
+inline void parseProcessedFontVariant(const PropsParserContext &context, const RawValue &value, FontVariant &result)
 {
   result = FontVariant::Default;
   react_native_expect(value.hasType<std::vector<std::string>>());
@@ -376,14 +438,47 @@ inline void fromRawValue(const PropsParserContext &context, const RawValue &valu
         result = (FontVariant)((int)result | (int)FontVariant::StylisticTwenty);
       } else {
         LOG(ERROR) << "Unsupported FontVariant value: " << item;
-        react_native_expect(false);
       }
     }
   } else {
     LOG(ERROR) << "Unsupported FontVariant type";
   }
 }
 
+inline void parseUnprocessedFontVariantString(const std::string &value, FontVariant &result)
+{
+  auto fontVariantList = parseCSSProperty<CSSFontVariantList>(value);
+  if (!std::holds_alternative<CSSFontVariantList>(fontVariantList)) {
+    result = FontVariant::Default;
+    return;
+  }
+
+  result = FontVariant::Default;
+  for (const auto &cssVariant : std::get<CSSFontVariantList>(fontVariantList)) {
+    if (auto fv = fontVariantFromCSSFontVariant(cssVariant)) {
+      result = (FontVariant)((int)result | (int)*fv);
+    }
+  }
+}
+
+inline void parseUnprocessedFontVariant(const PropsParserContext &context, const RawValue &value, FontVariant &result)
+{
+  if (value.hasType<std::string>()) {
+    parseUnprocessedFontVariantString((std::string)value, result);
+  } else {
+    parseProcessedFontVariant(context, value, result);
+  }
+}
+
+inline void fromRawValue(const PropsParserContext &context, const RawValue &value, FontVariant &result)
+{
+  if (ReactNativeFeatureFlags::enableNativeCSSParsing()) {
+    parseUnprocessedFontVariant(context, value, result);
+  } else {
+    parseProcessedFontVariant(context, value, result);
+  }
+}
+
 inline std::string toString(const FontVariant &fontVariant)
 {
   auto result = std::string{};

packages/react-native/ReactCommon/react/renderer/components/view/tests/ConversionsTest.cpp

@@ -7,6 +7,7 @@
 
 #include <gtest/gtest.h>
 
+#include <react/renderer/attributedstring/conversions.h>
 #include <react/renderer/components/view/BoxShadowPropsConversions.h>
 #include <react/renderer/components/view/FilterPropsConversions.h>
 #include <react/renderer/components/view/conversions.h>
@@ -514,4 +515,29 @@ TEST(ConversionsTest, float_optional_undefined_for_string) {
   EXPECT_TRUE(result.isUndefined());
 }
 
+TEST(ConversionsTest, unprocessed_font_variant_string_single) {
+  FontVariant result;
+  parseUnprocessedFontVariantString("small-caps", result);
+
+  EXPECT_EQ((int)result, (int)FontVariant::SmallCaps);
+}
+
+TEST(ConversionsTest, unprocessed_font_variant_string_multiple) {
+  FontVariant result;
+  parseUnprocessedFontVariantString(
+      "small-caps oldstyle-nums tabular-nums", result);
+
+  EXPECT_EQ(
+      (int)result,
+      (int)FontVariant::SmallCaps | (int)FontVariant::OldstyleNums |
+          (int)FontVariant::TabularNums);
+}
+
+TEST(ConversionsTest, unprocessed_font_variant_string_invalid) {
+  FontVariant result;
+  parseUnprocessedFontVariantString("not-a-variant", result);
+
+  EXPECT_EQ((int)result, (int)FontVariant::Default);
+}
+
 } // namespace facebook::react