From cc94c76ee51184b4352291efae6a0c0f842232e6 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Tue, 5 Dec 2023 12:26:33 -0500
Subject: [PATCH] Fix support for container query utilities with arbitrary
 values (#12534)

* Fix support for container query utilities with arbitrary values

* Update changelog
---
 CHANGELOG.md                    |  4 +++-
 src/lib/defaultExtractor.js     |  7 ++++++-
 tests/default-extractor.test.js | 16 ++++++++++++++++
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e99e80392cad..81e9fc50a686 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Fix support for container query utilities with arbitrary values ([#12534](https://github.com/tailwindlabs/tailwindcss/pull/12534))
 
 ## [3.3.6] - 2023-12-04
 
diff --git a/src/lib/defaultExtractor.js b/src/lib/defaultExtractor.js
index 3a1ff321eee7..5e168f37b8c2 100644
--- a/src/lib/defaultExtractor.js
+++ b/src/lib/defaultExtractor.js
@@ -40,7 +40,12 @@ function* buildRegExps(context) {
     // Utilities
     regex.pattern([
       // Utility Name / Group Name
-      /-?(?:\w+)/,
+      regex.any([
+        /-?(?:\w+)/,
+
+        // This is here to make sure @container supports everything that other utilities do
+        /@(?:\w+)/,
+      ]),
 
       // Normal/Arbitrary values
       regex.optional(
diff --git a/tests/default-extractor.test.js b/tests/default-extractor.test.js
index bbf0960bd805..e4b40e1ce8e3 100644
--- a/tests/default-extractor.test.js
+++ b/tests/default-extractor.test.js
@@ -517,3 +517,19 @@ it.each([
     expect(extractions).toContain(value)
   }
 })
+
+it.each([
+  ['@container', ['@container']],
+  ['@container/sidebar', ['@container/sidebar']],
+  ['@container/[sidebar]', ['@container/[sidebar]']],
+  ['@container-size', ['@container-size']],
+  ['@container-size/sidebar', ['@container-size/sidebar']],
+  ['@container-[size]/sidebar', ['@container-[size]/sidebar']],
+  ['@container-[size]/[sidebar]', ['@container-[size]/[sidebar]']],
+])('should support utilities starting with @ (%#)', async (content, expectations) => {
+  let extractions = defaultExtractor(content)
+
+  for (let value of expectations) {
+    expect(extractions).toContain(value)
+  }
+})