fix: Properly decode CSS escape sequences in attribute selector values (#2080)

* fix: Properly decode CSS escape sequences in attribute selector values

CSS.escape() produces hex escape sequences (e.g. \30 for "0") that
querySelectorAll failed to match because the parser only stripped
backslashes instead of decoding them per the CSS Syntax Level 3 spec.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix ref

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: silverwind

packages/happy-dom/src/query-selector/SelectorParser.ts

@@ -57,6 +57,14 @@ const SELECTOR_PSEUDO_REGEXP = /:([a-zA-Z-]+)|([()])/gm;
  */
 const ESCAPED_CHARACTER_REGEXP = /\\/g;
 
+/**
+ * CSS Escape RegExp.
+ *
+ * Matches CSS escape sequences: hex escapes (e.g. \30 , \0041) and character escapes (e.g. \:, \\).
+ * Hex escapes consist of 1-6 hex digits optionally followed by a single whitespace character.
+ */
+const CSS_UNESCAPE_REGEXP = /\\([0-9a-fA-F]{1,6})\s?|\\(.)/g;
+
 /**
  * Attribute Escape RegExp.
  */
@@ -349,28 +357,30 @@ export default class SelectorParser {
 				// Matches attributes with apostrophes, e.g. [attr='value'] or [attr="value"] or [attr='value' i]
 
 				const value = match[13] ?? match[14];
+				const unescapedValue = SelectorParser.cssUnescape(value);
 				selectorItem.attributes = selectorItem.attributes || [];
 				selectorItem.attributes.push({
 					name: match[9].replace(ESCAPED_CHARACTER_REGEXP, ''),
 					operator: match[11] || null,
-					value: value.replace(ESCAPED_CHARACTER_REGEXP, ''),
+					value: unescapedValue,
 					modifier: <'s'>match[15] || null,
 					regExp: this.getAttributeRegExp({
 						operator: match[11],
-						value,
+						value: unescapedValue,
 						modifier: match[15]
 					})
 				});
 			} else if (match[16] && match[19] !== undefined) {
 				// Matches attributes without apostrophes, e.g. [attr=value] or [attr=value i]
 
+				const unescapedValue = SelectorParser.cssUnescape(match[19]);
 				selectorItem.attributes = selectorItem.attributes || [];
 				selectorItem.attributes.push({
 					name: match[16].replace(ESCAPED_CHARACTER_REGEXP, ''),
 					operator: match[18] || null,
-					value: match[19].replace(ESCAPED_CHARACTER_REGEXP, ''),
+					value: unescapedValue,
 					modifier: null,
-					regExp: this.getAttributeRegExp({ operator: match[18], value: match[19] })
+					regExp: this.getAttributeRegExp({ operator: match[18], value: unescapedValue })
 				});
 			} else if (match[21]) {
 				// Matches pseudo selectors with arguments, e.g. ":nth-child(2n+1)" or ":not(.class)"
@@ -635,4 +645,22 @@ export default class SelectorParser {
 
 		return (n) => n > partB - 1;
 	}
+
+	/**
+	 * Unescapes CSS escape sequences in a string value.
+	 *
+	 * Handles hex escapes (e.g. "\30 " → "0", "\0041" → "A") and character escapes (e.g. "\:" → ":").
+	 *
+	 * @see https://www.w3.org/TR/css-syntax-3/#consume-escaped-code-point
+	 * @param value Escaped CSS value.
+	 * @returns Unescaped value.
+	 */
+	private static cssUnescape(value: string): string {
+		return value.replace(CSS_UNESCAPE_REGEXP, (_match, hex, char) => {
+			if (hex) {
+				return String.fromCodePoint(parseInt(hex, 16));
+			}
+			return char;
+		});
+	}
 }

packages/happy-dom/test/query-selector/QuerySelector.test.ts

@@ -649,6 +649,40 @@ describe('QuerySelector', () => {
 			expect(elements[1] === container.children[0].children[1].children[1]).toBe(true);
 		});
 
+		it('Returns elements when attribute value contains CSS hex escape sequences.', () => {
+			const container = document.createElement('div');
+			container.innerHTML =
+				'<div class="toast" data-key="0abc"></div><div class="toast" data-key="other"></div>';
+
+			// CSS.escape('0abc') produces '\\30 abc' (hex escape for "0" followed by "abc")
+			const elements = container.querySelectorAll('[data-key="\\30 abc"]');
+
+			expect(elements.length).toBe(1);
+			expect(elements[0] === container.children[0]).toBe(true);
+		});
+
+		it('Returns elements when attribute value contains CSS character escape sequences.', () => {
+			const container = document.createElement('div');
+			container.innerHTML = '<div data-key="a:b"></div>';
+
+			// Backslash-escaped colon
+			const elements = container.querySelectorAll('[data-key="a\\:b"]');
+
+			expect(elements.length).toBe(1);
+			expect(elements[0] === container.children[0]).toBe(true);
+		});
+
+		it('Returns elements when using CSS.escape() with class selector and attribute value.', () => {
+			const container = document.createElement('div');
+			container.innerHTML = '<div class="toast" data-key="0abc"></div>';
+
+			const escaped = window.CSS.escape('0abc');
+			const elements = container.querySelectorAll(`.toast[data-key="${escaped}"]`);
+
+			expect(elements.length).toBe(1);
+			expect(elements[0] === container.children[0]).toBe(true);
+		});
+
 		it('Returns all elements with an attribute value containing a specified word using "[class~="class2"]".', () => {
 			const container = document.createElement('div');
 			container.innerHTML = QuerySelectorHTML;