Fix contain-* utilities (#13521)

wongjn · adamwathan · web-flow · commit b07cc4d3bd03 · 2024-04-13T05:56:15.000-04:00
* Fix contain-* utilities Fixes #13520. * Update changelog * Update CHANGELOG.md --------- Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
diff --git 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
+
+- Make sure `contain-*` utility variables resolve to a valid value ([#13521](https://github.com/tailwindlabs/tailwindcss/pull/13521))
+
 ## Changed
 
 - Use `rem` units for breakpoints by default instead of `px` ([#13469](https://github.com/tailwindlabs/tailwindcss/pull/13469))
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
@@ -10612,12 +10612,12 @@ test('contain', () => {
 
     .contain-inline-size {
       --tw-contain-size: inline-size;
-      contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);
+      contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, );
     }
 
     .contain-layout {
       --tw-contain-layout: layout;
-      contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);
+      contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, );
     }
 
     .contain-none {
@@ -10626,12 +10626,12 @@ test('contain', () => {
 
     .contain-paint {
       --tw-contain-paint: paint;
-      contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);
+      contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, );
     }
 
     .contain-size {
       --tw-contain-size: size;
-      contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);
+      contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, );
     }
 
     .contain-strict {
@@ -10640,7 +10640,7 @@ test('contain', () => {
 
     .contain-style {
       --tw-contain-style: style;
-      contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);
+      contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, );
     }
 
     @property --tw-contain-size {
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
@@ -3691,7 +3691,7 @@ export function createUtilities(theme: Theme) {
 
   {
     let cssContainValue =
-      'var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style)'
+      'var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,)'
     let cssContainProperties = () => {
       return atRoot([
         property('--tw-contain-size'),

Original file line number	Diff line number	Diff line change
`@@ -10612,12 +10612,12 @@ test('contain', () => {`
`10612`	`10612`
`10613`	`10613`	`.contain-inline-size {`
`10614`	`10614`	`--tw-contain-size: inline-size;`
`10615`		`- contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);`
	`10615`	`+ contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, );`
`10616`	`10616`	`}`
`10617`	`10617`
`10618`	`10618`	`.contain-layout {`
`10619`	`10619`	`--tw-contain-layout: layout;`
`10620`		`- contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);`
	`10620`	`+ contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, );`
`10621`	`10621`	`}`
`10622`	`10622`
`10623`	`10623`	`.contain-none {`
`@@ -10626,12 +10626,12 @@ test('contain', () => {`
`10626`	`10626`
`10627`	`10627`	`.contain-paint {`
`10628`	`10628`	`--tw-contain-paint: paint;`
`10629`		`- contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);`
	`10629`	`+ contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, );`
`10630`	`10630`	`}`
`10631`	`10631`
`10632`	`10632`	`.contain-size {`
`10633`	`10633`	`--tw-contain-size: size;`
`10634`		`- contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);`
	`10634`	`+ contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, );`
`10635`	`10635`	`}`
`10636`	`10636`
`10637`	`10637`	`.contain-strict {`
`@@ -10640,7 +10640,7 @@ test('contain', () => {`
`10640`	`10640`
`10641`	`10641`	`.contain-style {`
`10642`	`10642`	`--tw-contain-style: style;`
`10643`		`- contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);`
	`10643`	`+ contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, );`
`10644`	`10644`	`}`
`10645`	`10645`
`10646`	`10646`	`@property --tw-contain-size {`
Original file line number	Diff line number	Diff line change
`@@ -3691,7 +3691,7 @@ export function createUtilities(theme: Theme) {`
`3691`	`3691`
`3692`	`3692`	`{`
`3693`	`3693`	`let cssContainValue =`
`3694`		`- 'var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style)'`
	`3694`	`+ 'var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,)'`
`3695`	`3695`	`let cssContainProperties = () => {`
`3696`	`3696`	`return atRoot([`
`3697`	`3697`	`property('--tw-contain-size'),`