fix(linter): useSortedClasses false positive #3394 (#4692)

Co-authored-by: 韩高钶 <[email protected]>
Co-authored-by: Emanuele Stoppa <[email protected]>

CHANGELOG.md

@@ -319,6 +319,7 @@ our [guidelines for writing a good changelog entry](https://github.com/biomejs/b
 
 - Fixed a panic related to bogus import statements in `useExhaustiveDependencies` ([#4568](https://github.com/biomejs/biome/issues/4568)) Contributed by @dyc3
 
+- Fixed `useSortedClasses` false positive and Supplementary test case ([#3394](https://github.com/biomejs/biome/issues/3394)) Contributed by @hangaoke1
 - [noLabelWithoutControl](https://biomejs.dev/linter/rules/no-label-without-control/) detects button tags as input ([#4511])(https://github.com/biomejs/biome/issues/4511). Contributed by @unvalley
 
 ### Parser

crates/biome_js_analyze/src/lint/nursery/use_sorted_classes/sort.rs

@@ -195,7 +195,7 @@ pub fn sort_class_name(
 
     let mut result = sorted_classes.join(" ");
 
-    if classes_len > 0 {
+    if classes_len > 0 || ignore_postfix || ignore_prefix {
         // restore front space
         if class_name.starts_with(' ') {
             result.insert(0, ' ');

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

@@ -0,0 +1,4 @@
+<>
+  <div class={`${variable}-bar ${variable}`}></div>
+  <div class={`${variable}-bar    ${variable}`}></div>
+</>

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

@@ -0,0 +1,36 @@
+---
+source: crates/biome_js_analyze/tests/spec_tests.rs
+assertion_line: 86
+expression: issue_3394.jsx
+snapshot_kind: text
+---
+# Input
+```jsx
+<>
+  <div class={`${variable}-bar ${variable}`}></div>
+  <div class={`${variable}-bar    ${variable}`}></div>
+</>
+```
+
+# Diagnostics
+```
+issue_3394.jsx:3:31 lint/nursery/useSortedClasses  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! These CSS classes should be sorted.
+  
+    1 │ <>
+    2 │   <div class={`${variable}-bar ${variable}`}></div>
+  > 3 │   <div class={`${variable}-bar    ${variable}`}></div>
+      │                               ^^^^
+    4 │ </>
+  
+  i Unsafe fix: Sort the classes.
+  
+    1 1 │   <>
+    2 2 │     <div class={`${variable}-bar ${variable}`}></div>
+    3   │ - ··<div·class={`${variable}-bar····${variable}`}></div>
+      3 │ + ··<div·class={`${variable}-bar·${variable}`}></div>
+    4 4 │   </>
+  
+
+```