test/docs fixes and improvements

crates/biome_js_analyze/src/semantic_analyzers/nursery/use_sorted_classes.rs

@@ -83,15 +83,15 @@ declare_rule! {
     ///
     /// If specified, strings in the indicated functions will be sorted. This is useful when working with libraries like [`clsx`](https://github.com/lukeed/clsx) or [`cva`](https://cva.style/).
     ///
-    /// ```js
+    /// ```js,ignore
     /// clsx("px-2 foo p-4 bar", {
     ///     "block mx-4": condition,
     /// });
     /// ```
     ///
     /// Tagged template literals are also supported, for example:
     ///
-    /// ```js
+    /// ```js,ignore
     /// tw`px-2`;
     /// tw.div`px-2`;
     /// ```

crates/biome_js_analyze/tests/specs/nursery/useSortedClasses/codeOptionsSorted.jsx

@@ -5,14 +5,14 @@
 	<div customClassAttribute="foo bar p-4 px-2" />
 	<div notClassAttribute="px-2 foo p-4 bar" />
 	{/* utility sorting */}
-	<div class="custom-style1 foo rounded-lg bg-blue-500 p-4 text-center text-white shadow-lg hover:bg-blue-700" />
+	<div class="custom-style1 foo rounded-lg bg-blue-500 p-4 text-center text-white shadow-lg" />
 	<div class="custom-layout bar flex h-screen items-center justify-center bg-gray-200 font-bold text-lg" />
 	<div class="custom-grid m-6 grid grid-cols-3 gap-4 rounded-md border border-gray-300 p-6 shadow-md" />
 	<div class="custom-alert absolute top-0 right-0 m-4 rounded-full bg-red-600 p-2 text-sm text-white" />
 	<div class="bar custom-button inline-block rounded border border-green-500 bg-green-300 p-2 text-green-800" />
 	<div class="custom-list flex-col space-y-4 divide-y divide-gray-200 rounded-lg bg-white p-6 shadow-md" />
 	<div class="custom-background foo relative m-2 h-64 w-full overflow-hidden bg-cover bg-no-repeat" />
-	<div class="custom-text foo my-2 font-semibold text-2xl underline hover:text-red-500" />
+	<div class="custom-text foo my-2 font-semibold text-2xl underline" />
 	<div class="custom-container bar flex-wrap items-start justify-between bg-purple-200 p-5 text-purple-700" />
 	<div class="custom-border gap-8 border-indigo-500 border-l-4 bg-indigo-100 p-3 text-indigo-900" />
 </>;

crates/biome_js_analyze/tests/specs/nursery/useSortedClasses/codeOptionsSorted.jsx.snap

@@ -11,14 +11,14 @@ expression: codeOptionsSorted.jsx
 	<div customClassAttribute="foo bar p-4 px-2" />
 	<div notClassAttribute="px-2 foo p-4 bar" />
 	{/* utility sorting */}
-	<div class="custom-style1 foo rounded-lg bg-blue-500 p-4 text-center text-white shadow-lg hover:bg-blue-700" />
+	<div class="custom-style1 foo rounded-lg bg-blue-500 p-4 text-center text-white shadow-lg" />
 	<div class="custom-layout bar flex h-screen items-center justify-center bg-gray-200 font-bold text-lg" />
 	<div class="custom-grid m-6 grid grid-cols-3 gap-4 rounded-md border border-gray-300 p-6 shadow-md" />
 	<div class="custom-alert absolute top-0 right-0 m-4 rounded-full bg-red-600 p-2 text-sm text-white" />
 	<div class="bar custom-button inline-block rounded border border-green-500 bg-green-300 p-2 text-green-800" />
 	<div class="custom-list flex-col space-y-4 divide-y divide-gray-200 rounded-lg bg-white p-6 shadow-md" />
 	<div class="custom-background foo relative m-2 h-64 w-full overflow-hidden bg-cover bg-no-repeat" />
-	<div class="custom-text foo my-2 font-semibold text-2xl underline hover:text-red-500" />
+	<div class="custom-text foo my-2 font-semibold text-2xl underline" />
 	<div class="custom-container bar flex-wrap items-start justify-between bg-purple-200 p-5 text-purple-700" />
 	<div class="custom-border gap-8 border-indigo-500 border-l-4 bg-indigo-100 p-3 text-indigo-900" />
 </>;

crates/biome_js_analyze/tests/specs/nursery/useSortedClasses/codeOptionsUnsorted.jsx

@@ -1,23 +1,28 @@
 <>
 	{/* attributes */}
+	{/* SHOULD emit diagnostics (class/className attributes supported by default) */}
 	<div class="px-2 foo p-4 bar" />
 	<div className="px-2 foo p-4 bar" />
+	{/* SHOULD emit diagnostics (customClassAttribute attribute specified in options) */}
 	<div customClassAttribute="px-2 foo p-4 bar" />
+	{/* SHOULD NOT emit diagnostics (notClassAttribute attribute NOT specified in options) */}
 	<div notClassAttribute="px-2 foo p-4 bar" />
 	{/* utility sorting */}
-	<div class="text-center custom-style1 p-4 bg-blue-500 hover:bg-blue-700 text-white foo rounded-lg shadow-lg" />
+	{/* SHOULD emit diagnostics (class attribute supported by default) */}
+	<div class="text-center custom-style1 p-4 bg-blue-500 text-white foo rounded-lg shadow-lg" />
 	<div class="flex custom-layout items-center justify-center h-screen bg-gray-200 bar text-lg font-bold" />
 	<div class="grid custom-grid grid-cols-3 gap-4 p-6 m-6 border border-gray-300 shadow-md rounded-md" />
 	<div class="absolute top-0 right-0 m-4 p-2 text-sm bg-red-600 text-white rounded-full custom-alert" />
 	<div class="inline-block bar bg-green-300 text-green-800 p-2 rounded border border-green-500 custom-button" />
 	<div class="flex-col custom-list space-y-4 p-6 bg-white shadow-md rounded-lg divide-y divide-gray-200" />
 	<div class="relative overflow-hidden custom-background bg-no-repeat bg-cover h-64 w-full foo m-2" />
-	<div class="underline custom-text hover:text-red-500 foo text-2xl font-semibold my-2" />
+	<div class="underline custom-text foo text-2xl font-semibold my-2" />
 	<div class="flex-wrap custom-container justify-between items-start bar bg-purple-200 p-5 text-purple-700" />
 	<div class="gap-8 bg-indigo-100 text-indigo-900 p-3 border-l-4 border-indigo-500 custom-border" />
 </>;
 
 // functions
+/* SHOULD emit diagnostics (functions specified in options) */
 clsx("px-2 foo p-4 bar");
 // TODO: tagged template literals are not supported yet
 tw`px-2 foo p-4 bar`;
@@ -27,16 +32,20 @@ notTemplateFunction`px-2 foo p-4 bar`;
 notTemplateFunction.div`px-2 foo p-4 bar`;
 
 // nested values
+/* SHOULD emit diagnostics (class attribute supported by default) */
 <div class={"px-2 foo p-4 bar"} />;
 <div class={["px-2 foo p-4 bar"]} />;
 <div
 	class={{
+		// TODO: property should be sorted
 		"px-2 foo p-4 bar": [
 			"px-2 foo p-4 bar",
+			// TODO: property should be sorted
 			{ "px-2 foo p-4 bar": "px-2 foo p-4 bar", custom: ["px-2 foo p-4 bar"] },
 		],
 	}}
 />;
+/* SHOULD emit diagnostics (clsx function specified in options) */
 clsx(["px-2 foo p-4 bar"]);
 clsx({
 	"px-2 foo p-4 bar": [