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

This commit is contained in:
Nathan Walker
2023-11-02 13:40:57 -07:00
committed by GitHub
parent 08478556a9
commit d70b48bbe9
3 changed files with 38 additions and 5 deletions

View File

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

View File

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

View File

@ -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 {