feat: Add space-separated string support for fontVariant (facebook#34641

)

Summary:
This updates `fontVariant` to support space-separated string values, i.e., `'small-caps common-ligatures'`, thus aligning it with the [CSS Fonts Module Level 4](https://drafts.csswg.org/css-fonts/#font-variant-prop) specification as requested on facebook#34425. This also adds unit tests to the `processFontVariant` function ensuring the style processing works as expected.

## Changelog

[General] [Added] - Add space-separated string support for fontVariant

Pull Request resolved: facebook#34641

Test Plan:
This can be tested either through `processFontVariant-tests` or by using the following code:

```js
 <Text
   style={{
     fontVariant: 'small-caps common-ligatures',
  }} />
```

Reviewed By: javache

Differential Revision: D39423317

Pulled By: cipolleschi

fbshipit-source-id: ad971addb423ed338e178528a11fe9d456c03e6e

Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -10,6 +10,7 @@
 
 import type {AnyAttributeType} from '../../Renderer/shims/ReactNativeTypes';
 import processColor from '../../StyleSheet/processColor';
+import processFontVariant from '../../StyleSheet/processFontVariant';
 import processTransform from '../../StyleSheet/processTransform';
 import sizesDiffer from '../../Utilities/differ/sizesDiffer';
 
@@ -120,7 +121,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   fontFamily: true,
   fontSize: true,
   fontStyle: true,
-  fontVariant: true,
+  fontVariant: {process: processFontVariant},
   fontWeight: true,
   includeFontPadding: true,
   letterSpacing: true,

Libraries/StyleSheet/StyleSheetTypes.js

@@ -615,40 +615,42 @@ export type ____FontWeight_Internal =
   | 'heavy'
   | 'black';
 
+export type ____FontVariantArray_Internal = $ReadOnlyArray<
+  | 'small-caps'
+  | 'oldstyle-nums'
+  | 'lining-nums'
+  | 'tabular-nums'
+  | 'proportional-nums'
+  | 'stylistic-one'
+  | 'stylistic-two'
+  | 'stylistic-three'
+  | 'stylistic-four'
+  | 'stylistic-five'
+  | 'stylistic-six'
+  | 'stylistic-seven'
+  | 'stylistic-eight'
+  | 'stylistic-nine'
+  | 'stylistic-ten'
+  | 'stylistic-eleven'
+  | 'stylistic-twelve'
+  | 'stylistic-thirteen'
+  | 'stylistic-fourteen'
+  | 'stylistic-fifteen'
+  | 'stylistic-sixteen'
+  | 'stylistic-seventeen'
+  | 'stylistic-eighteen'
+  | 'stylistic-nineteen'
+  | 'stylistic-twenty',
+>;
+
 export type ____TextStyle_InternalCore = $ReadOnly<{
   ...$Exact<____ViewStyle_Internal>,
   color?: ____ColorValue_Internal,
   fontFamily?: string,
   fontSize?: number,
   fontStyle?: 'normal' | 'italic',
   fontWeight?: ____FontWeight_Internal,
-  fontVariant?: $ReadOnlyArray<
-    | 'small-caps'
-    | 'oldstyle-nums'
-    | 'lining-nums'
-    | 'tabular-nums'
-    | 'proportional-nums'
-    | 'stylistic-one'
-    | 'stylistic-two'
-    | 'stylistic-three'
-    | 'stylistic-four'
-    | 'stylistic-five'
-    | 'stylistic-six'
-    | 'stylistic-seven'
-    | 'stylistic-eight'
-    | 'stylistic-nine'
-    | 'stylistic-ten'
-    | 'stylistic-eleven'
-    | 'stylistic-twelve'
-    | 'stylistic-thirteen'
-    | 'stylistic-fourteen'
-    | 'stylistic-fifteen'
-    | 'stylistic-sixteen'
-    | 'stylistic-seventeen'
-    | 'stylistic-eighteen'
-    | 'stylistic-nineteen'
-    | 'stylistic-twenty',
-  >,
+  fontVariant?: ____FontVariantArray_Internal | string,
   textShadowOffset?: $ReadOnly<{
     width: number,
     height: number,

Libraries/StyleSheet/__tests__/processFontVariant-test.js

@@ -0,0 +1,50 @@
+/**
+ * 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.
+ *
+ * @format
+ * @emails oncall+react_native
+ */
+
+'use strict';
+
+const processFontVariant = require('../processFontVariant');
+
+describe('processFontVariant', () => {
+  it('should accept arrays', () => {
+    expect(processFontVariant([])).toEqual([]);
+    expect(processFontVariant(['oldstyle-nums'])).toEqual(['oldstyle-nums']);
+    expect(processFontVariant(['proportional-nums', 'lining-nums'])).toEqual([
+      'proportional-nums',
+      'lining-nums',
+    ]);
+  });
+
+  it('should accept string values', () => {
+    expect(processFontVariant('oldstyle-nums')).toEqual(['oldstyle-nums']);
+    expect(processFontVariant('lining-nums  ')).toEqual(['lining-nums']);
+    expect(processFontVariant('   tabular-nums')).toEqual(['tabular-nums']);
+  });
+
+  it('should accept string with multiple values', () => {
+    expect(processFontVariant('oldstyle-nums lining-nums')).toEqual([
+      'oldstyle-nums',
+      'lining-nums',
+    ]);
+    expect(
+      processFontVariant('proportional-nums  oldstyle-nums   lining-nums'),
+    ).toEqual(['proportional-nums', 'oldstyle-nums', 'lining-nums']);
+    expect(
+      processFontVariant(
+        '   small-caps proportional-nums  oldstyle-nums lining-nums',
+      ),
+    ).toEqual([
+      'small-caps',
+      'proportional-nums',
+      'oldstyle-nums',
+      'lining-nums',
+    ]);
+  });
+});

Libraries/StyleSheet/processFontVariant.js

@@ -0,0 +1,30 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+import type {____FontVariantArray_Internal} from './StyleSheetTypes';
+
+function processFontVariant(
+  fontVariant: ____FontVariantArray_Internal | string,
+): ?____FontVariantArray_Internal {
+  if (Array.isArray(fontVariant)) {
+    return fontVariant;
+  }
+
+  // $FlowFixMe[incompatible-type]
+  const match: ?____FontVariantArray_Internal = fontVariant
+    .split(' ')
+    .filter(Boolean);
+
+  return match;
+}
+
+module.exports = processFontVariant;