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

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",

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'));
+ });
 });

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 {