feat: ignore unsupported image functions (#1873)

src/css/property-descriptors/background-image.ts

@@ -1,7 +1,7 @@
 import {TokenType} from '../syntax/tokenizer';
-import {ICSSImage, image} from '../types/image';
+import {ICSSImage, image, isSupportedImage} from '../types/image';
 import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
-import {CSSValue, nonFunctionArgSeperator} from '../syntax/parser';
+import {CSSValue, nonFunctionArgSeparator} from '../syntax/parser';
 
 export const backgroundImage: IPropertyListDescriptor<ICSSImage[]> = {
     name: 'background-image',
@@ -19,6 +19,6 @@ export const backgroundImage: IPropertyListDescriptor<ICSSImage[]> = {
             return [];
         }
 
-        return tokens.filter(nonFunctionArgSeperator).map(image.parse);
+        return tokens.filter(value => nonFunctionArgSeparator(value) && isSupportedImage(value)).map(image.parse);
     }
 };

src/css/syntax/parser.ts

@@ -149,7 +149,7 @@ export const isIdentWithValue = (token: CSSValue, value: string): boolean =>
     isIdentToken(token) && token.value === value;
 
 export const nonWhiteSpace = (token: CSSValue) => token.type !== TokenType.WHITESPACE_TOKEN;
-export const nonFunctionArgSeperator = (token: CSSValue) =>
+export const nonFunctionArgSeparator = (token: CSSValue) =>
     token.type !== TokenType.WHITESPACE_TOKEN && token.type !== TokenType.COMMA_TOKEN;
 
 export const parseFunctionArgs = (tokens: CSSValue[]): CSSValue[][] => {

src/css/syntax/tokenizer.ts

@@ -696,7 +696,7 @@ export class Tokenizer {
                     }
                 }
             }
-            
+
             i++;
         } while (true);
     }

src/css/types/color.ts

@@ -1,4 +1,4 @@
-import {CSSValue, nonFunctionArgSeperator} from '../syntax/parser';
+import {CSSValue, nonFunctionArgSeparator} from '../syntax/parser';
 import {TokenType} from '../syntax/tokenizer';
 import {ITypeDescriptor} from '../ITypeDescriptor';
 import {angle, deg} from './angle';
@@ -86,7 +86,7 @@ const getTokenColorValue = (token: CSSValue, i: number): number => {
 };
 
 const rgb = (args: CSSValue[]): number => {
-    const tokens = args.filter(nonFunctionArgSeperator);
+    const tokens = args.filter(nonFunctionArgSeparator);
 
     if (tokens.length === 3) {
         const [r, g, b] = tokens.map(getTokenColorValue);
@@ -121,7 +121,7 @@ function hue2rgb(t1: number, t2: number, hue: number): number {
 }
 
 const hsl = (args: CSSValue[]): number => {
-    const tokens = args.filter(nonFunctionArgSeperator);
+    const tokens = args.filter(nonFunctionArgSeparator);
     const [hue, saturation, lightness, alpha] = tokens;
 
     const h = (hue.type === TokenType.NUMBER_TOKEN ? deg(hue.number) : angle.parse(hue)) / (Math.PI * 2);

src/css/types/functions/-webkit-gradient.ts

@@ -1,4 +1,4 @@
-import {CSSValue, isIdentToken, isNumberToken, nonFunctionArgSeperator, parseFunctionArgs} from '../../syntax/parser';
+import {CSSValue, isIdentToken, isNumberToken, nonFunctionArgSeparator, parseFunctionArgs} from '../../syntax/parser';
 import {
     CSSImageType,
     CSSLinearGradientImage,
@@ -40,7 +40,7 @@ export const webkitGradient = (tokens: CSSValue[]): CSSLinearGradientImage | CSS
                 const color = colorType.parse(firstToken.values[0]);
                 stops.push({stop: HUNDRED_PERCENT, color});
             } else if (firstToken.name === 'color-stop') {
-                const values = firstToken.values.filter(nonFunctionArgSeperator);
+                const values = firstToken.values.filter(nonFunctionArgSeparator);
                 if (values.length === 2) {
                     const color = colorType.parse(values[1]);
                     const stop = values[0];

src/css/types/image.ts

@@ -98,9 +98,11 @@ export const image: ITypeDescriptor<ICSSImage> = {
     }
 };
 
-const SUPPORTED_IMAGE_FUNCTIONS: {
+export function isSupportedImage(value: CSSValue) {
-    [key: string]: (args: CSSValue[]) => ICSSImage;
+    return value.type !== TokenType.FUNCTION || SUPPORTED_IMAGE_FUNCTIONS[value.name];
-} = {
+}
+
+const SUPPORTED_IMAGE_FUNCTIONS: Record<string, (args: CSSValue[]) => ICSSImage> = {
     'linear-gradient': linearGradient,
     '-moz-linear-gradient': prefixLinearGradient,
     '-ms-linear-gradient': prefixLinearGradient,

src/dom/document-cloner.ts

@@ -12,7 +12,7 @@ import {
     isTextNode
 } from './node-parser';
 import {Logger} from '../core/logger';
-import {isIdentToken, nonFunctionArgSeperator} from '../css/syntax/parser';
+import {isIdentToken, nonFunctionArgSeparator} from '../css/syntax/parser';
 import {TokenType} from '../css/syntax/tokenizer';
 import {CounterState, createCounterText} from '../css/types/functions/counter';
 import {LIST_STYLE_TYPE, listStyleType} from '../css/property-descriptors/list-style-type';
@@ -355,7 +355,7 @@ export class DocumentCloner {
                         );
                     }
                 } else if (token.name === 'counter') {
-                    const [counter, counterStyle] = token.values.filter(nonFunctionArgSeperator);
+                    const [counter, counterStyle] = token.values.filter(nonFunctionArgSeparator);
                     if (counter && isIdentToken(counter)) {
                         const counterState = this.counters.getCounterValue(counter.value);
                         const counterType =
@@ -368,7 +368,7 @@ export class DocumentCloner {
                         );
                     }
                 } else if (token.name === 'counters') {
-                    const [counter, delim, counterStyle] = token.values.filter(nonFunctionArgSeperator);
+                    const [counter, delim, counterStyle] = token.values.filter(nonFunctionArgSeparator);
                     if (counter && isIdentToken(counter)) {
                         const counterStates = this.counters.getCounterValues(counter.value);
                         const counterType =