diff --git a/CHANGELOG.md b/CHANGELOG.md index e99e80392..81e9fc50a 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 3a1ff321e..5e168f37b 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 bbf0960bd..e4b40e1ce 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) + } +})