Warn on unsupported selector

Author: sirreal

html-api-debugger/html-api-integration.php

@@ -70,9 +70,23 @@ function get_normalized_html( string $html, array $options ): ?string {
  * @param array  $options The options.
  */
 function get_tree( string $html, array $options ): array {
+	/**
+	 * Messages generated during parse.
+	 *
+	 * @var string[]
+	 */
+	$warnings = array();
 	$selector = null;
-	if ( isset( $options['selector'] ) && class_exists( '\WP_CSS_Selector' ) ) {
-		$selector = \WP_CSS_Selector::from_selectors( $options['selector'] );
+	if ( isset( $options['selector'] ) && class_exists( '\WP_CSS_Complex_Selector_List' ) ) {
+		$selector = \WP_CSS_Complex_Selector_List::from_selectors( $options['selector'] );
+		if ( null === $selector ) {
+			$warnings[] = 'The provided selector is invalid or unsupported.';
+		}
+	} elseif ( isset( $options['selector'] ) && class_exists( '\WP_CSS_Compound_Selector_List' ) ) {
+		$selector = \WP_CSS_Compound_Selector_List::from_selectors( $options['selector'] );
+		if ( null === $selector ) {
+			$warnings[] = 'The provided selector is invalid or unsupported.';
+		}
 	}
 
 	$processor_state = new ReflectionProperty( WP_HTML_Processor::class, 'state' );
@@ -448,6 +462,7 @@ function get_tree( string $html, array $options ): array {
 		'doctypeSystemId' => $doctype_system_identifier,
 
 		'contextNode' => $context_node,
+		'warnings' => $warnings,
 	);
 }
 

html-api-debugger/interactivity.php

@@ -152,7 +152,6 @@ class="context-html"
 				<span><label>Show virtual <input type="checkbox" data-wp-bind--checked="state.showVirtual" data-wp-on-async--input="handleShowVirtualClick"></label></span>
 				<div>
 					<label>CSS Selectors <textarea placeholder="CSS selector: .my-class" data-wp-on-async--input="handleSelectorChange"></textarea></label>
-					<p data-wp-bind--hidden="!state.selectorErrorMessage" data-wp-text="state.selectorErrorMessage" class="error-holder"></p>
 				</div>
 			</div>
 			<div>
@@ -166,6 +165,13 @@ class="context-html"
 			</div>
 		</div>
 
+		<div data-wp-bind--hidden="!state.htmlapiResponse.result.warnings.0">
+			<template data-wp-each="state.htmlapiResponse.result.warnings">
+				<p data-wp-text="context.item" class="error-holder"></p>
+			</template>
+		</div>
+		<p data-wp-bind--hidden="!state.selectorErrorMessage" data-wp-text="state.selectorErrorMessage" class="error-holder"></p>
+
 		<div>
 			<h2>Processed HTML</h2>
 			<div data-wp-bind--hidden="!state.htmlapiResponse.result.playback">