fix(css): prevent shorthand parse error on 'unset' and 'inset' (#10424)

NathanWalker · web-flow · commit d70b48bbe9c4 · 2023-11-02T13:40:57.000-07:00
diff --git a/package.json b/package.json
@@ -56,7 +56,7 @@
     "jest-environment-jsdom": "~29.6.0",
     "lint-staged": "^14.0.0",
     "module-alias": "^2.2.2",
-    "nativescript": "~8.5.0",
+    "nativescript": "~8.6.0",
     "nativescript-typedoc-theme": "1.1.0",
     "nx": "16.9.1",
     "parse-css": "git+https://github.com/tabatkins/parse-css.git",
diff --git a/packages/core/ui/styling/css-shadow.spec.ts b/packages/core/ui/styling/css-shadow.spec.ts
@@ -144,4 +144,36 @@ describe('css-shadow', () => {
 		expect(shadow.spreadRadius).toBeUndefined();
 		expect(shadow.color).toBeUndefined();
 	});
+
+	it('unset', () => {
+		const shadow = parseCSSShadow('unset');
+		expect(shadow.inset).toBe(false);
+		expect(shadow.offsetX).toBeUndefined();
+		expect(shadow.offsetY).toBeUndefined();
+		expect(shadow.blurRadius).toBeUndefined();
+		expect(shadow.spreadRadius).toBeUndefined();
+		expect(shadow.color).toBeUndefined();
+	});
+
+	it('unset 5em 1em gold', () => {
+		// invalid shorthand should result in nothing being applied
+		const shadow = parseCSSShadow('unset 5em 1em gold');
+		expect(shadow.inset).toBe(false);
+		expect(shadow.offsetX).toBeUndefined();
+		expect(shadow.offsetY).toBeUndefined();
+		expect(shadow.blurRadius).toBeUndefined();
+		expect(shadow.spreadRadius).toBeUndefined();
+		expect(shadow.color).toBeUndefined();
+	});
+
+	it('5em 1em gold unset', () => {
+		// partially invalid shorthand should result in standard default fallback
+		const shadow = parseCSSShadow('5em 1em gold unset');
+		expect(shadow.inset).toBe(false);
+		expect(shadow.offsetX).toBe(5);
+		expect(shadow.offsetY).toBe(1);
+		expect(shadow.blurRadius).toEqual(CoreTypes.zeroLength);
+		expect(shadow.spreadRadius).toBeUndefined();
+		expect(shadow.color).toEqual(new Color('black'));
+	});
 });
diff --git a/packages/core/ui/styling/css-utils.ts b/packages/core/ui/styling/css-utils.ts
@@ -36,24 +36,25 @@ export function parseCSSShorthand(value: string): {
 	const parts = value.trim().split(PARTS_RE);
 	const first = parts[0];
 
-	if (['', 'none'].includes(first)) {
+	if (['', 'none', 'unset'].includes(first)) {
 		return {
 			inset: false,
 			color: undefined,
 			values: [],
 		};
 	} else {
+		const invalidColors = ['inset', 'unset'];
 		const inset = parts.includes('inset');
 		const last = parts[parts.length - 1];
 		let color = 'black';
-		if (first && !isLength(first) && first !== 'inset') {
+		if (first && !isLength(first) && !invalidColors.includes(first)) {
 			color = first;
-		} else if (last && !isLength(last)) {
+		} else if (last && !isLength(last) && !invalidColors.includes(last)) {
 			color = last;
 		}
 
 		const values = parts
-			.filter((n) => n !== 'inset')
+			.filter((n) => !invalidColors.includes(n))
 			.filter((n) => n !== color)
 			.map((val) => {
 				try {
