Fix support for container query utilities with arbitrary values (#12534)

* Fix support for container query utilities with arbitrary values

* Update changelog

Author: thecrypticace

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
 

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(

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)
+  }
+})