Add @container-size utility (#18901)

This PR adds a new `@container-size` utility instead of
`@container-[size]`.

The main reason we didn't do this before is because we only have
container width related container queries, and not block based ones so
we never needed `size` and `inline-size` was enough.

However, `@container-size` is still useful if you are using container
query related units such as `cqb` which are using the block size of the
container not the inline size.

I also added a little helper such that `@container-size` is only
available in `insiders` and `4.2.0` (and later) so `4.1.x` releases
won't have this utility yet. This will require some CHANGELOG changes
such that we don't include this when releasing the next minor release.

Author: RobinMalfait

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- _Experimental_: Add `@container-size` utility ([#18901](https://github.com/tailwindlabs/tailwindcss/pull/18901))
+
 ### Fixed
 
 - Handle `'` syntax in ClojureScript when extracting classes ([#18888](https://github.com/tailwindlabs/tailwindcss/pull/18888))

packages/tailwindcss/src/feature-flags.ts

@@ -0,0 +1 @@
+export const enableContainerSizeUtility = process.env.FEATURES_ENV !== 'stable'

packages/tailwindcss/src/utilities.test.ts

@@ -26214,16 +26214,16 @@ test('@container', async () => {
       '@container-normal',
       '@container/sidebar',
       '@container-normal/sidebar',
-      '@container-[size]',
-      '@container-[size]/sidebar',
+      '@container-size',
+      '@container-size/sidebar',
     ]),
   ).toMatchInlineSnapshot(`
-    ".\\@container-\\[size\\]\\/sidebar {
-      container: sidebar / size;
+    ".\\@container-normal\\/sidebar {
+      container: sidebar;
     }
 
-    .\\@container-normal\\/sidebar {
-      container: sidebar;
+    .\\@container-size\\/sidebar {
+      container: sidebar / size;
     }
 
     .\\@container\\/sidebar {
@@ -26234,12 +26234,12 @@ test('@container', async () => {
       container-type: inline-size;
     }
 
-    .\\@container-\\[size\\] {
-      container-type: size;
-    }
-
     .\\@container-normal {
       container-type: normal;
+    }
+
+    .\\@container-size {
+      container-type: size;
     }"
   `)
   expect(
@@ -26248,8 +26248,8 @@ test('@container', async () => {
       '-@container-normal',
       '-@container/sidebar',
       '-@container-normal/sidebar',
-      '-@container-[size]',
-      '-@container-[size]/sidebar',
+      '-@container-size',
+      '-@container-size/sidebar',
     ]),
   ).toEqual('')
 })

packages/tailwindcss/src/utilities.ts

@@ -12,6 +12,7 @@ import {
 } from './ast'
 import type { Candidate, CandidateModifier, NamedUtilityValue } from './candidate'
 import type { DesignSystem } from './design-system'
+import { enableContainerSizeUtility } from './feature-flags'
 import type { Theme, ThemeKey } from './theme'
 import { compareBreakpoints } from './utils/compare-breakpoints'
 import { DefaultMap } from './utils/default-map'
@@ -5712,6 +5713,12 @@ export function createUtilities(theme: Theme) {
       value = candidate.value.value
     } else if (candidate.value.kind === 'named' && candidate.value.value === 'normal') {
       value = 'normal'
+    } else if (
+      enableContainerSizeUtility &&
+      candidate.value.kind === 'named' &&
+      candidate.value.value === 'size'
+    ) {
+      value = 'size'
     }
 
     if (value === null) return