From 096053852608ed12a0184840ef48c11a5aa7c4d0 Mon Sep 17 00:00:00 2001
From: Vjacheslav Trushkin <cyberalien@gmail.com>
Date: Thu, 28 Dec 2023 10:24:59 +0200
Subject: [PATCH] chore: improve svg trim and prettify functions

---
 packages/utils/src/svg/pretty.ts          | 3 +++
 packages/utils/src/svg/trim.ts            | 2 ++
 packages/utils/tests/encode-url-test.ts   | 2 +-
 packages/utils/tests/prettify-svg-test.ts | 4 ++--
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/utils/src/svg/pretty.ts b/packages/utils/src/svg/pretty.ts
index 311b036..2e79efd 100644
--- a/packages/utils/src/svg/pretty.ts
+++ b/packages/utils/src/svg/pretty.ts
@@ -14,6 +14,9 @@ export function prettifySVG(
 	let result = '';
 	let level = 0;
 
+	// Add space for self closing tags
+	content = content.replace(/(\s)*\/>/g, ' />');
+
 	while (content.length > 0) {
 		const openIndex = content.indexOf('<');
 		let closeIndex = content.indexOf('>');
diff --git a/packages/utils/src/svg/trim.ts b/packages/utils/src/svg/trim.ts
index 87fcedf..3734df3 100644
--- a/packages/utils/src/svg/trim.ts
+++ b/packages/utils/src/svg/trim.ts
@@ -13,6 +13,8 @@ export function trimSVG(str: string): string {
 			// Trim attribute values
 			.replace(/\s+"/g, '"')
 			.replace(/="\s+/g, '="')
+			// Self closing tags
+			.replace(/(\s)+\/>/g, '/>')
 			// Trim it
 			.trim()
 	);
diff --git a/packages/utils/tests/encode-url-test.ts b/packages/utils/tests/encode-url-test.ts
index 85e791f..260aac1 100644
--- a/packages/utils/tests/encode-url-test.ts
+++ b/packages/utils/tests/encode-url-test.ts
@@ -33,7 +33,7 @@ describe('Testing generating url()', () => {
 </svg>`;
 		const url = svgToURL(trimSVG(html));
 		expect(url).toBe(
-			"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='20' height='10' fill='currentColor'%3E%3Canimate id='animation1' attributeName='height' values='10;5' dur='0.5s' fill='freeze' /%3E%3Canimate id='animation2' attributeName='width' values='20;5' dur='0.2s' begin='animation1.end+1s' fill='freeze' /%3E%3C/rect%3E%3Crect x='2' y='12' width='20' height='5' fill='currentColor'%3E%3Canimate attributeName='height' values='5;10;5' begin='animation1.end+0.2s;animation2.end-0.2s' dur='0.3s' /%3E%3C/rect%3E%3C/svg%3E\")"
+			"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='20' height='10' fill='currentColor'%3E%3Canimate id='animation1' attributeName='height' values='10;5' dur='0.5s' fill='freeze'/%3E%3Canimate id='animation2' attributeName='width' values='20;5' dur='0.2s' begin='animation1.end+1s' fill='freeze'/%3E%3C/rect%3E%3Crect x='2' y='12' width='20' height='5' fill='currentColor'%3E%3Canimate attributeName='height' values='5;10;5' begin='animation1.end+0.2s;animation2.end-0.2s' dur='0.3s'/%3E%3C/rect%3E%3C/svg%3E\")"
 		);
 	});
 });
diff --git a/packages/utils/tests/prettify-svg-test.ts b/packages/utils/tests/prettify-svg-test.ts
index 2ab6a36..3503229 100644
--- a/packages/utils/tests/prettify-svg-test.ts
+++ b/packages/utils/tests/prettify-svg-test.ts
@@ -16,7 +16,7 @@ describe('Prettify SVG', () => {
 				'<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"><circle cx="60" cy="60" r="50"/></svg>'
 			)
 		).toBe(
-			'<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">\n\t<circle cx="60" cy="60" r="50"/>\n</svg>\n'
+			'<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">\n\t<circle cx="60" cy="60" r="50" />\n</svg>\n'
 		);
 
 		// With xml tag
@@ -25,7 +25,7 @@ describe('Prettify SVG', () => {
 				'<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">\n<circle cx="60" cy="60" r="50"/>\n</svg>\n\t'
 			)
 		).toBe(
-			'<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">\n\t<circle cx="60" cy="60" r="50"/>\n</svg>\n'
+			'<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">\n\t<circle cx="60" cy="60" r="50" />\n</svg>\n'
 		);
 	});