add custom-name devoder (#19)

.changeset/tough-poets-switch.md

@@ -0,0 +1,5 @@
+---
+"astro-vtbot": patch
+---
+
+Fixed the check for illegal view transition names which didn't interprete encoded characters correctly

components/css.ts

@@ -35,6 +35,8 @@ export function astroContextIds() {
 	return { inStyleSheets, inElements };
 }
 
+let div: HTMLDivElement = document.createElement('div');
+
 // finds all elements of a _the current document_ with a given property in a style sheet
 // document.styleSheets does not seem to work for arbitrary documents
 export function elementsWithPropertyinStylesheet(
@@ -45,7 +47,7 @@ export function elementsWithPropertyinStylesheet(
 		const style = sheet.ownerNode as HTMLElement;
 		const definedNames = new Set<string>();
 		const matches = style?.innerHTML.matchAll(new RegExp(`${property}:\\s*([^;}]*)`, 'g'));
-		[...matches].forEach((match) => definedNames.add(match[1]));
+		[...matches].forEach((match) => definedNames.add(decode(property, match[1])));
 		try {
 			[...sheet.cssRules].forEach((rule) => {
 				if (rule instanceof CSSStyleRule && rule.style[property]) {
@@ -64,6 +66,13 @@ export function elementsWithPropertyinStylesheet(
 		}
 	});
 	return map;
+
+	function decode(prop: string, value: string): string {
+		div.style[prop] = '';
+		div.style[prop] = value;
+		const res = div.style[prop];
+		return res || value;
+	}
 }
 
 // finds all elements of a document with a given property in their style attribute

test/fixture/src/pages/linter/nine.astro

@@ -6,8 +6,8 @@ import Linter from 'astro-vtbot/components/Linter.astro';
 <Layout title="Linter9">
 	<Linter expanded slot="head" />
 	<main>
-		<a id="toten" href="/linter/ten/">To page 10</a>
-		<h1>Linter 9</h1>
+		<a id="toten" href="/linter/ten/" transition:name="👜✨">To page 10</a>
+		<h1 transition:name="123$%&">Linter 9</h1>
 		<p style="view-transition-name: -123abc">Some content</p>
 	</main>
 </Layout>