deps: update dependencies with lint fixes (#2565)

.eslintrc

@@ -2,8 +2,7 @@
     "parser": "@typescript-eslint/parser",
     "extends":  [
         "plugin:@typescript-eslint/recommended",
-        "prettier/@typescript-eslint",
+        "prettier"
-        "plugin:prettier/recommended",
     ],
     "parserOptions": {
         "project": "./tsconfig.json",

package.json

@@ -27,36 +27,40 @@
     "@babel/core": "^7.4.3",
     "@babel/preset-env": "^7.4.3",
     "@babel/preset-flow": "^7.0.0",
+    "@rollup/plugin-commonjs": "^19.0.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.0.0",
+    "@rollup/plugin-typescript": "^8.2.1",
     "@types/chai": "^4.1.7",
-    "@types/express": "^4.17.11",
+    "@types/express": "^4.17.13",
     "@types/glob": "^7.1.1",
-    "@types/jest": "^24.0.18",
+    "@types/jest": "^26.0.24",
     "@types/karma": "^6.3.0",
-    "@types/mocha": "^5.2.6",
+    "@types/mocha": "^8.2.3",
-    "@types/node": "^11.13.2",
+    "@types/node": "^16.3.1",
-    "@types/platform": "^1.3.2",
+    "@types/platform": "^1.3.4",
     "@types/promise-polyfill": "^6.0.3",
-    "@typescript-eslint/eslint-plugin": "^1.7.0",
+    "@typescript-eslint/eslint-plugin": "^4.28.2",
-    "@typescript-eslint/parser": "^1.7.0",
+    "@typescript-eslint/parser": "^4.28.2",
     "appium-ios-simulator": "^3.10.0",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.5",
     "babel-plugin-add-module-exports": "^1.0.2",
     "babel-plugin-dev-expression": "^0.2.1",
     "base64-arraybuffer": "0.2.0",
-    "body-parser": "^1.18.3",
+    "body-parser": "^1.19.0",
     "chai": "4.1.1",
     "chromeless": "^1.5.2",
-    "cors": "2.8.4",
+    "cors": "^2.8.5",
-    "es6-promise": "^4.2.6",
+    "es6-promise": "^4.2.8",
-    "eslint": "^5.16.0",
+    "eslint": "^7.30.0",
-    "eslint-config-prettier": "^4.2.0",
+    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "3.0.1",
+    "eslint-plugin-prettier": "3.4.0",
     "express": "^4.17.1",
     "filenamify-url": "1.0.0",
     "glob": "7.1.3",
     "html2canvas-proxy": "1.0.1",
-    "jest": "^24.9.0",
+    "jest": "^27.0.6",
     "jquery": "^3.5.1",
     "js-polyfills": "^0.1.42",
     "karma": "^6.3.2",
@@ -68,28 +72,25 @@
     "karma-mocha": "^2.0.1",
     "karma-safarinative-launcher": "^1.1.0",
     "karma-sauce-launcher": "^2.0.2",
-    "mocha": "^6.1.4",
+    "mocha": "^9.0.2",
     "node-simctl": "^5.3.0",
-    "platform": "1.3.4",
+    "platform": "^1.3.6",
-    "prettier": "1.17.0",
+    "prettier": "^2.3.2",
     "replace-in-file": "^3.0.0",
-    "rimraf": "2.6.1",
+    "rimraf": "^3.0.2",
-    "rollup": "^1.10.1",
+    "rollup": "^2.53.1",
-    "rollup-plugin-commonjs": "^9.3.4",
+    "rollup-plugin-sourcemaps": "^0.6.3",
-    "rollup-plugin-json": "^4.0.0",
-    "rollup-plugin-node-resolve": "^4.2.3",
-    "rollup-plugin-sourcemaps": "^0.4.2",
-    "rollup-plugin-typescript2": "^0.21.0",
     "serve-index": "^1.9.1",
     "slash": "1.0.0",
     "standard-version": "^8.0.2",
-    "ts-jest": "^24.1.0",
+    "ts-jest": "^27.0.3",
-    "ts-loader": "^5.3.3",
+    "ts-loader": "^8.3.0",
-    "ts-node": "^8.0.3",
+    "ts-node": "^10.1.0",
-    "typescript": "^3.4.3",
+    "tslib": "^2.3.0",
-    "uglify-js": "^3.5.11",
+    "typescript": "^4.3.5",
-    "uglifyjs-webpack-plugin": "^1.1.2",
+    "uglify-js": "^3.13.10",
-    "webpack": "^4.29.6",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "webpack": "^4.46.0",
     "webpack-cli": "^3.3.12",
     "yargs": "^17.0.1"
   },
@@ -103,7 +104,7 @@
     "build:reftest-preview": "webpack --config www/webpack.config.js",
     "release": "standard-version",
     "format": "prettier --write \"{src,www/src,tests,scripts}/**/*.ts\"",
-    "lint": "eslint src/**/*.ts",
+    "lint": "eslint src/**/*.ts --max-warnings 0",
     "test": "npm run lint && npm run unittest && npm run karma",
     "unittest": "jest",
     "karma": "ts-node tests/karma",

rollup.config.ts

@@ -1,8 +1,8 @@
-import resolve from 'rollup-plugin-node-resolve';
+import resolve from '@rollup/plugin-node-resolve';
-import commonjs from 'rollup-plugin-commonjs';
+import commonjs from '@rollup/plugin-commonjs';
 import sourceMaps from 'rollup-plugin-sourcemaps';
-import typescript from 'rollup-plugin-typescript2';
+import typescript from '@rollup/plugin-typescript';
-import json from 'rollup-plugin-json';
+import json from '@rollup/plugin-json';
 
 const pkg = require('./package.json');
 
@@ -30,7 +30,7 @@ export default {
         // Allow json resolution
         json(),
         // Compile TypeScript files
-        typescript({ useTsconfigDeclarationDir: true }),
+        typescript(),
         // Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)
         commonjs({
             include: 'node_modules/**'

scripts/create-reftest-list.ts

@@ -21,7 +21,7 @@ const outputPath = resolve(__dirname, '../', process.argv[3]);
 const ignoredTests = readFileSync(path)
     .toString()
     .split(/\r\n|\r|\n/)
-    .filter(l => l.length)
+    .filter((l) => l.length)
     .reduce((acc: {[key: string]: string[]}, l) => {
         const m = l.match(/^(\[(.+)\])?(.+)$/i);
         if (m) {

scripts/create-reftest-result-list.ts

@@ -17,7 +17,7 @@ const files = readdirSync(path);
 interface RefTestMetadata {}
 
 interface RefTestSingleMetadata extends RefTestMetadata {
-    test: string;
+    test?: string;
 }
 
 interface RefTestResults {
@@ -26,12 +26,14 @@ interface RefTestResults {
 
 const result: RefTestResults = files.reduce((result: RefTestResults, file) => {
     const json: RefTestSingleMetadata = JSON.parse(readFileSync(resolve(__dirname, path, file)).toString());
-    if (!result[json.test]) {
+    if (json.test) {
-        result[json.test] = [];
+        if (!result[json.test]) {
-    }
+            result[json.test] = [];
+        }
 
-    result[json.test].push(json);
+        result[json.test].push(json);
-    delete json.test;
+        delete json.test;
+    }
 
     return result;
 }, {});

src/__tests__/index.ts

@@ -21,7 +21,6 @@ jest.mock('../render/stacking-context');
 jest.mock('../render/canvas/canvas-renderer');
 
 describe('html2canvas', () => {
-    // eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
     const element = {
         ownerDocument: {
             defaultView: {
@@ -60,7 +59,6 @@ describe('html2canvas', () => {
     });
 
     it('should use existing canvas when given as option', async () => {
-        // eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
         const canvas = {} as HTMLCanvasElement;
         await html2canvas(element, {canvas});
         expect(CanvasRenderer).toHaveBeenLastCalledWith(

src/core/__mocks__/logger.ts

@@ -1,17 +1,22 @@
 export class Logger {
-    debug() {}
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    debug(): void {}
 
-    static create() {}
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    static create(): void {}
 
-    static destroy() {}
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    static destroy(): void {}
 
     static getInstance(): Logger {
         return logger;
     }
 
-    info() {}
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    info(): void {}
 
-    error() {}
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    error(): void {}
 }
 
 const logger = new Logger();

src/core/__tests__/cache-storage.ts

@@ -47,12 +47,12 @@ const createMockContext = (origin: string, opts = {}) => {
 
 const images: ImageMock[] = [];
 const xhr: XMLHttpRequestMock[] = [];
-const sleep = async (timeout: number) => await new Promise(resolve => setTimeout(resolve, timeout));
+const sleep = async (timeout: number) => await new Promise((resolve) => setTimeout(resolve, timeout));
 
 class ImageMock {
     src?: string;
     crossOrigin?: string;
-    onload?: () => {};
+    onload?: () => void;
     constructor() {
         images.push(this);
     }
@@ -65,8 +65,8 @@ class XMLHttpRequestMock {
     method?: string;
     url?: string;
     response?: string;
-    onload?: () => {};
+    onload?: () => void;
-    ontimeout?: () => {};
+    ontimeout?: () => void;
     constructor() {
         this.sent = false;
         this.status = 500;
@@ -106,7 +106,7 @@ const setFeatures = (opts: {[key: string]: boolean} = {}) => {
         SUPPORT_RESPONSE_TYPE: false
     };
 
-    Object.keys(defaults).forEach(key => {
+    Object.keys(defaults).forEach((key) => {
         Object.defineProperty(FEATURES, key, {
             value: typeof opts[key] === 'boolean' ? opts[key] : defaults[key],
             writable: true

src/core/__tests__/logger.ts

@@ -1,10 +1,13 @@
 import {Logger} from '../logger';
 
 describe('logger', () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let infoSpy: any;
 
     beforeEach(() => {
-        infoSpy = jest.spyOn(console, 'info').mockImplementation(() => {});
+        infoSpy = jest.spyOn(console, 'info').mockImplementation(() => {
+            // do nothing
+        });
     });
 
     afterEach(() => {

src/core/cache-storage.ts

@@ -4,7 +4,7 @@ import {Logger} from './logger';
 export class CacheStorage {
     private static _caches: {[key: string]: Cache} = {};
     private static _link?: HTMLAnchorElement;
-    private static _origin: string = 'about:blank';
+    private static _origin = 'about:blank';
     private static _current: Cache | null = null;
 
     static create(name: string, options: ResourceOptions): Cache {
@@ -39,7 +39,7 @@ export class CacheStorage {
         return CacheStorage.getOrigin(src) === CacheStorage._origin;
     }
 
-    static setContext(window: Window) {
+    static setContext(window: Window): void {
         CacheStorage._link = window.document.createElement('a');
         CacheStorage._origin = CacheStorage.getOrigin(window.location.href);
     }
@@ -52,11 +52,11 @@ export class CacheStorage {
         return current;
     }
 
-    static attachInstance(cache: Cache) {
+    static attachInstance(cache: Cache): void {
         CacheStorage._current = cache;
     }
 
-    static detachInstance() {
+    static detachInstance(): void {
         CacheStorage._current = null;
     }
 }
@@ -169,7 +169,7 @@ export class Cache {
                     } else {
                         const reader = new FileReader();
                         reader.addEventListener('load', () => resolve(reader.result as string), false);
-                        reader.addEventListener('error', e => reject(e), false);
+                        reader.addEventListener('error', (e) => reject(e), false);
                         reader.readAsDataURL(xhr.response);
                     }
                 } else {

src/core/features.ts

@@ -90,7 +90,13 @@ const testForeignObject = (document: Document): Promise<boolean> => {
         .catch(() => false);
 };
 
-export const createForeignObjectSVG = (width: number, height: number, x: number, y: number, node: Node) => {
+export const createForeignObjectSVG = (
+    width: number,
+    height: number,
+    x: number,
+    y: number,
+    node: Node
+): SVGForeignObjectElement => {
     const xmlns = 'http://www.w3.org/2000/svg';
     const svg = document.createElementNS(xmlns, 'svg');
     const foreignObject = document.createElementNS(xmlns, 'foreignObject');
@@ -120,19 +126,19 @@ export const loadSerializedSVG = (svg: Node): Promise<HTMLImageElement> => {
 };
 
 export const FEATURES = {
-    get SUPPORT_RANGE_BOUNDS() {
+    get SUPPORT_RANGE_BOUNDS(): boolean {
         'use strict';
         const value = testRangeBounds(document);
         Object.defineProperty(FEATURES, 'SUPPORT_RANGE_BOUNDS', {value});
         return value;
     },
-    get SUPPORT_SVG_DRAWING() {
+    get SUPPORT_SVG_DRAWING(): boolean {
         'use strict';
         const value = testSVG(document);
         Object.defineProperty(FEATURES, 'SUPPORT_SVG_DRAWING', {value});
         return value;
     },
-    get SUPPORT_FOREIGNOBJECT_DRAWING() {
+    get SUPPORT_FOREIGNOBJECT_DRAWING(): Promise<boolean> {
         'use strict';
         const value =
             typeof Array.from === 'function' && typeof window.fetch === 'function'
@@ -141,19 +147,19 @@ export const FEATURES = {
         Object.defineProperty(FEATURES, 'SUPPORT_FOREIGNOBJECT_DRAWING', {value});
         return value;
     },
-    get SUPPORT_CORS_IMAGES() {
+    get SUPPORT_CORS_IMAGES(): boolean {
         'use strict';
         const value = testCORS();
         Object.defineProperty(FEATURES, 'SUPPORT_CORS_IMAGES', {value});
         return value;
     },
-    get SUPPORT_RESPONSE_TYPE() {
+    get SUPPORT_RESPONSE_TYPE(): boolean {
         'use strict';
         const value = testResponseType();
         Object.defineProperty(FEATURES, 'SUPPORT_RESPONSE_TYPE', {value});
         return value;
     },
-    get SUPPORT_CORS_XHR() {
+    get SUPPORT_CORS_XHR(): boolean {
         'use strict';
         const value = 'withCredentials' in new XMLHttpRequest();
         Object.defineProperty(FEATURES, 'SUPPORT_CORS_XHR', {value});

src/core/logger.ts

@@ -17,7 +17,7 @@ export class Logger {
     }
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    debug(...args: any) {
+    debug(...args: unknown[]): void {
         if (this.enabled) {
             // eslint-disable-next-line no-console
             if (typeof window !== 'undefined' && window.console && typeof console.debug === 'function') {
@@ -33,11 +33,11 @@ export class Logger {
         return Date.now() - this.start;
     }
 
-    static create(options: LoggerOptions) {
+    static create(options: LoggerOptions): void {
         Logger.instances[options.id] = new Logger(options);
     }
 
-    static destroy(id: string) {
+    static destroy(id: string): void {
         delete Logger.instances[id];
     }
 
@@ -50,7 +50,7 @@ export class Logger {
     }
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    info(...args: any) {
+    info(...args: unknown[]): void {
         if (this.enabled) {
             // eslint-disable-next-line no-console
             if (typeof window !== 'undefined' && window.console && typeof console.info === 'function') {
@@ -61,7 +61,7 @@ export class Logger {
     }
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    error(...args: any) {
+    error(...args: unknown[]): void {
         if (this.enabled) {
             // eslint-disable-next-line no-console
             if (typeof window !== 'undefined' && window.console && typeof console.error === 'function') {

src/css/index.ts

@@ -289,7 +289,6 @@ const parse = (descriptor: CSSPropertyDescriptor<any>, style?: string | null) =>
                     const value = parser.parseComponentValue();
                     return isLengthPercentage(value) ? value : ZERO_LENGTH;
             }
+            break;
     }
-
-    throw new Error(`Attempting to parse unsupported css format type ${descriptor.format}`);
 };

src/css/layout/__mocks__/bounds.ts

@@ -1,4 +1,4 @@
 export const {Bounds} = jest.requireActual('../bounds');
-export const parseBounds = () => {
+export const parseBounds = (): typeof Bounds => {
     return new Bounds(0, 0, 200, 50);
 };

src/css/layout/text.ts

@@ -18,7 +18,7 @@ export const parseTextBounds = (value: string, styles: CSSParsedDeclaration, nod
     const textList = breakText(value, styles);
     const textBounds: TextBounds[] = [];
     let offset = 0;
-    textList.forEach(text => {
+    textList.forEach((text) => {
         if (styles.textDecorationLine.length || text.trim().length > 0) {
             if (FEATURES.SUPPORT_RANGE_BOUNDS) {
                 textBounds.push(new TextBounds(text, getRangeBounds(node, offset, text.length)));
@@ -67,7 +67,7 @@ const getRangeBounds = (node: Text, offset: number, length: number): Bounds => {
 };
 
 const breakText = (value: string, styles: CSSParsedDeclaration): string[] => {
-    return styles.letterSpacing !== 0 ? toCodePoints(value).map(i => fromCodePoint(i)) : breakWords(value, styles);
+    return styles.letterSpacing !== 0 ? toCodePoints(value).map((i) => fromCodePoint(i)) : breakWords(value, styles);
 };
 
 const breakWords = (str: string, styles: CSSParsedDeclaration): string[] => {

src/css/property-descriptors/__tests__/background-tests.ts

@@ -32,7 +32,10 @@ describe('property-descriptors', () => {
                     {
                         angle: deg(180),
                         type: CSSImageType.LINEAR_GRADIENT,
-                        stops: [{color: pack(255, 255, 0, 0.5), stop: null}, {color: pack(0, 0, 255, 0.5), stop: null}]
+                        stops: [
+                            {color: pack(255, 255, 0, 0.5), stop: null},
+                            {color: pack(0, 0, 255, 0.5), stop: null}
+                        ]
                     },
                     {url: 'https://html2canvas.hertzen.com', type: CSSImageType.URL}
                 ]

src/css/property-descriptors/__tests__/transform-tests.ts

@@ -9,13 +9,9 @@ describe('property-descriptors', () => {
         it('matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)', () =>
             deepStrictEqual(parseValue('matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)'), [1, 2, 3, 4, 5, 6]));
         it('matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)', () =>
-            deepStrictEqual(parseValue('matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'), [
+            deepStrictEqual(
-                1,
+                parseValue('matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'),
-                0,
+                [1, 0, 0, 1, 0, 0]
-                0,
+            ));
-                1,
-                0,
-                0
-            ]));
     });
 });

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

@@ -14,7 +14,7 @@ export const backgroundClip: IPropertyListDescriptor<BackgroundClip> = {
     prefix: false,
     type: PropertyDescriptorParsingType.LIST,
     parse: (tokens: CSSValue[]): BackgroundClip => {
-        return tokens.map(token => {
+        return tokens.map((token) => {
             if (isIdentToken(token)) {
                 switch (token.value) {
                     case 'padding-box':

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

@@ -19,6 +19,6 @@ export const backgroundImage: IPropertyListDescriptor<ICSSImage[]> = {
             return [];
         }
 
-        return tokens.filter(value => nonFunctionArgSeparator(value) && isSupportedImage(value)).map(image.parse);
+        return tokens.filter((value) => nonFunctionArgSeparator(value) && isSupportedImage(value)).map(image.parse);
     }
 };

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

@@ -15,7 +15,7 @@ export const backgroundOrigin: IPropertyListDescriptor<BackgroundOrigin> = {
     prefix: false,
     type: PropertyDescriptorParsingType.LIST,
     parse: (tokens: CSSValue[]): BackgroundOrigin => {
-        return tokens.map(token => {
+        return tokens.map((token) => {
             if (isIdentToken(token)) {
                 switch (token.value) {
                     case 'padding-box':

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

@@ -16,10 +16,10 @@ export const backgroundRepeat: IPropertyListDescriptor<BackgroundRepeat> = {
     type: PropertyDescriptorParsingType.LIST,
     parse: (tokens: CSSValue[]): BackgroundRepeat => {
         return parseFunctionArgs(tokens)
-            .map(values =>
+            .map((values) =>
                 values
                     .filter(isIdentToken)
-                    .map(token => token.value)
+                    .map((token) => token.value)
                     .join(' ')
             )
             .map(parseBackgroundRepeat);

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

@@ -18,7 +18,7 @@ export const backgroundSize: IPropertyListDescriptor<BackgroundSize> = {
     prefix: false,
     type: PropertyDescriptorParsingType.LIST,
     parse: (tokens: CSSValue[]): BackgroundSize => {
-        return parseFunctionArgs(tokens).map(values => values.filter(isBackgroundSizeInfoToken));
+        return parseFunctionArgs(tokens).map((values) => values.filter(isBackgroundSizeInfoToken));
     }
 };
 

src/css/property-descriptors/font-family.ts

@@ -14,7 +14,7 @@ export const fontFamily: IPropertyListDescriptor<FontFamily> = {
     parse: (tokens: CSSValue[]) => {
         const accumulator: string[] = [];
         const results: string[] = [];
-        tokens.forEach(token => {
+        tokens.forEach((token) => {
             switch (token.type) {
                 case TokenType.IDENT_TOKEN:
                 case TokenType.STRING_TOKEN:
@@ -32,6 +32,6 @@ export const fontFamily: IPropertyListDescriptor<FontFamily> = {
         if (accumulator.length) {
             results.push(accumulator.join(' '));
         }
-        return results.map(result => (result.indexOf(' ') === -1 ? result : `'${result}'`));
+        return results.map((result) => (result.indexOf(' ') === -1 ? result : `'${result}'`));
     }
 };

src/css/property-descriptors/font-variant.ts

@@ -6,6 +6,6 @@ export const fontVariant: IPropertyListDescriptor<string[]> = {
     type: PropertyDescriptorParsingType.LIST,
     prefix: false,
     parse: (tokens: CSSValue[]): string[] => {
-        return tokens.filter(isIdentToken).map(token => token.value);
+        return tokens.filter(isIdentToken).map((token) => token.value);
     }
 };

src/css/property-descriptors/overflow.ts

@@ -13,7 +13,7 @@ export const overflow: IPropertyListDescriptor<OVERFLOW[]> = {
     prefix: false,
     type: PropertyDescriptorParsingType.LIST,
     parse: (tokens: CSSValue[]): OVERFLOW[] => {
-        return tokens.filter(isIdentToken).map(overflow => {
+        return tokens.filter(isIdentToken).map((overflow) => {
             switch (overflow.value) {
                 case 'hidden':
                     return OVERFLOW.HIDDEN;

src/css/property-descriptors/text-decoration-line.ts

@@ -19,7 +19,7 @@ export const textDecorationLine: IPropertyListDescriptor<TextDecorationLine> = {
     parse: (tokens: CSSValue[]): TextDecorationLine => {
         return tokens
             .filter(isIdentToken)
-            .map(token => {
+            .map((token) => {
                 switch (token.value) {
                     case 'underline':
                         return TEXT_DECORATION_LINE.UNDERLINE;
@@ -32,6 +32,6 @@ export const textDecorationLine: IPropertyListDescriptor<TextDecorationLine> = {
                 }
                 return TEXT_DECORATION_LINE.NONE;
             })
-            .filter(line => line !== TEXT_DECORATION_LINE.NONE);
+            .filter((line) => line !== TEXT_DECORATION_LINE.NONE);
     }
 };

src/css/property-descriptors/transform.ts

@@ -27,14 +27,14 @@ export const transform: IPropertyValueDescriptor<Transform> = {
 };
 
 const matrix = (args: CSSValue[]): Transform => {
-    const values = args.filter(arg => arg.type === TokenType.NUMBER_TOKEN).map((arg: NumberValueToken) => arg.number);
+    const values = args.filter((arg) => arg.type === TokenType.NUMBER_TOKEN).map((arg: NumberValueToken) => arg.number);
 
     return values.length === 6 ? (values as Matrix) : null;
 };
 
 // doesn't support 3D transforms at the moment
 const matrix3d = (args: CSSValue[]): Transform => {
-    const values = args.filter(arg => arg.type === TokenType.NUMBER_TOKEN).map((arg: NumberValueToken) => arg.number);
+    const values = args.filter((arg) => arg.type === TokenType.NUMBER_TOKEN).map((arg: NumberValueToken) => arg.number);
 
     const [a1, b1, {}, {}, a2, b2, {}, {}, {}, {}, {}, {}, a4, b4, {}, {}] = values;
 

src/css/syntax/parser.ts

@@ -74,7 +74,7 @@ export class Parser {
     parseComponentValues(): CSSValue[] {
         const values = [];
         while (true) {
-            let value = this.consumeComponentValue();
+            const value = this.consumeComponentValue();
             if (value.type === TokenType.EOF_TOKEN) {
                 return values;
             }
@@ -148,14 +148,14 @@ export const isStringToken = (token: CSSValue): token is StringValueToken => tok
 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 nonWhiteSpace = (token: CSSValue): boolean => token.type !== TokenType.WHITESPACE_TOKEN;
-export const nonFunctionArgSeparator = (token: CSSValue) =>
+export const nonFunctionArgSeparator = (token: CSSValue): boolean =>
     token.type !== TokenType.WHITESPACE_TOKEN && token.type !== TokenType.COMMA_TOKEN;
 
 export const parseFunctionArgs = (tokens: CSSValue[]): CSSValue[][] => {
     const args: CSSValue[][] = [];
     let arg: CSSValue[] = [];
-    tokens.forEach(token => {
+    tokens.forEach((token) => {
         if (token.type === TokenType.COMMA_TOKEN) {
             if (arg.length === 0) {
                 throw new Error(`Error parsing function args, zero tokens for arg`);

src/css/syntax/tokenizer.ts

@@ -315,7 +315,7 @@ export class Tokenizer {
         this._value = [];
     }
 
-    write(chunk: string) {
+    write(chunk: string): void {
         this._value = this._value.concat(toCodePoints(chunk));
     }
 
@@ -542,8 +542,11 @@ export class Tokenizer {
         }
 
         if (questionMarks) {
-            const start = parseInt(fromCodePoint(...digits.map(digit => (digit === QUESTION_MARK ? ZERO : digit))), 16);
+            const start = parseInt(
-            const end = parseInt(fromCodePoint(...digits.map(digit => (digit === QUESTION_MARK ? F : digit))), 16);
+                fromCodePoint(...digits.map((digit) => (digit === QUESTION_MARK ? ZERO : digit))),
+                16
+            );
+            const end = parseInt(fromCodePoint(...digits.map((digit) => (digit === QUESTION_MARK ? F : digit))), 16);
             return {type: TokenType.UNICODE_RANGE_TOKEN, start, end};
         }
 
@@ -642,7 +645,7 @@ export class Tokenizer {
 
     private consumeBadUrlRemnants(): void {
         while (true) {
-            let codePoint = this.consumeCodePoint();
+            const codePoint = this.consumeCodePoint();
             if (codePoint === RIGHT_PARENTHESIS || codePoint === EOF) {
                 return;
             }
@@ -702,7 +705,7 @@ export class Tokenizer {
     }
 
     private consumeNumber() {
-        let repr = [];
+        const repr = [];
         let type = FLAG_INTEGER;
         let c1 = this.peekCodePoint(0);
         if (c1 === PLUS_SIGN || c1 === HYPHEN_MINUS) {
@@ -724,7 +727,7 @@ export class Tokenizer {
 
         c1 = this.peekCodePoint(0);
         c2 = this.peekCodePoint(1);
-        let c3 = this.peekCodePoint(2);
+        const c3 = this.peekCodePoint(2);
         if ((c1 === E || c1 === e) && (((c2 === PLUS_SIGN || c2 === HYPHEN_MINUS) && isDigit(c3)) || isDigit(c2))) {
             repr.push(this.consumeCodePoint(), this.consumeCodePoint());
             type = FLAG_NUMBER;
@@ -743,7 +746,7 @@ export class Tokenizer {
         const c3 = this.peekCodePoint(2);
 
         if (isIdentifierStart(c1, c2, c3)) {
-            let unit = this.consumeName();
+            const unit = this.consumeName();
             return {type: TokenType.DIMENSION_TOKEN, number, flags, unit};
         }
 

src/css/types/__tests__/image-tests.ts

@@ -40,25 +40,37 @@ describe('types', () => {
                     deepStrictEqual(parse('linear-gradient(yellow, blue)'), {
                         angle: deg(180),
                         type: CSSImageType.LINEAR_GRADIENT,
-                        stops: [{color: colorParse('yellow'), stop: null}, {color: colorParse('blue'), stop: null}]
+                        stops: [
+                            {color: colorParse('yellow'), stop: null},
+                            {color: colorParse('blue'), stop: null}
+                        ]
                     }));
                 it('linear-gradient(to bottom, yellow, blue)', () =>
                     deepStrictEqual(parse('linear-gradient(to bottom, yellow, blue)'), {
                         angle: deg(180),
                         type: CSSImageType.LINEAR_GRADIENT,
-                        stops: [{color: colorParse('yellow'), stop: null}, {color: colorParse('blue'), stop: null}]
+                        stops: [
+                            {color: colorParse('yellow'), stop: null},
+                            {color: colorParse('blue'), stop: null}
+                        ]
                     }));
                 it('linear-gradient(180deg, yellow, blue)', () =>
                     deepStrictEqual(parse('linear-gradient(180deg, yellow, blue)'), {
                         angle: deg(180),
                         type: CSSImageType.LINEAR_GRADIENT,
-                        stops: [{color: colorParse('yellow'), stop: null}, {color: colorParse('blue'), stop: null}]
+                        stops: [
+                            {color: colorParse('yellow'), stop: null},
+                            {color: colorParse('blue'), stop: null}
+                        ]
                     }));
                 it('linear-gradient(to top, blue, yellow)', () =>
                     deepStrictEqual(parse('linear-gradient(to top, blue, yellow)'), {
                         angle: 0,
                         type: CSSImageType.LINEAR_GRADIENT,
-                        stops: [{color: colorParse('blue'), stop: null}, {color: colorParse('yellow'), stop: null}]
+                        stops: [
+                            {color: colorParse('blue'), stop: null},
+                            {color: colorParse('yellow'), stop: null}
+                        ]
                     }));
                 it('linear-gradient(to top right, blue, yellow)', () =>
                     deepStrictEqual(parse('linear-gradient(to top right, blue, yellow)'), {
@@ -67,7 +79,10 @@ describe('types', () => {
                             {type: TokenType.NUMBER_TOKEN, number: 0, flags: 4}
                         ],
                         type: CSSImageType.LINEAR_GRADIENT,
-                        stops: [{color: colorParse('blue'), stop: null}, {color: colorParse('yellow'), stop: null}]
+                        stops: [
+                            {color: colorParse('blue'), stop: null},
+                            {color: colorParse('yellow'), stop: null}
+                        ]
                     }));
                 it('linear-gradient(to bottom, yellow 0%, blue 100%)', () =>
                     deepStrictEqual(parse('linear-gradient(to bottom, yellow 0%, blue 100%)'), {

src/css/types/angle.ts

@@ -41,7 +41,7 @@ export const isAngle = (value: CSSValue): boolean => {
 export const parseNamedSide = (tokens: CSSValue[]): number | GradientCorner => {
     const sideOrCorner = tokens
         .filter(isIdentToken)
-        .map(ident => ident.value)
+        .map((ident) => ident.value)
         .join(' ');
 
     switch (sideOrCorner) {

src/css/types/color.ts

@@ -59,9 +59,9 @@ export const color: ITypeDescriptor<Color> = {
     }
 };
 
-export const isTransparent = (color: Color) => (0xff & color) === 0;
+export const isTransparent = (color: Color): boolean => (0xff & color) === 0;
 
-export const asString = (color: Color) => {
+export const asString = (color: Color): string => {
     const alpha = 0xff & color;
     const blue = 0xff & (color >> 8);
     const green = 0xff & (color >> 16);

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

@@ -14,11 +14,11 @@ import {color as colorType} from '../color';
 import {HUNDRED_PERCENT, LengthPercentage, ZERO_LENGTH} from '../length-percentage';
 
 export const webkitGradient = (tokens: CSSValue[]): CSSLinearGradientImage | CSSRadialGradientImage => {
-    let angle = deg(180);
+    const angle = deg(180);
     const stops: UnprocessedGradientColorStop[] = [];
     let type = CSSImageType.LINEAR_GRADIENT;
-    let shape: CSSRadialShape = CSSRadialShape.CIRCLE;
+    const shape: CSSRadialShape = CSSRadialShape.CIRCLE;
-    let size: CSSRadialSize = CSSRadialExtent.FARTHEST_CORNER;
+    const size: CSSRadialSize = CSSRadialExtent.FARTHEST_CORNER;
     const position: LengthPercentage[] = [];
     parseFunctionArgs(tokens).forEach((arg, i) => {
         const firstToken = arg[0];

src/css/types/functions/__tests__/radial-gradient.ts

@@ -55,7 +55,10 @@ describe('functions', () => {
                     shape: CSSRadialShape.CIRCLE,
                     size: [{type: TokenType.DIMENSION_TOKEN, number: 20, flags: 4, unit: 'px'}],
                     position: [],
-                    stops: [{color: colorParse('red'), stop: null}, {color: colorParse('blue'), stop: null}]
+                    stops: [
+                        {color: colorParse('red'), stop: null},
+                        {color: colorParse('blue'), stop: null}
+                    ]
                 }));
         });
     });

src/css/types/functions/counter.ts

@@ -9,7 +9,7 @@ export class CounterState {
         this.counters = {};
     }
 
-    getCounterValue(name: string) {
+    getCounterValue(name: string): number {
         const counter = this.counters[name];
 
         if (counter && counter.length) {
@@ -23,8 +23,8 @@ export class CounterState {
         return counter ? counter : [];
     }
 
-    pop(counters: string[]) {
+    pop(counters: string[]): void {
-        counters.forEach(counter => this.counters[counter].pop());
+        counters.forEach((counter) => this.counters[counter].pop());
     }
 
     parse(style: CSSParsedCounterDeclaration): string[] {
@@ -33,7 +33,7 @@ export class CounterState {
         let canReset = true;
 
         if (counterIncrement !== null) {
-            counterIncrement.forEach(entry => {
+            counterIncrement.forEach((entry) => {
                 const counter = this.counters[entry.counter];
                 if (counter && entry.increment !== 0) {
                     canReset = false;
@@ -44,7 +44,7 @@ export class CounterState {
 
         const counterNames: string[] = [];
         if (canReset) {
-            counterReset.forEach(entry => {
+            counterReset.forEach((entry) => {
                 let counter = this.counters[entry.counter];
                 counterNames.push(entry.counter);
                 if (!counter) {
@@ -70,42 +70,8 @@ const ROMAN_UPPER: CounterSymbols = {
 
 const ARMENIAN: CounterSymbols = {
     integers: [
-        9000,
+        9000, 8000, 7000, 6000, 5000, 4000, 3000, 2000, 1000, 900, 800, 700, 600, 500, 400, 300, 200, 100, 90, 80, 70,
-        8000,
+        60, 50, 40, 30, 20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1
-        7000,
-        6000,
-        5000,
-        4000,
-        3000,
-        2000,
-        1000,
-        900,
-        800,
-        700,
-        600,
-        500,
-        400,
-        300,
-        200,
-        100,
-        90,
-        80,
-        70,
-        60,
-        50,
-        40,
-        30,
-        20,
-        10,
-        9,
-        8,
-        7,
-        6,
-        5,
-        4,
-        3,
-        2,
-        1
     ],
     values: [
         'Ք',
@@ -149,43 +115,8 @@ const ARMENIAN: CounterSymbols = {
 
 const HEBREW: CounterSymbols = {
     integers: [
-        10000,
+        10000, 9000, 8000, 7000, 6000, 5000, 4000, 3000, 2000, 1000, 400, 300, 200, 100, 90, 80, 70, 60, 50, 40, 30, 20,
-        9000,
+        19, 18, 17, 16, 15, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1
-        8000,
-        7000,
-        6000,
-        5000,
-        4000,
-        3000,
-        2000,
-        1000,
-        400,
-        300,
-        200,
-        100,
-        90,
-        80,
-        70,
-        60,
-        50,
-        40,
-        30,
-        20,
-        19,
-        18,
-        17,
-        16,
-        15,
-        10,
-        9,
-        8,
-        7,
-        6,
-        5,
-        4,
-        3,
-        2,
-        1
     ],
     values: [
         'י׳',
@@ -230,43 +161,8 @@ const HEBREW: CounterSymbols = {
 
 const GEORGIAN: CounterSymbols = {
     integers: [
-        10000,
+        10000, 9000, 8000, 7000, 6000, 5000, 4000, 3000, 2000, 1000, 900, 800, 700, 600, 500, 400, 300, 200, 100, 90,
-        9000,
+        80, 70, 60, 50, 40, 30, 20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1
-        8000,
-        7000,
-        6000,
-        5000,
-        4000,
-        3000,
-        2000,
-        1000,
-        900,
-        800,
-        700,
-        600,
-        500,
-        400,
-        300,
-        200,
-        100,
-        90,
-        80,
-        70,
-        60,
-        50,
-        40,
-        30,
-        20,
-        10,
-        9,
-        8,
-        7,
-        6,
-        5,
-        4,
-        3,
-        2,
-        1
     ],
     values: [
         'ჵ',
@@ -362,21 +258,21 @@ const createCounterStyleFromRange = (
 
     return (
         (value < 0 ? '-' : '') +
-        (createCounterStyleWithSymbolResolver(Math.abs(value), codePointRangeLength, isNumeric, codePoint =>
+        (createCounterStyleWithSymbolResolver(Math.abs(value), codePointRangeLength, isNumeric, (codePoint) =>
             fromCodePoint(Math.floor(codePoint % codePointRangeLength) + codePointRangeStart)
         ) +
             suffix)
     );
 };
 
-const createCounterStyleFromSymbols = (value: number, symbols: string, suffix: string = '. '): string => {
+const createCounterStyleFromSymbols = (value: number, symbols: string, suffix = '. '): string => {
     const codePointRangeLength = symbols.length;
     return (
         createCounterStyleWithSymbolResolver(
             Math.abs(value),
             codePointRangeLength,
             false,
-            codePoint => symbols[Math.floor(codePoint % codePointRangeLength)]
+            (codePoint) => symbols[Math.floor(codePoint % codePointRangeLength)]
         ) + suffix
     );
 };
@@ -405,7 +301,7 @@ const createCJKCounter = (
     }
 
     for (let digit = 0; tmp > 0 && digit <= 4; digit++) {
-        let coefficient = tmp % 10;
+        const coefficient = tmp % 10;
 
         if (coefficient === 0 && contains(flags, CJK_ZEROS) && string !== '') {
             string = numbers[coefficient] + string;

src/css/types/functions/gradient.ts

@@ -98,7 +98,12 @@ export const calculateGradientDirection = (
 const distance = (a: number, b: number): number => Math.sqrt(a * a + b * b);
 
 const findCorner = (width: number, height: number, x: number, y: number, closest: boolean): [number, number] => {
-    const corners = [[0, 0], [0, height], [width, 0], [width, height]];
+    const corners = [
+        [0, 0],
+        [0, height],
+        [width, 0],
+        [width, height]
+    ];
 
     return corners.reduce(
         (stat, corner) => {

src/css/types/image.ts

@@ -98,8 +98,8 @@ export const image: ITypeDescriptor<ICSSImage> = {
     }
 };
 
-export function isSupportedImage(value: CSSValue) {
+export function isSupportedImage(value: CSSValue): boolean {
-    return value.type !== TokenType.FUNCTION || SUPPORTED_IMAGE_FUNCTIONS[value.name];
+    return value.type !== TokenType.FUNCTION || !!SUPPORTED_IMAGE_FUNCTIONS[value.name];
 }
 
 const SUPPORTED_IMAGE_FUNCTIONS: Record<string, (args: CSSValue[]) => ICSSImage> = {

src/css/types/length-percentage.ts

@@ -31,10 +31,10 @@ export const getAbsoluteValueForTuple = (
     width: number,
     height: number
 ): [number, number] => {
-    let [x, y] = tuple;
+    const [x, y] = tuple;
     return [getAbsoluteValue(x, width), getAbsoluteValue(typeof y !== 'undefined' ? y : x, height)];
 };
-export const getAbsoluteValue = (token: LengthPercentage, parent: number) => {
+export const getAbsoluteValue = (token: LengthPercentage, parent: number): number => {
     if (token.type === TokenType.PERCENTAGE_TOKEN) {
         return (token.number / 100) * parent;
     }

src/dom/__mocks__/document-cloner.ts

@@ -2,15 +2,14 @@ export class DocumentCloner {
     clonedReferenceElement?: HTMLElement;
 
     constructor() {
-        // eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
         this.clonedReferenceElement = {} as HTMLElement;
     }
 
-    toIFrame() {
+    toIFrame(): Promise<HTMLIFrameElement> {
-        return Promise.resolve({});
+        return Promise.resolve({} as HTMLIFrameElement);
     }
 
-    static destroy() {
+    static destroy(): boolean {
         return true;
     }
 }

src/dom/document-cloner.ts

@@ -130,9 +130,7 @@ export class DocumentCloner {
         }
 
         const clone = node.cloneNode(false) as T;
-        // @ts-ignore
         if (isImageElement(clone) && clone.loading === 'lazy') {
-            // @ts-ignore
             clone.loading = 'eager';
         }
 
@@ -351,7 +349,7 @@ export class DocumentCloner {
         const anonymousReplacedElement = document.createElement('html2canvaspseudoelement');
         copyCSSStyles(style, anonymousReplacedElement);
 
-        declaration.content.forEach(token => {
+        declaration.content.forEach((token) => {
             if (token.type === TokenType.STRING_TOKEN) {
                 anonymousReplacedElement.appendChild(document.createTextNode(token.value));
             } else if (token.type === TokenType.URL_TOKEN) {
@@ -390,7 +388,7 @@ export class DocumentCloner {
                                 : LIST_STYLE_TYPE.DECIMAL;
                         const separator = delim && delim.type === TokenType.STRING_TOKEN ? delim.value : '';
                         const text = counterStates
-                            .map(value => createCounterText(value, counterType, false))
+                            .map((value) => createCounterText(value, counterType, false))
                             .join(separator);
 
                         anonymousReplacedElement.appendChild(document.createTextNode(text));
@@ -474,15 +472,18 @@ const iframeLoader = (iframe: HTMLIFrameElement): Promise<HTMLIFrameElement> =>
 
         const documentClone = cloneWindow.document;
 
-        cloneWindow.onload = iframe.onload = documentClone.onreadystatechange = () => {
+        cloneWindow.onload =
-            cloneWindow.onload = iframe.onload = documentClone.onreadystatechange = null;
+            iframe.onload =
-            const interval = setInterval(() => {
+            documentClone.onreadystatechange =
-                if (documentClone.body.childNodes.length > 0 && documentClone.readyState === 'complete') {
+                () => {
-                    clearInterval(interval);
+                    cloneWindow.onload = iframe.onload = documentClone.onreadystatechange = null;
-                    resolve(iframe);
+                    const interval = setInterval(() => {
-                }
+                        if (documentClone.body.childNodes.length > 0 && documentClone.readyState === 'complete') {
-            }, 50);
+                            clearInterval(interval);
-        };
+                            resolve(iframe);
+                        }
+                    }, 50);
+                };
     });
 };
 

src/dom/replaced-elements/iframe-element-container.ts

@@ -28,8 +28,9 @@ export class IFrameElementContainer extends ElementContainer {
 
                 // http://www.w3.org/TR/css3-background/#special-backgrounds
                 const documentBackgroundColor = iframe.contentWindow.document.documentElement
-                    ? parseColor(getComputedStyle(iframe.contentWindow.document.documentElement)
+                    ? parseColor(
-                          .backgroundColor as string)
+                          getComputedStyle(iframe.contentWindow.document.documentElement).backgroundColor as string
+                      )
                     : COLORS.TRANSPARENT;
                 const bodyBackgroundColor = iframe.contentWindow.document.body
                     ? parseColor(getComputedStyle(iframe.contentWindow.document.body).backgroundColor as string)

src/dom/replaced-elements/input-element-container.ts

@@ -56,10 +56,21 @@ export class InputElementContainer extends ElementContainer {
 
         if (this.type === CHECKBOX || this.type === RADIO) {
             this.styles.backgroundColor = 0xdededeff;
-            this.styles.borderTopColor = this.styles.borderRightColor = this.styles.borderBottomColor = this.styles.borderLeftColor = 0xa5a5a5ff;
+            this.styles.borderTopColor =
-            this.styles.borderTopWidth = this.styles.borderRightWidth = this.styles.borderBottomWidth = this.styles.borderLeftWidth = 1;
+                this.styles.borderRightColor =
-            this.styles.borderTopStyle = this.styles.borderRightStyle = this.styles.borderBottomStyle = this.styles.borderLeftStyle =
+                this.styles.borderBottomColor =
-                BORDER_STYLE.SOLID;
+                this.styles.borderLeftColor =
+                    0xa5a5a5ff;
+            this.styles.borderTopWidth =
+                this.styles.borderRightWidth =
+                this.styles.borderBottomWidth =
+                this.styles.borderLeftWidth =
+                    1;
+            this.styles.borderTopStyle =
+                this.styles.borderRightStyle =
+                this.styles.borderBottomStyle =
+                this.styles.borderLeftStyle =
+                    BORDER_STYLE.SOLID;
             this.styles.backgroundClip = [BACKGROUND_CLIP.BORDER_BOX];
             this.styles.backgroundOrigin = [BACKGROUND_ORIGIN.BORDER_BOX];
             this.bounds = reformatInputBounds(this.bounds);
@@ -67,10 +78,18 @@ export class InputElementContainer extends ElementContainer {
 
         switch (this.type) {
             case CHECKBOX:
-                this.styles.borderTopRightRadius = this.styles.borderTopLeftRadius = this.styles.borderBottomRightRadius = this.styles.borderBottomLeftRadius = CHECKBOX_BORDER_RADIUS;
+                this.styles.borderTopRightRadius =
+                    this.styles.borderTopLeftRadius =
+                    this.styles.borderBottomRightRadius =
+                    this.styles.borderBottomLeftRadius =
+                        CHECKBOX_BORDER_RADIUS;
                 break;
             case RADIO:
-                this.styles.borderTopRightRadius = this.styles.borderTopLeftRadius = this.styles.borderBottomRightRadius = this.styles.borderBottomLeftRadius = RADIO_BORDER_RADIUS;
+                this.styles.borderTopRightRadius =
+                    this.styles.borderTopLeftRadius =
+                    this.styles.borderBottomRightRadius =
+                    this.styles.borderBottomLeftRadius =
+                        RADIO_BORDER_RADIUS;
                 break;
         }
     }

src/global.d.ts

@@ -9,5 +9,6 @@ interface DocumentType extends Node, ChildNode {
 }
 
 interface Document {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     fonts: any;
 }

src/invariant.ts

@@ -1,4 +1,4 @@
-export const invariant = (assertion: boolean, error: string) => {
+export const invariant = (assertion: boolean, error: string): void => {
     if (!assertion) {
         console.error(error);
     }

src/render/background.ts

@@ -218,7 +218,7 @@ export const calculateBackgroundRepeatPath = (
     [width, height]: [number, number],
     backgroundPositioningArea: Bounds,
     backgroundPaintingArea: Bounds
-) => {
+): [Vector, Vector, Vector, Vector] => {
     switch (repeat) {
         case BACKGROUND_REPEAT.REPEAT_X:
             return [

src/render/canvas/canvas-renderer.ts

@@ -88,21 +88,19 @@ export class CanvasRenderer {
         this.ctx.textBaseline = 'bottom';
         this._activeEffects = [];
         Logger.getInstance(options.id).debug(
-            `Canvas renderer initialized (${options.width}x${options.height} at ${options.x},${options.y}) with scale ${
+            `Canvas renderer initialized (${options.width}x${options.height} at ${options.x},${options.y}) with scale ${options.scale}`
-                options.scale
-            }`
         );
     }
 
-    applyEffects(effects: IElementEffect[], target: EffectTarget) {
+    applyEffects(effects: IElementEffect[], target: EffectTarget): void {
         while (this._activeEffects.length) {
             this.popEffect();
         }
 
-        effects.filter(effect => contains(effect.target, target)).forEach(effect => this.applyEffect(effect));
+        effects.filter((effect) => contains(effect.target, target)).forEach((effect) => this.applyEffect(effect));
     }
 
-    applyEffect(effect: IElementEffect) {
+    applyEffect(effect: IElementEffect): void {
         this.ctx.save();
         if (isOpacityEffect(effect)) {
             this.ctx.globalAlpha = effect.opacity;
@@ -129,30 +127,30 @@ export class CanvasRenderer {
         this._activeEffects.push(effect);
     }
 
-    popEffect() {
+    popEffect(): void {
         this._activeEffects.pop();
         this.ctx.restore();
     }
 
-    async renderStack(stack: StackingContext) {
+    async renderStack(stack: StackingContext): Promise<void> {
         const styles = stack.element.container.styles;
         if (styles.isVisible()) {
             await this.renderStackContent(stack);
         }
     }
 
-    async renderNode(paint: ElementPaint) {
+    async renderNode(paint: ElementPaint): Promise<void> {
         if (paint.container.styles.isVisible()) {
             await this.renderNodeBackgroundAndBorders(paint);
             await this.renderNodeContent(paint);
         }
     }
 
-    renderTextWithLetterSpacing(text: TextBounds, letterSpacing: number, baseline: number) {
+    renderTextWithLetterSpacing(text: TextBounds, letterSpacing: number, baseline: number): void {
         if (letterSpacing === 0) {
             this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + baseline);
         } else {
-            const letters = toCodePoints(text.text).map(i => fromCodePoint(i));
+            const letters = toCodePoints(text.text).map((i) => fromCodePoint(i));
             letters.reduce((left, letter) => {
                 this.ctx.fillText(letter, left, text.bounds.top + baseline);
 
@@ -163,7 +161,7 @@ export class CanvasRenderer {
 
     private createFontStyle(styles: CSSParsedDeclaration): string[] {
         const fontVariant = styles.fontVariant
-            .filter(variant => variant === 'normal' || variant === 'small-caps')
+            .filter((variant) => variant === 'normal' || variant === 'small-caps')
             .join('');
         const fontFamily = styles.fontFamily.join(', ');
         const fontSize = isDimensionToken(styles.fontSize)
@@ -177,7 +175,7 @@ export class CanvasRenderer {
         ];
     }
 
-    async renderTextNode(text: TextContainer, styles: CSSParsedDeclaration) {
+    async renderTextNode(text: TextContainer, styles: CSSParsedDeclaration): Promise<void> {
         const [font, fontFamily, fontSize] = this.createFontStyle(styles);
 
         this.ctx.font = font;
@@ -185,7 +183,7 @@ export class CanvasRenderer {
 
         const {baseline, middle} = this.fontMetrics.getMetrics(fontFamily, fontSize);
 
-        text.textBounds.forEach(text => {
+        text.textBounds.forEach((text) => {
             this.ctx.fillStyle = asString(styles.color);
             this.renderTextWithLetterSpacing(text, styles.letterSpacing, baseline);
             const textShadows: TextShadow = styles.textShadow;
@@ -194,7 +192,7 @@ export class CanvasRenderer {
                 textShadows
                     .slice(0)
                     .reverse()
-                    .forEach(textShadow => {
+                    .forEach((textShadow) => {
                         this.ctx.shadowColor = asString(textShadow.color);
                         this.ctx.shadowOffsetX = textShadow.offsetX.number * this.options.scale;
                         this.ctx.shadowOffsetY = textShadow.offsetY.number * this.options.scale;
@@ -211,7 +209,7 @@ export class CanvasRenderer {
 
             if (styles.textDecorationLine.length) {
                 this.ctx.fillStyle = asString(styles.textDecorationColor || styles.color);
-                styles.textDecorationLine.forEach(textDecorationLine => {
+                styles.textDecorationLine.forEach((textDecorationLine) => {
                     switch (textDecorationLine) {
                         case TEXT_DECORATION_LINE.UNDERLINE:
                             // Draws a line at the baseline of the font
@@ -247,7 +245,7 @@ export class CanvasRenderer {
         container: ReplacedElementContainer,
         curves: BoundCurves,
         image: HTMLImageElement | HTMLCanvasElement
-    ) {
+    ): void {
         if (image && container.intrinsicWidth > 0 && container.intrinsicHeight > 0) {
             const box = contentBox(container);
             const path = calculatePaddingBoxPath(curves);
@@ -269,7 +267,7 @@ export class CanvasRenderer {
         }
     }
 
-    async renderNodeContent(paint: ElementPaint) {
+    async renderNodeContent(paint: ElementPaint): Promise<void> {
         this.applyEffects(paint.effects, EffectTarget.CONTENT);
         const container = paint.container;
         const curves = paint.curves;
@@ -456,7 +454,7 @@ export class CanvasRenderer {
         }
     }
 
-    async renderStackContent(stack: StackingContext) {
+    async renderStackContent(stack: StackingContext): Promise<void> {
         // https://www.w3.org/TR/css-position-3/#painting-order
         // 1. the background and borders of the element forming the stacking context.
         await this.renderNodeBackgroundAndBorders(stack.element);
@@ -504,7 +502,7 @@ export class CanvasRenderer {
         }
     }
 
-    mask(paths: Path[]) {
+    mask(paths: Path[]): void {
         this.ctx.beginPath();
         this.ctx.moveTo(0, 0);
         this.ctx.lineTo(this.canvas.width, 0);
@@ -515,13 +513,13 @@ export class CanvasRenderer {
         this.ctx.closePath();
     }
 
-    path(paths: Path[]) {
+    path(paths: Path[]): void {
         this.ctx.beginPath();
         this.formatPath(paths);
         this.ctx.closePath();
     }
 
-    formatPath(paths: Path[]) {
+    formatPath(paths: Path[]): void {
         paths.forEach((point, index) => {
             const start: Vector = isBezierCurve(point) ? point.start : point;
             if (index === 0) {
@@ -543,7 +541,7 @@ export class CanvasRenderer {
         });
     }
 
-    renderRepeat(path: Path[], pattern: CanvasPattern | CanvasGradient, offsetX: number, offsetY: number) {
+    renderRepeat(path: Path[], pattern: CanvasPattern | CanvasGradient, offsetX: number, offsetY: number): void {
         this.path(path);
         this.ctx.fillStyle = pattern;
         this.ctx.translate(offsetX, offsetY);
@@ -564,7 +562,7 @@ export class CanvasRenderer {
         return canvas;
     }
 
-    async renderBackgroundImage(container: ElementContainer) {
+    async renderBackgroundImage(container: ElementContainer): Promise<void> {
         let index = container.styles.backgroundImage.length - 1;
         for (const backgroundImage of container.styles.backgroundImage.slice(0).reverse()) {
             if (backgroundImage.type === CSSImageType.URL) {
@@ -598,7 +596,7 @@ export class CanvasRenderer {
                 const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
                 const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
 
-                processColorStops(backgroundImage.stops, lineLength).forEach(colorStop =>
+                processColorStops(backgroundImage.stops, lineLength).forEach((colorStop) =>
                     gradient.addColorStop(colorStop.stop, asString(colorStop.color))
                 );
 
@@ -622,7 +620,7 @@ export class CanvasRenderer {
                 if (rx > 0 && rx > 0) {
                     const radialGradient = this.ctx.createRadialGradient(left + x, top + y, 0, left + x, top + y, rx);
 
-                    processColorStops(backgroundImage.stops, rx * 2).forEach(colorStop =>
+                    processColorStops(backgroundImage.stops, rx * 2).forEach((colorStop) =>
                         radialGradient.addColorStop(colorStop.stop, asString(colorStop.color))
                     );
 
@@ -651,13 +649,13 @@ export class CanvasRenderer {
         }
     }
 
-    async renderSolidBorder(color: Color, side: number, curvePoints: BoundCurves) {
+    async renderSolidBorder(color: Color, side: number, curvePoints: BoundCurves): Promise<void> {
         this.path(parsePathForBorder(curvePoints, side));
         this.ctx.fillStyle = asString(color);
         this.ctx.fill();
     }
 
-    async renderDoubleBorder(color: Color, width: number, side: number, curvePoints: BoundCurves) {
+    async renderDoubleBorder(color: Color, width: number, side: number, curvePoints: BoundCurves): Promise<void> {
         if (width < 3) {
             await this.renderSolidBorder(color, side, curvePoints);
             return;
@@ -672,7 +670,7 @@ export class CanvasRenderer {
         this.ctx.fill();
     }
 
-    async renderNodeBackgroundAndBorders(paint: ElementPaint) {
+    async renderNodeBackgroundAndBorders(paint: ElementPaint): Promise<void> {
         this.applyEffects(paint.effects, EffectTarget.BACKGROUND_BORDERS);
         const styles = paint.container.styles;
         const hasBackground = !isTransparent(styles.backgroundColor) || styles.backgroundImage.length;
@@ -706,7 +704,7 @@ export class CanvasRenderer {
             styles.boxShadow
                 .slice(0)
                 .reverse()
-                .forEach(shadow => {
+                .forEach((shadow) => {
                     this.ctx.save();
                     const borderBoxArea = calculateBorderBoxPath(paint.curves);
                     const maskOffset = shadow.inset ? 0 : MASK_OFFSET;
@@ -774,7 +772,7 @@ export class CanvasRenderer {
         side: number,
         curvePoints: BoundCurves,
         style: BORDER_STYLE
-    ) {
+    ): Promise<void> {
         this.ctx.save();
 
         const strokePaths = parsePathForBorderStroke(curvePoints, side);

src/render/canvas/foreignobject-renderer.ts

@@ -20,13 +20,11 @@ export class ForeignObjectRenderer {
         this.ctx.scale(this.options.scale, this.options.scale);
         this.ctx.translate(-options.x + options.scrollX, -options.y + options.scrollY);
         Logger.getInstance(options.id).debug(
-            `EXPERIMENTAL ForeignObject renderer initialized (${options.width}x${options.height} at ${options.x},${
+            `EXPERIMENTAL ForeignObject renderer initialized (${options.width}x${options.height} at ${options.x},${options.y}) with scale ${options.scale}`
-                options.y
-            }) with scale ${options.scale}`
         );
     }
 
-    async render(element: HTMLElement) {
+    async render(element: HTMLElement): Promise<HTMLCanvasElement> {
         const svg = createForeignObjectSVG(
             Math.max(this.options.windowWidth, this.options.width) * this.options.scale,
             Math.max(this.options.windowHeight, this.options.height) * this.options.scale,

src/render/stacking-context.ts

@@ -84,7 +84,7 @@ const parseStackTree = (
     realStackingContext: StackingContext,
     listItems: ElementPaint[]
 ) => {
-    parent.container.elements.forEach(child => {
+    parent.container.elements.forEach((child) => {
         const treatAsRealStackingContext = contains(child.flags, FLAGS.CREATES_REAL_STACKING_CONTEXT);
         const createsStackingContext = contains(child.flags, FLAGS.CREATES_STACKING_CONTEXT);
         const paintContainer = new ElementPaint(child, parent.getParentEffects());

tests/karma.ts

@@ -25,9 +25,9 @@ servers.push(corsApp.listen(8081));
 
 karmaTestRunner()
     .then(() => {
-        servers.forEach(server => server.close());
+        servers.forEach((server) => server.close());
     })
-    .catch(e => {
+    .catch((e) => {
         console.error(e);
         process.exit(1);
     });

tests/rollup.config.ts

@@ -1,8 +1,8 @@
-import nodeResolve from 'rollup-plugin-node-resolve';
+import nodeResolve from '@rollup/plugin-node-resolve';
-import commonjs from 'rollup-plugin-commonjs';
+import commonjs from '@rollup/plugin-commonjs';
 import sourceMaps from 'rollup-plugin-sourcemaps';
-import typescript from 'rollup-plugin-typescript2';
+import typescript from '@rollup/plugin-typescript';
-import json from 'rollup-plugin-json';
+import json from '@rollup/plugin-json';
 import {resolve} from 'path';
 
 const pkg = require('../package.json');
@@ -36,14 +36,12 @@ export default {
         // Allow json resolution
         json(),
         // Compile TypeScript files
-        typescript({useTsconfigDeclarationDir: true, tsconfig: resolve(__dirname, 'tsconfig.json')}),
+        typescript({
+            tsconfig: resolve(__dirname, 'tsconfig.json')
+        }),
         // Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)
         commonjs({
-            include: 'node_modules/**',
+            include: 'node_modules/**'
-            namedModules: {
-                'node_modules/platform/platform.js': ['name', 'version'],
-                'node_modules/es6-promise/dist/es6-promise.js': ['Promise']
-            }
         }),
 
         // Resolve source maps to the original source

tests/testrunner.ts

@@ -42,11 +42,11 @@ const uploadResults = (canvas: HTMLCanvasElement, url: string) => {
 };
 
 testList
-    .filter(test => {
+    .filter((test) => {
         return !Array.isArray(ignoredTests[test]) || ignoredTests[test].indexOf(platform.name || '') === -1;
     })
-    .forEach(url => {
+    .forEach((url) => {
-        describe(url, function() {
+        describe(url, function () {
             this.timeout(60000);
             this.retries(2);
             const windowWidth = 800;
@@ -58,7 +58,7 @@ testList
             testContainer.style.position = 'fixed';
             testContainer.style.left = '10000px';
 
-            before(done => {
+            before((done) => {
                 testContainer.onload = () => done();
 
                 testContainer.src = url + '?selenium&run=false&reftest&' + Math.random();

tests/tsconfig.json

@@ -1,6 +1,9 @@
 {
     "extends": "../tsconfig.json",
     "compilerOptions": {
-        "types": ["node", "mocha"]
+        "types": ["node", "mocha"],
-    }
+        "rootDir": "../",
+        "declaration": false
+    },
+    "include": ["**/*.ts"]
 }

tsconfig.json

@@ -6,14 +6,14 @@
         "noUnusedParameters": true,
         "strictNullChecks": true,
         "strictPropertyInitialization": true,
-        "resolveJsonModule": true,
         "types": ["node", "jest"],
         "target": "es5",
         "lib": ["es2015", "dom"],
         "sourceMap": true,
         "outDir": "dist/lib",
         "declaration": true,
-        "declarationDir": "dist/types"
+        "declarationDir": "dist/types",
+        "resolveJsonModule": true
     },
     "include": [
         "src"

www/src/preview.ts

@@ -62,7 +62,7 @@ const DOWN_ARROW = 40;
 const LEFT_ARROW = 37;
 const RIGHT_ARROW = 39;
 
-window.addEventListener('keydown', e => {
+window.addEventListener('keydown', (e) => {
     if (testSelector && browserSelector) {
         if (e.keyCode === UP_ARROW) {
             testSelector.selectedIndex = Math.max(0, testSelector.selectedIndex - 1);
@@ -103,7 +103,7 @@ if (testSelector && browserSelector) {
     browserSelector.addEventListener(
         'change',
         () => {
-            testList[testSelector.value].some(browser => {
+            testList[testSelector.value].some((browser) => {
                 if (browser.id === browserSelector.value) {
                     if (browser) {
                         onBrowserChange(browser);