docs(useSortedClasses): tailwind variant sorting (#3283)

CHANGELOG.md

@@ -45,6 +45,18 @@ our [guidelines for writing a good changelog entry](https://github.com/biomejs/b
 - Fixes [#3066](https://github.com/biomejs/biome/issues/3066) by taking into account the dependencies declared in the `package.json`. Contributed by @ematipico
 - The code action of the `useArrowFunction` rule now preserves a trailing comma when there is only a single type parameter in the arrow function and JSX is enabled. Fixes [#3292](https://github.com/biomejs/biome/issues/3292). Contributed by @Sec-ant
 
+#### Enhancements
+- Enhance tailwind sorting lint rule [#1274](https://github.com/biomejs/biome/issues/1274) with variant support.
+
+  Every preconfigured variant is assigned a `weight` that concurs on establishing the output sorting order.
+  Since nesting variants on the same utility class is possible, the resulting `weight` is the Bitwise XOR of all the variants weight for that class.
+  Dynamic variants (e.g. `has-[.custom-class]`, `group-[:checked]`) are also supported and they take the `weight` of their base variant name the custom value attached (e.g. `has-[.custom-class]` takes `has` weight).
+  Arbitrary variants (e.g. `[&nth-child(2)]`) don't have a weight assigned and they are placed after every known variant.
+  Classes with the same amount of arbitrary variants follow lexicographical order. The class that has the highest number of nested arbitrary variants is placed last.
+  Screen variants (e.g. `sm:`, `max-md:`, `min-lg:`) are not supported yet.
+
+  Contributed by @lutaok
+
 ## v1.8.2 (2024-06-20)
 
 ### CLI

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

@@ -48,10 +48,9 @@ declare_rule! {
     ///
     /// Notably, keep in mind that the following features are not supported yet:
     ///
-    /// - Variant sorting (arbitrary variants are not supported yet).
+    /// - Screen variant sorting (e.g. `md:`, `max-lg:`). Only static, dynamic and arbitrary variants are supported.
     /// - Custom utilitites and variants (such as ones introduced by Tailwind CSS plugins). Only the default Tailwind CSS configuration is supported.
     /// - Options such as `prefix` and `separator`.
-    /// - Tagged template literals.
     /// - Object properties (e.g. in `clsx` calls).
     ///
     /// Please don't report issues about these features.
@@ -65,6 +64,10 @@ declare_rule! {
     /// <div class="px-2 foo p-4 bar" />;
     /// ```
     ///
+    /// ```jsx,expect_diagnostic
+    /// <div class="hover:focus:m-2 foo hover:px-2 p-4">
+    /// ```
+    ///
     /// ## Options
     ///
     /// ### Code-related
@@ -99,10 +102,6 @@ declare_rule! {
     /// tw.div`px-2`;
     /// ```
     ///
-    /// :::caution
-    /// Tagged template literal support has not been implemented yet.
-    /// :::
-    ///
     /// ### Sort-related
     ///
     /// :::caution

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

@@ -4,6 +4,7 @@
 //! - The index of the utility within the layer.
 //! - The total variants weight that results from the combination of all the variants.
 //! - The text of the class itself.
+//! - The arbitrary variants of the class.
 //! It is generated according to the information contained in a `SortConfig`, which includes:
 //! - The list of layers, in order.
 //! - The list of utilities, in order, for each layer.