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

* Fix support for container query utilities with arbitrary values

* Update changelog

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- Fix support for container query utilities with arbitrary values ([#12534](https://github.com/tailwindlabs/tailwindcss/pull/12534))
+
 ### Added
 
 - Add `svh`, `lvh`, and `dvh` values to default `height`/`min-height`/`max-height` theme ([#11317](https://github.com/tailwindlabs/tailwindcss/pull/11317))

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/parse-candidate-strings.test.js

@@ -496,5 +496,21 @@ describe.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)
+      }
+    })
   })
 })