Fix arbitrary variant class sorting (Issue #115)

praveenperera · praveenperera · commit c07901a11000 · 2025-12-08T10:54:10.000-06:00
diff --git a/rustywind-core/src/app.rs b/rustywind-core/src/app.rs
@@ -475,6 +475,41 @@ mod tests {
         assert_eq!(output, r#"<div class="m-4 flex p-4"></div>"#);
     }
 
+    /// Test that arbitrary variant classes are matched by the regex (Issue #115)
+    #[test]
+    fn test_regex_matches_arbitrary_variants() {
+        let app = RUSTYWIND_DEFAULT;
+
+        // Test element state selectors
+        let input = r#"<div class="[&.htmx-request]:h-0 flex p-4"></div>"#;
+        assert!(app.has_classes(input), "Should match [&.class] syntax");
+
+        let sorted = app.sort_file_contents(input);
+        assert!(
+            sorted.contains("[&.htmx-request]:h-0"),
+            "Arbitrary variant should be preserved in output"
+        );
+
+        // Test child/sibling selectors
+        let input2 = r#"<div class="[&>*]:p-4 [&+*]:mt-4 block"></div>"#;
+        assert!(app.has_classes(input2), "Should match combinator syntax");
+
+        // Test attribute selectors
+        let input3 = r#"<div class="[&[data-state=open]]:bg-gray-100 flex"></div>"#;
+        assert!(
+            app.has_classes(input3),
+            "Should match attribute selector syntax"
+        );
+
+        // Test at-rule variants
+        let input4 = r#"<div class="[@supports(display:grid)]:grid flex"></div>"#;
+        assert!(app.has_classes(input4), "Should match @-rule syntax");
+
+        // Test calc with percentage
+        let input5 = r#"<div class="w-[calc(100%+20px)] flex"></div>"#;
+        assert!(app.has_classes(input5), "Should match calc with percentage");
+    }
+
     #[test_case(
         None,
         ClassWrapping::NoWrapping,
diff --git a/rustywind-core/src/class_parser.rs b/rustywind-core/src/class_parser.rs
@@ -172,8 +172,9 @@ pub fn parse_class(class: &str) -> Option<ParsedClass<'_>> {
         working = &working[..working.len() - 1];
     }
 
-    // Split by ':' to separate variants from utility
-    let parts: Vec<&str> = working.split(':').collect();
+    // Split by ':' but respect brackets - ':' inside [] should not be a separator
+    // e.g., "[&>*:last-child]:rounded-b-lg" -> ["[&>*:last-child]", "rounded-b-lg"]
+    let parts = split_respecting_brackets(working);
 
     if parts.is_empty() {
         return None;
@@ -204,6 +205,38 @@ pub fn parse_class(class: &str) -> Option<ParsedClass<'_>> {
     })
 }
 
+/// Split a class string by ':' while respecting bracket nesting.
+/// Colons inside square brackets `[]` are NOT treated as separators.
+///
+/// # Examples
+/// - `"hover:p-4"` -> `["hover", "p-4"]`
+/// - `"[&>*:last-child]:rounded-b-lg"` -> `["[&>*:last-child]", "rounded-b-lg"]`
+/// - `"dark:[&.active]:bg-red-500"` -> `["dark", "[&.active]", "bg-red-500"]`
+fn split_respecting_brackets(s: &str) -> Vec<&str> {
+    let mut parts = Vec::new();
+    let mut start = 0;
+    let mut bracket_depth: u32 = 0;
+
+    for (i, c) in s.char_indices() {
+        match c {
+            '[' => bracket_depth += 1,
+            ']' => bracket_depth = bracket_depth.saturating_sub(1),
+            ':' if bracket_depth == 0 => {
+                parts.push(&s[start..i]);
+                start = i + 1;
+            }
+            _ => {}
+        }
+    }
+
+    // Don't forget the last part
+    if start < s.len() {
+        parts.push(&s[start..]);
+    }
+
+    parts
+}
+
 /// Parse a utility string into base and value parts.
 ///
 /// This reuses the logic from utility_map but is adapted for class parsing.
diff --git a/rustywind-core/src/defaults.rs b/rustywind-core/src/defaults.rs
@@ -3,5 +3,12 @@ use regex::Regex;
 use std::sync::LazyLock;
 
 pub static RE: LazyLock<Regex> = LazyLock::new(|| {
-    Regex::new(r#"\b(?:class(?:Name)?\s*=\s*["'])([_a-zA-Z0-9\.,\s\-:\[\]()/#]+)["']"#).unwrap()
+    // Character class includes:
+    // - Basic: _a-zA-Z0-9 (alphanumeric, underscore)
+    // - Syntax: .,\s\-: (dot, comma, whitespace, hyphen, colon)
+    // - Brackets: \[\]() (square brackets, parentheses)
+    // - Values: /# (slash for opacity, hash for colors)
+    // - Arbitrary variants: &>+~=*@% (selectors, combinators, at-rules, calc)
+    Regex::new(r#"\b(?:class(?:Name)?\s*=\s*["'])([_a-zA-Z0-9\.,\s\-:\[\]()/#&>+~=*@%]+)["']"#)
+        .unwrap()
 });
diff --git a/rustywind-core/src/pattern_sorter.rs b/rustywind-core/src/pattern_sorter.rs
@@ -297,6 +297,11 @@ pub struct SortKey {
     /// This is used to properly sort compound variants like peer-hover vs peer-focus
     pub variant_chain: Vec<VariantInfo>,
 
+    /// Arbitrary variant selectors for tiebreaking when variant_order is equal
+    /// e.g., for `[&.x]:block` this would be `["[&.x]"]`
+    /// Used to sort different arbitrary variants lexicographically (with `_` decoded as space)
+    pub arbitrary_variants: Vec<compact_str::CompactString>,
+
     /// Property indices from PROPERTY_ORDER (lower = earlier)
     /// When utilities have multiple properties (e.g., rounded-t), ALL property indices
     /// are stored and compared in order for proper tiebreaking.
@@ -619,19 +624,53 @@ impl Ord for SortKey {
             (false, true) => return Ordering::Greater, // Variant after base class
             (true, true) => {} // Both base classes, continue to property comparison
             (false, false) => {
-                // Both have variants - compare by variant_order
+                // Both have variants - continue with comparison below
+            }
+        }
+
+        // Bit 63 indicates presence of arbitrary variants
+        const ARBITRARY_BIT: u128 = 1u128 << 63;
+        let self_has_arbitrary = self.variant_order & ARBITRARY_BIT != 0;
+        let other_has_arbitrary = other.variant_order & ARBITRARY_BIT != 0;
+
+        // 2. Compare by arbitrary variant presence and selectors
+        // Classes without arbitrary variants sort BEFORE classes with arbitrary variants
+        // When both have arbitrary, compare selectors FIRST, then known variant bits
+        match (self_has_arbitrary, other_has_arbitrary) {
+            (false, true) => return Ordering::Less, // No arbitrary before arbitrary
+            (true, false) => return Ordering::Greater,
+            (true, true) => {
+                // Both have arbitrary variants - compare selectors FIRST
+                let decode = |s: &str| s.replace('_', " ");
+                let a: Vec<_> = self.arbitrary_variants.iter().map(|s| decode(s)).collect();
+                let b: Vec<_> = other.arbitrary_variants.iter().map(|s| decode(s)).collect();
+                match a.cmp(&b) {
+                    Ordering::Equal => {
+                        // Same arbitrary selectors - compare known variant bits
+                        // (mask out the arbitrary bit for comparison)
+                        let self_known = self.variant_order & !ARBITRARY_BIT;
+                        let other_known = other.variant_order & !ARBITRARY_BIT;
+                        if self_known != other_known {
+                            return self_known.cmp(&other_known);
+                        }
+                        // Fall through to fine-grained comparison
+                    }
+                    other => return other,
+                }
+            }
+            (false, false) => {
+                // Neither has arbitrary - compare by known variant bits
+                if self.variant_order != other.variant_order {
+                    return self.variant_order.cmp(&other.variant_order);
+                }
+                // Fall through to fine-grained comparison
             }
         }
 
-        // 2. Compare by variant order (bitwise OR of all variant indices)
-        // This matches Tailwind's algorithm exactly - variant_order comes FIRST
-        // When variant_order is equal, fall through to fine-grained variant chain comparison
-        self.variant_order
-            .cmp(&other.variant_order)
-            // 3. Fine-grained recursive variant chain comparison
-            // When coarse variant_order ties, compare the actual variant chains
-            // This handles multi-level variants like focus:dark: vs dark:focus:
-            .then_with(|| compare_variant_lists(&self.variant_chain, &other.variant_chain))
+        // 3. Fine-grained recursive variant chain comparison
+        // When coarse variant_order ties, compare the actual variant chains
+        // This handles multi-level variants like focus:dark: vs dark:focus:
+        compare_variant_lists(&self.variant_chain, &other.variant_chain)
             // Then compare by property indices - compare ALL properties in order
             // This is crucial for utilities like rounded-t vs rounded-l that tie on first property
             .then_with(|| {
@@ -903,6 +942,15 @@ impl PatternSorter {
         // Parse variants into structured form for recursive comparison
         let variant_chain = parse_variants(&parsed.variants);
 
+        // Extract arbitrary variants for lexicographic tiebreaking
+        // These are variants that start with '[' (e.g., [&.htmx-request], [&>*])
+        let arbitrary_variants: Vec<compact_str::CompactString> = parsed
+            .variants
+            .iter()
+            .filter(|v| v.starts_with('['))
+            .map(|v| compact_str::CompactString::new(*v))
+            .collect();
+
         // Get the CSS properties this utility generates
         let properties = parsed.get_properties()?;
 
@@ -940,6 +988,7 @@ impl PatternSorter {
         Some(SortKey {
             variant_order,
             variant_chain,
+            arbitrary_variants,
             property_indices,
             numeric_value,
             is_negative,
@@ -1131,6 +1180,7 @@ mod tests {
         let key1 = SortKey {
             variant_order: 0,
             variant_chain: vec![],
+            arbitrary_variants: vec![],
             property_indices: vec![100],
             numeric_value: None,
             is_negative: false,
@@ -1142,6 +1192,7 @@ mod tests {
         let key2 = SortKey {
             variant_order: 1,
             variant_chain: parse_variants(&["md"]),
+            arbitrary_variants: vec![],
             property_indices: vec![100],
             numeric_value: None,
             is_negative: false,
@@ -1159,6 +1210,7 @@ mod tests {
         let key1 = SortKey {
             variant_order: 0,
             variant_chain: vec![],
+            arbitrary_variants: vec![],
             property_indices: vec![50],
             numeric_value: None,
             is_negative: false,
@@ -1170,6 +1222,7 @@ mod tests {
         let key2 = SortKey {
             variant_order: 0,
             variant_chain: vec![],
+            arbitrary_variants: vec![],
             property_indices: vec![100],
             numeric_value: None,
             is_negative: false,
@@ -1187,6 +1240,7 @@ mod tests {
         let key1 = SortKey {
             variant_order: 0,
             variant_chain: vec![],
+            arbitrary_variants: vec![],
             property_indices: vec![100],
             numeric_value: None,
             is_negative: false,
@@ -1198,6 +1252,7 @@ mod tests {
         let key2 = SortKey {
             variant_order: 0,
             variant_chain: vec![],
+            arbitrary_variants: vec![],
             property_indices: vec![100],
             numeric_value: None,
             is_negative: false,
@@ -1215,6 +1270,7 @@ mod tests {
         let key1 = SortKey {
             variant_order: 0,
             variant_chain: vec![],
+            arbitrary_variants: vec![],
             property_indices: vec![100],
             numeric_value: None,
             is_negative: false,
@@ -1226,6 +1282,7 @@ mod tests {
         let key2 = SortKey {
             variant_order: 0,
             variant_chain: vec![],
+            arbitrary_variants: vec![],
             property_indices: vec![100],
             numeric_value: None,
             is_negative: false,
@@ -1358,6 +1415,7 @@ mod tests {
         let key1 = SortKey {
             variant_order: 0,
             variant_chain: vec![],
+            arbitrary_variants: vec![],
             property_indices: vec![100],
             numeric_value: Some(4.0),
             is_negative: false,
@@ -1368,6 +1426,7 @@ mod tests {
         let key2 = SortKey {
             variant_order: 0,
             variant_chain: vec![],
+            arbitrary_variants: vec![],
             property_indices: vec![100],
             numeric_value: Some(8.0),
             is_negative: false,
@@ -1381,6 +1440,7 @@ mod tests {
         let key3 = SortKey {
             variant_order: 0,
             variant_chain: vec![],
+            arbitrary_variants: vec![],
             property_indices: vec![100],
             numeric_value: Some(50.0),
             is_negative: false,
@@ -1391,6 +1451,7 @@ mod tests {
         let key4 = SortKey {
             variant_order: 0,
             variant_chain: vec![],
+            arbitrary_variants: vec![],
             property_indices: vec![100],
             numeric_value: Some(110.0),
             is_negative: false,
@@ -1404,6 +1465,7 @@ mod tests {
         let key5 = SortKey {
             variant_order: 0,
             variant_chain: vec![],
+            arbitrary_variants: vec![],
             property_indices: vec![100],
             numeric_value: Some(4.0),
             is_negative: false,
@@ -1414,6 +1476,7 @@ mod tests {
         let key6 = SortKey {
             variant_order: 0,
             variant_chain: vec![],
+            arbitrary_variants: vec![],
             property_indices: vec![100],
             numeric_value: None,
             is_negative: false,
diff --git a/rustywind-core/src/variant_order.rs b/rustywind-core/src/variant_order.rs
diff --git a/rustywind-core/tests/integration_tests.rs b/rustywind-core/tests/integration_tests.rs
