Oxide: Extract arbitrary container queries

Author: philipp-spiess

CHANGELOG.md

@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Ensure classes containing `--` are extracted correctly ([#16972](https://github.com/tailwindlabs/tailwindcss/pull/16972))
+- Ensure arbitrary container queries are extracted correctly ([#16984](https://github.com/tailwindlabs/tailwindcss/pull/16984))
 
 ## [4.0.10] - 2025-03-05
 

crates/oxide/src/extractor/mod.rs

@@ -833,6 +833,20 @@ mod tests {
         );
     }
 
+    // https://github.com/tailwindlabs/tailwindcss/issues/16982
+    #[test]
+    fn test_arbitrary_container_queries_syntax() {
+        assert_extract_sorted_candidates(
+            r#"<div class="@md:flex @max-md:flex @-[36rem]:flex @[36rem]:flex"></div>"#,
+            vec![
+                "@md:flex",
+                "@max-md:flex",
+                "@-[36rem]:flex",
+                "@[36rem]:flex",
+            ],
+        );
+    }
+
     #[test]
     fn test_extract_css_variables() {
         for (input, expected) in [

crates/oxide/src/extractor/named_variant_machine.rs

@@ -169,6 +169,17 @@ impl Machine for NamedVariantMachine {
                             _ => return self.restart(),
                         },
 
+                        // Start of an arbitrary value
+                        //
+                        // E.g.: `@[state=pending]:`.
+                        //         ^
+                        Class::OpenBracket => {
+                            return match self.arbitrary_value_machine.next(cursor) {
+                                MachineState::Idle => self.restart(),
+                                MachineState::Done(_) => self.parse_arbitrary_end(cursor),
+                            };
+                        }
+
                         Class::Underscore => match cursor.next.into() {
                             // Valid characters _if_ followed by another valid character. These characters are
                             // only valid inside of the variant but not at the end of the variant.
@@ -360,6 +371,11 @@ mod tests {
                 vec!["group-[data-state=pending]/name:"],
             ),
             ("supports-(--foo)/name:flex", vec!["supports-(--foo)/name:"]),
+            // Container queries
+            ("@md:flex", vec!["@md:"]),
+            ("@max-md:flex", vec!["@max-md:"]),
+            ("@-[36rem]:flex", vec!["@-[36rem]:"]),
+            ("@[36rem]:flex", vec!["@[36rem]:"]),
             // --------------------------------------------------------
 
             // Exceptions: