fix(core): font variation settings parser invalid axis (#10427)

CatchABus · web-flow · commit 08478556a9e3 · 2023-11-02T13:39:52.000-07:00
diff --git a/packages/core/ui/styling/font-common.ts b/packages/core/ui/styling/font-common.ts
@@ -1,6 +1,7 @@
 import { Font as FontDefinition } from './font';
 import { ParsedFont, FontStyleType, FontWeightType, FontVariationSettingsType } from './font-interfaces';
 import { makeValidator, makeParser } from '../core/properties';
+import { Trace } from '../../trace';
 
 export abstract class Font implements FontDefinition {
 	public static default = undefined;
@@ -69,41 +70,47 @@ export namespace FontWeight {
 
 export namespace FontVariationSettings {
 	export function parse(fontVariationSettings: string): Array<FontVariationSettingsType> | null {
+		if (!fontVariationSettings) {
+			return null;
+		}
+
 		const allowedValues = ['normal', 'inherit', 'initial', 'revert', 'revert-layer', 'unset'];
-		const lower = fontVariationSettings?.toLowerCase().trim();
-		if (allowedValues.indexOf(lower) !== -1) {
+		const variationSettingsValue: string = fontVariationSettings.trim();
+
+		if (allowedValues.indexOf(variationSettingsValue.toLowerCase()) !== -1) {
 			return null;
 		}
 
-		const chunks = lower.split(',');
+		const chunks = variationSettingsValue.split(',');
 		if (chunks.length) {
 			const parsed: Array<FontVariationSettingsType> = [];
 			for (const chunk of chunks) {
-				const axisChunks = chunk.trim();
+				const trimmedChunk = chunk.trim();
+				const axisChunks = trimmedChunk.split(' ');
 				if (axisChunks.length === 2) {
-					const axisName = chunk[0].trim();
-					const axisValue = parseFloat(chunk[0]);
+					const axisName = axisChunks[0].trim();
+					const axisValue = parseFloat(axisChunks[1]);
 					// See https://drafts.csswg.org/css-fonts/#font-variation-settings-def.
 					// Axis name strings longer or shorter than four characters are invalid.
 					if (!isNaN(axisValue) && axisName.length === 6 && ((axisName.startsWith("'") && axisName.endsWith("'")) || (axisName.startsWith('"') && axisName.endsWith('"')))) {
 						parsed.push({ axis: axisName, value: axisValue });
 					} else {
-						console.error('Invalid value (font-variation-settings): ' + fontVariationSettings);
+						Trace.write('Invalid value (font-variation-settings): ' + variationSettingsValue, Trace.categories.Error, Trace.messageType.error);
 					}
 				} else {
-					console.error('Invalid value (font-variation-settings): ' + fontVariationSettings);
+					Trace.write('Invalid value (font-variation-settings): ' + variationSettingsValue, Trace.categories.Error, Trace.messageType.error);
 				}
 			}
 
 			return parsed;
 		}
 
-		console.error('Invalid value (font-variation-settings): ' + fontVariationSettings);
+		Trace.write('Invalid value (font-variation-settings): ' + variationSettingsValue, Trace.categories.Error, Trace.messageType.error);
 	}
 
 	export function toString(fontVariationSettings: FontVariationSettingsType[] | null): string | null {
 		if (fontVariationSettings?.length) {
-			return fontVariationSettings.map(({ axis, value }) => `'${axis}' ${value}`).join(', ');
+			return fontVariationSettings.map(({ axis, value }) => `${axis} ${value}`).join(', ');
 		}
 
 		return null;
diff --git a/packages/core/ui/styling/font.android.ts b/packages/core/ui/styling/font.android.ts
@@ -63,8 +63,7 @@ function computeFontCacheKey(fontFamily: string, font: Font) {
 }
 
 function loadFontFromFile(fontFamily: string, font: Font): android.graphics.Typeface {
-	const apiLevel = android.os.Build.VERSION.SDK_INT;
-	const cacheKey = apiLevel >= 26 ? computeFontCacheKey(fontFamily, font) : fontFamily;
+	const cacheKey = SDK_VERSION >= 26 ? computeFontCacheKey(fontFamily, font) : fontFamily;
 
 	appAssets = appAssets || (ad.getApplicationContext() as android.content.Context).getAssets();
 	if (!appAssets) {
@@ -89,7 +88,7 @@ function loadFontFromFile(fontFamily: string, font: Font): android.graphics.Type
 		if (fontAssetPath) {
 			try {
 				fontAssetPath = fs.path.join(fs.knownFolders.currentApp().path, fontAssetPath);
-				if (apiLevel >= 26) {
+				if (SDK_VERSION >= 26) {
 					const builder = new android.graphics.Typeface.Builder(fontAssetPath);
 					if (builder) {
 						if (font.fontVariationSettings !== undefined) {
