Merge pull request #120 from ElmoArmy/fix-prettier-rules-conflict

feat(dx): Enable eslint prettier/prettier rules and auto fix them.

packages/react/package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "@iconify/react",
-	"version": "3.1.3",
+	"version": "3.1.4",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@iconify/react",
-			"version": "3.1.3",
+			"version": "3.1.4",
 			"license": "MIT",
 			"devDependencies": {
 				"@babel/preset-env": "^7.16.11",

packages/react/package.json

@@ -2,7 +2,7 @@
 	"name": "@iconify/react",
 	"description": "Iconify icon component for React.",
 	"author": "Vjacheslav Trushkin",
-	"version": "3.1.3",
+	"version": "3.1.4",
 	"license": "MIT",
 	"bugs": "https://github.com/iconify/iconify/issues",
 	"homepage": "https://iconify.design/",
@@ -37,6 +37,11 @@
 			"import": "./dist/offline.mjs",
 			"types": "./dist/offline.d.ts",
 			"default": "./dist/offline.js"
+		},
+		"./dist/offline": {
+			"import": "./dist/offline.mjs",
+			"types": "./dist/offline.d.ts",
+			"default": "./dist/offline.js"
 		}
 	},
 	"devDependencies": {

packages/utils/.eslintrc.js

@@ -8,7 +8,7 @@ module.exports = {
 	extends: [
 		'eslint:recommended',
 		'plugin:@typescript-eslint/recommended',
-		//	'plugin:@typescript-eslint/recommended-requiring-type-checking',
+		'plugin:@typescript-eslint/recommended-requiring-type-checking',
 		'plugin:prettier/recommended',
 	],
 	globals: {
@@ -25,7 +25,6 @@ module.exports = {
 		'no-mixed-spaces-and-tabs': ['off'],
 		'no-unused-vars': ['off'],
 		'@typescript-eslint/no-unused-vars-experimental': ['error'],
-		'prettier/prettier': ['off'], // TODO: enable and fix prettier errors.
 	},
 	overrides: [
 		{

packages/utils/src/colors/index.ts

@@ -60,8 +60,8 @@ function fromFunction(value: string): Color | null {
 	}
 
 	// Get function and values
-	const func = (parts[0] as string).trim();
-	const content = (parts[1] as string).trim();
+	const func = parts[0].trim();
+	const content = parts[1].trim();
 
 	// Get alpha and split content
 	let values: string[];
@@ -133,7 +133,7 @@ function fromFunction(value: string): Color | null {
 	const isPercentage: boolean[] = [];
 	const numbers: number[] = [];
 	for (let i = 0; i < 3; i++) {
-		const colorStr = values[i] as string;
+		const colorStr = values[i];
 		const index = colorStr.indexOf('%');
 		const hasPercentage = index !== -1;
 		if (hasPercentage && index !== colorStr.length - 1) {
@@ -435,7 +435,11 @@ export function colorToString(color: Color): string {
 		}
 
 		case 'hsl': {
-			const list = [color.h, color.s + '%', color.l + '%'];
+			const list = [
+				color.h,
+				color.s.toString() + '%',
+				color.l.toString() + '%',
+			];
 			if (color.alpha !== 1) {
 				list.push(color.alpha);
 			}
@@ -445,17 +449,17 @@ export function colorToString(color: Color): string {
 		}
 
 		case 'lab': {
-			const list = [color.l + '%', color.a, color.b];
+			const list = [color.l.toString() + '%', color.a, color.b];
 			if (color.alpha !== 1) {
-				list.push('/ ' + color.alpha);
+				list.push('/ ' + color.alpha.toString());
 			}
 			return 'lab(' + list.join(' ') + ')';
 		}
 
 		case 'lch': {
-			const list = [color.l + '%', color.c, color.h];
+			const list = [color.l.toString() + '%', color.c, color.h];
 			if (color.alpha !== 1) {
-				list.push('/ ' + color.alpha);
+				list.push('/ ' + color.alpha.toString());
 			}
 			return 'lch(' + list.join(' ') + ')';
 		}

packages/utils/src/icon-set/convert-info.ts

@@ -88,9 +88,9 @@ export function convertIconSetInfo(
 	// Get name
 	let name: string;
 	if (typeof source.name === 'string') {
-		name = source.name as string;
+		name = source.name;
 	} else if (typeof source.title === 'string') {
-		name = source.title as string;
+		name = source.title;
 	} else {
 		return null;
 	}

packages/utils/src/icon-set/get-icons.ts

@@ -19,7 +19,7 @@ export function getIcons(
 ): IconifyJSON | null {
 	const result: IconifyJSON = {
 		prefix: data.prefix,
-		icons: Object.create(null),
+		icons: Object.create(null) as never,
 	};
 	const tested: Set<string> = new Set();
 	let empty = true;
@@ -43,9 +43,9 @@ export function getIcons(
 			const copied = copy(data.aliases[name].parent, iteration + 1);
 			if (copied) {
 				if (result.aliases === void 0) {
-					result.aliases = Object.create(null);
+					result.aliases = Object.create(null) as never;
 				}
-				result.aliases![name] = { ...data.aliases[name] };
+				result.aliases[name] = { ...data.aliases[name] };
 			}
 			return copied;
 		}
@@ -56,9 +56,9 @@ export function getIcons(
 			const copied = copy(parent, iteration + 1);
 			if (copied) {
 				if (result.aliases === void 0) {
-					result.aliases = Object.create(null);
+					result.aliases = Object.create(null) as never;
 				}
-				result.aliases![name] = {
+				result.aliases[name] = {
 					parent,
 				};
 			}

packages/utils/src/icon-set/validate.ts

@@ -304,7 +304,7 @@ export function validateIconSet(
 	if (typeof data.chars === 'object') {
 		const chars = data.chars;
 		Object.keys(chars).forEach((char) => {
-			if (!char.match(matchChar) || typeof chars[char] !== 'string') {
+			if (!matchChar.exec(char) || typeof chars[char] !== 'string') {
 				if (fix) {
 					delete chars[char];
 					return;

packages/utils/src/loader/custom.ts

@@ -1,5 +1,9 @@
 import createDebugger from 'debug';
-import type { CustomIconLoader, IconifyLoaderOptions, InlineCollection } from './types';
+import type {
+	CustomIconLoader,
+	IconifyLoaderOptions,
+	InlineCollection,
+} from './types';
 import { mergeIconProps } from './utils';
 
 const debug = createDebugger('@iconify-loader:custom');
@@ -11,7 +15,7 @@ export async function getCustomIcon(
 	custom: CustomIconLoader | InlineCollection,
 	collection: string,
 	icon: string,
-	options?: IconifyLoaderOptions,
+	options?: IconifyLoaderOptions
 ): Promise<string | undefined> {
 	let result: string | undefined | null;
 
@@ -37,7 +41,7 @@ export async function getCustomIcon(
 			collection,
 			icon,
 			options,
-			undefined,
+			undefined
 		);
 	}
 }

packages/utils/src/loader/fs.ts

@@ -1,13 +1,16 @@
 import { promises as fs, Stats } from 'fs';
-import { isPackageExists, resolveModule } from 'local-pkg'
-import type { IconifyJSON } from '@iconify/types'
+import { isPackageExists, resolveModule } from 'local-pkg';
+import type { IconifyJSON } from '@iconify/types';
 import { tryInstallPkg } from './install-pkg';
 
 const _collections: Record<string, Promise<IconifyJSON | undefined>> = {};
 const isLegacyExists = isPackageExists('@iconify/json');
 
-export async function loadCollectionFromFS(name: string, autoInstall = false): Promise<IconifyJSON | undefined> {
-	if (!_collections[name]) {
+export async function loadCollectionFromFS(
+	name: string,
+	autoInstall = false
+): Promise<IconifyJSON | undefined> {
+	if (!(await _collections[name])) {
 		_collections[name] = task();
 	}
 	return _collections[name];
@@ -30,9 +33,10 @@ export async function loadCollectionFromFS(name: string, autoInstall = false): P
 			return undefined;
 		}
 		if (stat && stat.isFile()) {
-			return JSON.parse(await fs.readFile(jsonPath as string, 'utf8')) as IconifyJSON;
-		}
-		else {
+			return JSON.parse(
+				await fs.readFile(jsonPath as string, 'utf8')
+			) as IconifyJSON;
+		} else {
 			return undefined;
 		}
 	}

packages/utils/src/loader/loader.ts

@@ -3,7 +3,7 @@ import { searchForIcon } from './modern';
 import { warnOnce } from './install-pkg';
 import type { IconifyLoaderOptions } from './types';
 
-export const isNode = typeof process < 'u' && typeof process.stdout < 'u'
+export const isNode = typeof process < 'u' && typeof process.stdout < 'u';
 
 export async function loadIcon(
 	collection: string,
@@ -32,9 +32,11 @@ async function importFsModule(): Promise<typeof import('./fs') | undefined> {
 	} catch {
 		try {
 			// cjs environments
-			return require('./fs.js');
-		}
-		catch {
+			// eslint-disable-next-line @typescript-eslint/no-var-requires
+			return require('./fs.js') as Promise<
+				typeof import('./fs') | undefined
+			>;
+		} catch {
 			return undefined;
 		}
 	}
@@ -44,12 +46,24 @@ async function loadNodeBuiltinIcon(
 	collection: string,
 	icon: string,
 	options?: IconifyLoaderOptions,
-	warn = true,
+	warn = true
 ): Promise<string | undefined> {
+	type IconifyJSON = Parameters<typeof searchForIcon>[0];
+	type LoadCollectionFromFS = (
+		collection: string,
+		autoInstall?: boolean
+	) => Promise<IconifyJSON>;
 	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 	// @ts-ignore
-	const { loadCollectionFromFS } = await importFsModule();
-	const iconSet = await loadCollectionFromFS(collection, options?.autoInstall);
+	const {
+		loadCollectionFromFS,
+	}: {
+		loadCollectionFromFS: LoadCollectionFromFS;
+	} = await importFsModule();
+	const iconSet = await loadCollectionFromFS(
+		collection,
+		options?.autoInstall
+	);
 	if (iconSet) {
 		// possible icon names
 		const ids = [
@@ -61,7 +75,8 @@ async function loadNodeBuiltinIcon(
 	}
 
 	if (warn) {
-		warnOnce(`failed to load \`@iconify-json/${collection}\`, have you installed it?`);
+		warnOnce(
+			`failed to load \`@iconify-json/${collection}\`, have you installed it?`
+		);
 	}
 }
-

packages/utils/src/loader/modern.ts

@@ -13,7 +13,7 @@ export async function searchForIcon(
 	iconSet: IconifyJSON,
 	collection: string,
 	ids: string[],
-	options?: IconifyLoaderOptions,
+	options?: IconifyLoaderOptions
 ): Promise<string | undefined> {
 	let iconData: FullIconifyIcon | null;
 	const { customize } = options?.customizations ?? {};
@@ -34,7 +34,7 @@ export async function searchForIcon(
 				collection,
 				id,
 				options,
-				() => attributes,
+				() => attributes
 			);
 		}
 	}

packages/utils/src/loader/types.ts

@@ -80,36 +80,36 @@ export type IconifyLoaderOptions = {
 	 *
 	 * @default false
 	 */
-	addXmlNs?: boolean
+	addXmlNs?: boolean;
 
 	/**
 	 * Scale of icons against 1em
 	 */
-	scale?: number
+	scale?: number;
 
 	/**
 	 * Style to apply to icons by default
 	 *
 	 * @default ''
 	 */
-	defaultStyle?: string
+	defaultStyle?: string;
 
 	/**
 	 * Class names to apply to icons by default
 	 *
 	 * @default ''
 	 */
-	defaultClass?: string
+	defaultClass?: string;
 
 	/**
 	 * Loader for custom loaders
 	 */
-	customCollections?: Record<string, CustomIconLoader | InlineCollection>
+	customCollections?: Record<string, CustomIconLoader | InlineCollection>;
 
 	/**
 	 * Icon customizer
 	 */
-	customizations?: IconCustomizations
+	customizations?: IconCustomizations;
 
 	/**
 	 * Auto install icon sources package when the usages is detected
@@ -118,5 +118,5 @@ export type IconifyLoaderOptions = {
 	 *
 	 * @default false
 	 */
-	autoInstall?: boolean
-}
+	autoInstall?: boolean;
+};

packages/utils/src/loader/utils.ts

@@ -6,16 +6,21 @@ export async function mergeIconProps(
 	collection: string,
 	icon: string,
 	options?: IconifyLoaderOptions,
-	propsProvider?: () => Awaitable<Record<string, string>>,
+	propsProvider?: () => Awaitable<Record<string, string>>
 ): Promise<string> {
-	const { scale, addXmlNs = false } = options ?? {}
-	const {
-		additionalProps = {},
-		iconCustomizer,
-	} = options?.customizations ?? {};
+	const { scale, addXmlNs = false } = options ?? {};
+	const { additionalProps = {}, iconCustomizer } =
+		options?.customizations ?? {};
 	const props: Record<string, string> = (await propsProvider?.()) ?? {};
-	if (!svg.includes(" width=") && !svg.includes(" height=") && typeof scale === 'number') {
-		if ((typeof props.width === 'undefined' || props.width === null) && (typeof props.height === 'undefined' || props.height === null)) {
+	if (
+		!svg.includes(' width=') &&
+		!svg.includes(' height=') &&
+		typeof scale === 'number'
+	) {
+		if (
+			(typeof props.width === 'undefined' || props.width === null) &&
+			(typeof props.height === 'undefined' || props.height === null)
+		) {
 			props.width = `${scale}em`;
 			props.height = `${scale}em`;
 		}
@@ -33,18 +38,24 @@ export async function mergeIconProps(
 			props['xmlns'] = 'http://www.w3.org/2000/svg';
 		}
 		// add xmlns:xlink if xlink present and the xmlns missing
-		if (!svg.includes(' xmlns:xlink=') && svg.includes('xlink:') && !props['xmlns:xlink']) {
+		if (
+			!svg.includes(' xmlns:xlink=') &&
+			svg.includes('xlink:') &&
+			!props['xmlns:xlink']
+		) {
 			props['xmlns:xlink'] = 'http://www.w3.org/1999/xlink';
 		}
 	}
 
 	svg = svg.replace(
 		'<svg ',
-		`<svg ${Object.keys(props).map((p) => `${p}="${props[p]}"`).join(' ')}`
+		`<svg ${Object.keys(props)
+			.map((p) => `${p}="${props[p]}"`)
+			.join(' ')}`
 	);
 
 	if (svg && options) {
-		const { defaultStyle, defaultClass } = options
+		const { defaultStyle, defaultClass } = options;
 		// additional props and iconCustomizer takes precedence
 		if (defaultClass && !svg.includes(' class=')) {
 			svg = svg.replace('<svg ', `<svg class="${defaultClass}" `);

packages/utils/src/svg/build.ts

@@ -102,9 +102,9 @@ export function iconToSVG(
 				// Horizontal flip
 				transformations.push(
 					'translate(' +
-						(box.width + box.left) +
+						(box.width + box.left).toString() +
 						' ' +
-						(0 - box.top) +
+						(0 - box.top).toString() +
 						')'
 				);
 				transformations.push('scale(-1 1)');
@@ -114,9 +114,9 @@ export function iconToSVG(
 			// Vertical flip
 			transformations.push(
 				'translate(' +
-					(0 - box.left) +
+					(0 - box.left).toString() +
 					' ' +
-					(box.height + box.top) +
+					(box.height + box.top).toString() +
 					')'
 			);
 			transformations.push('scale(1 -1)');
@@ -133,7 +133,11 @@ export function iconToSVG(
 				// 90deg
 				tempValue = box.height / 2 + box.top;
 				transformations.unshift(
-					'rotate(90 ' + tempValue + ' ' + tempValue + ')'
+					'rotate(90 ' +
+						tempValue.toString() +
+						' ' +
+						tempValue.toString() +
+						')'
 				);
 				break;
 
@@ -141,9 +145,9 @@ export function iconToSVG(
 				// 180deg
 				transformations.unshift(
 					'rotate(180 ' +
-						(box.width / 2 + box.left) +
+						(box.width / 2 + box.left).toString() +
 						' ' +
-						(box.height / 2 + box.top) +
+						(box.height / 2 + box.top).toString() +
 						')'
 				);
 				break;
@@ -152,7 +156,11 @@ export function iconToSVG(
 				// 270deg
 				tempValue = box.width / 2 + box.left;
 				transformations.unshift(
-					'rotate(-90 ' + tempValue + ' ' + tempValue + ')'
+					'rotate(-90 ' +
+						tempValue.toString() +
+						' ' +
+						tempValue.toString() +
+						')'
 				);
 				break;
 		}
@@ -214,8 +222,8 @@ export function iconToSVG(
 	}
 
 	// Convert to string
-	width = typeof width === 'string' ? width : width + '';
-	height = typeof height === 'string' ? height : height + '';
+	width = typeof width === 'string' ? width : width.toString() + '';
+	height = typeof height === 'string' ? height : height.toString() + '';
 
 	// Result
 	const result: IconifyIconBuildResult = {
@@ -224,7 +232,13 @@ export function iconToSVG(
 			height,
 			preserveAspectRatio: preserveAspectRatio(customisations),
 			viewBox:
-				box.left + ' ' + box.top + ' ' + box.width + ' ' + box.height,
+				box.left.toString() +
+				' ' +
+				box.top.toString() +
+				' ' +
+				box.width.toString() +
+				' ' +
+				box.height.toString(),
 		},
 		body,
 	};

packages/utils/src/svg/encode-svg-for-css.ts

@@ -2,12 +2,19 @@
 export function encodeSvgForCss(svg: string): string {
 	let useSvg = svg.startsWith('<svg>') ? svg.replace('<svg>', '<svg >') : svg;
 	if (!useSvg.includes(' xmlns:xlink=') && useSvg.includes(' xlink:')) {
-		useSvg = useSvg.replace('<svg ', '<svg xmlns:xlink="http://www.w3.org/1999/xlink" ');
+		useSvg = useSvg.replace(
+			'<svg ',
+			'<svg xmlns:xlink="http://www.w3.org/1999/xlink" '
+		);
 	}
 	if (!useSvg.includes(' xmlns=')) {
-		useSvg = useSvg.replace('<svg ', '<svg xmlns="http://www.w3.org/2000/svg" ');
+		useSvg = useSvg.replace(
+			'<svg ',
+			'<svg xmlns="http://www.w3.org/2000/svg" '
+		);
 	}
-	return useSvg.replace(/"/g, '\'')
+	return useSvg
+		.replace(/"/g, "'")
 		.replace(/%/g, '%25')
 		.replace(/#/g, '%23')
 		.replace(/{/g, '%7B')

packages/utils/src/svg/id.ts

@@ -52,7 +52,9 @@ export function replaceIDs(
 	// Replace with unique ids
 	ids.forEach((id) => {
 		const newID =
-			typeof prefix === 'function' ? prefix(id) : prefix + counter++;
+			typeof prefix === 'function'
+				? prefix(id)
+				: prefix + (counter++).toString();
 
 		const escapedID = id.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 

packages/utils/src/svg/size.ts

@@ -33,7 +33,7 @@ export function calculateSize(
 
 	const newParts = [];
 	let code = oldParts.shift() as string;
-	let isNumber = unitsTest.test(code as string);
+	let isNumber = unitsTest.test(code);
 
 	// eslint-disable-next-line no-constant-condition
 	while (true) {

packages/utils/tests/get-custom-icon-test.ts

@@ -15,9 +15,12 @@ describe('Testing getCustomIcon', () => {
 		const result = await getCustomIcon(() => svg, 'a', 'b', {
 			customizations: {
 				transform(icon) {
-					return icon.replace('<svg ', '<svg width="1em" height="1em" ');
+					return icon.replace(
+						'<svg ',
+						'<svg width="1em" height="1em" '
+					);
 				},
-			}
+			},
 		});
 		expect(result && result.indexOf('width="1em"') > -1).toBeTruthy();
 		expect(result && result.indexOf('height="1em"') > -1).toBeTruthy();

packages/utils/tests/iconify-icon-test.ts

@@ -1,16 +1,17 @@
 import { loadIcon } from '../lib';
 
 describe('Testing loadIcon with @iconify-json/flat-color-icons>', () => {
-
 	test('loadIcon works', async () => {
 		const result = await loadIcon('flat-color-icons', 'up-right');
 		expect(result).toBeTruthy();
 	});
 
 	test('loadIcon adds xmlns:xlink', async () => {
-		const result = await loadIcon('flat-color-icons', 'up-right', { addXmlNs: true });
+		const result = await loadIcon('flat-color-icons', 'up-right', {
+			addXmlNs: true,
+		});
 		expect(result).toBeTruthy();
-		expect(result && result.indexOf('xmlns:xlink=') > - 1).toBeTruthy();
+		expect(result && result.indexOf('xmlns:xlink=') > -1).toBeTruthy();
 	});
 
 	test('loadIcon with customize with default style and class', async () => {
@@ -23,13 +24,13 @@ describe('Testing loadIcon with @iconify-json/flat-color-icons>', () => {
 					props.height = '2em';
 					return props;
 				},
-			}
+			},
 		});
 		expect(result).toBeTruthy();
-		expect(result && result.indexOf('margin-top: 1rem;') > - 1).toBeTruthy();
-		expect(result && result.indexOf('class="clazz"') > - 1).toBeTruthy();
-		expect(result && result.indexOf('width="2em"') > - 1).toBeTruthy();
-		expect(result && result.indexOf('height="2em"') > - 1).toBeTruthy();
+		expect(result && result.indexOf('margin-top: 1rem;') > -1).toBeTruthy();
+		expect(result && result.indexOf('class="clazz"') > -1).toBeTruthy();
+		expect(result && result.indexOf('width="2em"') > -1).toBeTruthy();
+		expect(result && result.indexOf('height="2em"') > -1).toBeTruthy();
 	});
 
 	test('loadIcon preserves customizations order', async () => {
@@ -39,16 +40,19 @@ describe('Testing loadIcon with @iconify-json/flat-color-icons>', () => {
 			defaultClass: 'clazz1',
 			customizations: {
 				additionalProps: {
-					'width': '2em',
-					'height': '2em',
-					'style': 'color: blue;',
-					'class': 'clazz2',
+					width: '2em',
+					height: '2em',
+					style: 'color: blue;',
+					class: 'clazz2',
 				},
 				// it will never be called, it is not a custom icon
 				transform(icon) {
-					return icon.replace('<svg ', '<svg width="4em" height="4em" ');
+					return icon.replace(
+						'<svg ',
+						'<svg width="4em" height="4em" '
+					);
 				},
-			}
+			},
 		});
 		expect(result).toBeTruthy();
 		expect(result && result.includes('style="color: blue;"')).toBeTruthy();

packages/utils/tests/load-icon-test.ts

@@ -3,9 +3,9 @@ import { CustomIconLoader, loadIcon } from '../lib';
 
 const fixturesDir = __dirname + '/fixtures';
 
-const loader: CustomIconLoader = async(name) => {
+const loader: CustomIconLoader = async (name) => {
 	return await fs.readFile(`${fixturesDir}/${name}.svg`, 'utf8');
-}
+};
 
 describe('Testing loadIcon', () => {
 	test('CustomCollection', async () => {
@@ -13,8 +13,8 @@ describe('Testing loadIcon', () => {
 		expect(svg).toBeTruthy();
 		const result = await loadIcon('a', 'circle', {
 			customCollections: {
-				'a': {
-					'circle': svg as string,
+				a: {
+					circle: svg as string,
 				},
 			},
 		});
@@ -27,13 +27,16 @@ describe('Testing loadIcon', () => {
 		expect(svg).toBeTruthy();
 		const result = await loadIcon('a', 'circle', {
 			customCollections: {
-				'a': {
-					'circle': svg as string,
+				a: {
+					circle: svg as string,
 				},
 			},
 			customizations: {
 				transform(icon) {
-					return icon.replace('<svg ', '<svg width="1em" height="1em" ');
+					return icon.replace(
+						'<svg ',
+						'<svg width="1em" height="1em" '
+					);
 				},
 			},
 		});
@@ -55,7 +58,7 @@ describe('Testing loadIcon', () => {
 
 		const result = await loadIcon('a', '1f3eb', {
 			customCollections: {
-				'a': {
+				a: {
 					'1f3eb': svg as string,
 				},
 			},

packages/utils/tests/replace-ids-test.ts

@@ -9,7 +9,9 @@ describe('Testing replaceIDs', () => {
 
 		// Using callback
 		let counter = 0;
-		expect(replaceIDs(body, () => 'callback' + counter++)).toBe(expected);
+		expect(
+			replaceIDs(body, () => 'callback' + (counter++).toString())
+		).toBe(expected);
 	});
 
 	test('Many IDs', () => {
@@ -23,7 +25,9 @@ describe('Testing replaceIDs', () => {
 
 		// Using callback
 		let counter = 0;
-		expect(replaceIDs(body, () => 'callbackID' + counter++)).toBe(
+		expect(
+			replaceIDs(body, () => 'callbackID' + (counter++).toString())
+		).toBe(
 			body
 				.replace(/ssvg-id-1st-place-medala/g, 'callbackID0')
 				.replace(/ssvg-id-1st-place-medalb/g, 'callbackID7')
@@ -70,7 +74,9 @@ describe('Testing replaceIDs', () => {
 
 		// To avoid messing up counter, using custom callback
 		let counter = 0;
-		expect(replaceIDs(body, () => 'callbackID' + counter++)).toBe(
+		expect(
+			replaceIDs(body, () => 'callbackID' + (counter++).toString())
+		).toBe(
 			body
 				.replace(/ssvg-id-compassa/g, 'callbackID2')
 				.replace(/ssvg-id-compassb/g, 'callbackID0')

packages/utils/tests/validate-icon-test.ts

@@ -2,7 +2,14 @@ import { validateIconSet } from '../lib/icon-set/validate';
 
 describe('Testing validating icon', () => {
 	// Add various types for testing
-	const validationValues = new Map();
+	const validationValues = new Map<
+		| boolean
+		| Record<string | number | symbol, never>
+		| []
+		| number
+		| string,
+		{ text: string; type: string }
+	>();
 
 	beforeAll(() => {
 		validationValues.set(true, {