Skip to content

Commit 617b7ab

Browse files
Oxide: Extract arbitrary container queries (#16984)
Closes #16982 Handle the case of variants looking like this: `@[32rem]:flex`. ## Test plan Added regression tests Co-authored-by: Robin Malfait <[email protected]>
1 parent 4a02364 commit 617b7ab

File tree

3 files changed

+31
-0
lines changed

3 files changed

+31
-0
lines changed

CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
2121

2222
- Ensure classes containing `--` are extracted correctly ([#16972](https://github.com/tailwindlabs/tailwindcss/pull/16972))
2323
- Ensure classes containing numbers followed by dash or underscore are extracted correctly ([#16980](https://github.com/tailwindlabs/tailwindcss/pull/16980))
24+
- Ensure arbitrary container queries are extracted correctly ([#16984](https://github.com/tailwindlabs/tailwindcss/pull/16984))
2425

2526
## [4.0.10] - 2025-03-05
2627

crates/oxide/src/extractor/mod.rs

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -833,6 +833,20 @@ mod tests {
833833
);
834834
}
835835

836+
// https://github.com/tailwindlabs/tailwindcss/issues/16982
837+
#[test]
838+
fn test_arbitrary_container_queries_syntax() {
839+
assert_extract_sorted_candidates(
840+
r#"<div class="@md:flex @max-md:flex @-[36rem]:flex @[36rem]:flex"></div>"#,
841+
vec![
842+
"@md:flex",
843+
"@max-md:flex",
844+
"@-[36rem]:flex",
845+
"@[36rem]:flex",
846+
],
847+
);
848+
}
849+
836850
// https://github.com/tailwindlabs/tailwindcss/issues/16978
837851
#[test]
838852
fn test_classes_containing_number_followed_by_dash_or_underscore() {

crates/oxide/src/extractor/named_variant_machine.rs

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,17 @@ impl Machine for NamedVariantMachine {
169169
_ => return self.restart(),
170170
},
171171

172+
// Start of an arbitrary value
173+
//
174+
// E.g.: `@[state=pending]:`.
175+
// ^
176+
Class::OpenBracket => {
177+
return match self.arbitrary_value_machine.next(cursor) {
178+
MachineState::Idle => self.restart(),
179+
MachineState::Done(_) => self.parse_arbitrary_end(cursor),
180+
};
181+
}
182+
172183
Class::Underscore => match cursor.next.into() {
173184
// Valid characters _if_ followed by another valid character. These characters are
174185
// only valid inside of the variant but not at the end of the variant.
@@ -360,6 +371,11 @@ mod tests {
360371
vec!["group-[data-state=pending]/name:"],
361372
),
362373
("supports-(--foo)/name:flex", vec!["supports-(--foo)/name:"]),
374+
// Container queries
375+
("@md:flex", vec!["@md:"]),
376+
("@max-md:flex", vec!["@max-md:"]),
377+
("@-[36rem]:flex", vec!["@-[36rem]:"]),
378+
("@[36rem]:flex", vec!["@[36rem]:"]),
363379
// --------------------------------------------------------
364380

365381
// Exceptions:

0 commit comments

Comments
 (0)