diff --git a/CHANGELOG.md b/CHANGELOG.md index 2496d099953a..80f4b6cc7e2e 100644 --- a/CHANGELOG.md +++ b/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)) 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/parse-candidate-strings.test.js b/tests/parse-candidate-strings.test.js index e9fe78c271e2..9ce7c5ed8e0a 100644 --- a/tests/parse-candidate-strings.test.js +++ b/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) + } + }) }) })