wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Fix contain-* utilities (#13521)

Browse source 
* Fix contain-* utilities

Fixes #13520.

* Update changelog

* Update CHANGELOG.md

---------

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
This commit is contained in:
Justin Wong 2024-04-13 10:56:15 +01:00 • committed by GitHub
parent 0060508c6e
commit b07cc4d3bd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 10 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

4
CHANGELOG.md
View file

@ -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))

10
packages/tailwindcss/src/utilities.test.ts
View file

@ -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 {

2
packages/tailwindcss/src/utilities.ts
View file

@ -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'),