diff --git a/CHANGELOG.md b/CHANGELOG.md index 9eee072c1..a2897d164 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Ensure classes containing `--` are extracted correctly ([#16972](https://github.com/tailwindlabs/tailwindcss/pull/16972)) - Ensure classes containing numbers followed by dash or underscore are extracted correctly ([#16980](https://github.com/tailwindlabs/tailwindcss/pull/16980)) +- Ensure arbitrary container queries are extracted correctly ([#16984](https://github.com/tailwindlabs/tailwindcss/pull/16984)) ## [4.0.10] - 2025-03-05 diff --git a/crates/oxide/src/extractor/mod.rs b/crates/oxide/src/extractor/mod.rs index ba89bbf90..de78f4154 100644 --- a/crates/oxide/src/extractor/mod.rs +++ b/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#"
"#, + vec![ + "@md:flex", + "@max-md:flex", + "@-[36rem]:flex", + "@[36rem]:flex", + ], + ); + } + // https://github.com/tailwindlabs/tailwindcss/issues/16978 #[test] fn test_classes_containing_number_followed_by_dash_or_underscore() { diff --git a/crates/oxide/src/extractor/named_variant_machine.rs b/crates/oxide/src/extractor/named_variant_machine.rs index 47f9776dd..7e25348bf 100644 --- a/crates/oxide/src/extractor/named_variant_machine.rs +++ b/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: