From 61f4819e02102b112513d57b16ec7d37e989af20 Mon Sep 17 00:00:00 2001 From: Valentin Date: Tue, 18 Jun 2019 06:22:05 +0200 Subject: [PATCH] feat: ignore unsupported image functions (#1873) --- src/css/property-descriptors/background-image.ts | 6 +++--- src/css/syntax/parser.ts | 2 +- src/css/syntax/tokenizer.ts | 2 +- src/css/types/color.ts | 6 +++--- src/css/types/functions/-webkit-gradient.ts | 4 ++-- src/css/types/image.ts | 8 +++++--- src/dom/document-cloner.ts | 6 +++--- 7 files changed, 18 insertions(+), 16 deletions(-) diff --git a/src/css/property-descriptors/background-image.ts b/src/css/property-descriptors/background-image.ts index 701ed77..0d7e406 100644 --- a/src/css/property-descriptors/background-image.ts +++ b/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 = { name: 'background-image', @@ -19,6 +19,6 @@ export const backgroundImage: IPropertyListDescriptor = { return []; } - return tokens.filter(nonFunctionArgSeperator).map(image.parse); + return tokens.filter(value => nonFunctionArgSeparator(value) && isSupportedImage(value)).map(image.parse); } }; diff --git a/src/css/syntax/parser.ts b/src/css/syntax/parser.ts index 5013af5..83b8a6c 100644 --- a/src/css/syntax/parser.ts +++ b/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[][] => { diff --git a/src/css/syntax/tokenizer.ts b/src/css/syntax/tokenizer.ts index 20491f7..b449b84 100644 --- a/src/css/syntax/tokenizer.ts +++ b/src/css/syntax/tokenizer.ts @@ -696,7 +696,7 @@ export class Tokenizer { } } } - + i++; } while (true); } diff --git a/src/css/types/color.ts b/src/css/types/color.ts index bf8ade5..ebc17c1 100644 --- a/src/css/types/color.ts +++ b/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); diff --git a/src/css/types/functions/-webkit-gradient.ts b/src/css/types/functions/-webkit-gradient.ts index ad373cc..233fa52 100644 --- a/src/css/types/functions/-webkit-gradient.ts +++ b/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]; diff --git a/src/css/types/image.ts b/src/css/types/image.ts index f442751..631a946 100644 --- a/src/css/types/image.ts +++ b/src/css/types/image.ts @@ -98,9 +98,11 @@ export const image: ITypeDescriptor = { } }; -const SUPPORTED_IMAGE_FUNCTIONS: { - [key: string]: (args: CSSValue[]) => ICSSImage; -} = { +export function isSupportedImage(value: CSSValue) { + return value.type !== TokenType.FUNCTION || SUPPORTED_IMAGE_FUNCTIONS[value.name]; +} + +const SUPPORTED_IMAGE_FUNCTIONS: Record ICSSImage> = { 'linear-gradient': linearGradient, '-moz-linear-gradient': prefixLinearGradient, '-ms-linear-gradient': prefixLinearGradient, diff --git a/src/dom/document-cloner.ts b/src/dom/document-cloner.ts index 72a359a..360084a 100644 --- a/src/dom/document-cloner.ts +++ b/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 =