Skip to content

Commit

Permalink
feat: add contain utilities (#12993)
Browse files Browse the repository at this point in the history 
* feat: add contain utilities

* chore: lint

* Support mulptiple contain properites

Support multiple contain properties, such as "contain-size contain-layout". Drop contain-unset as we haven't added -unset variants for other utilities.

* Update Vite; fix test regex

Vite is generating files like "index--T9oO-MP.css", which required relaxing the regex used in tests.

---------

Co-authored-by: Alexander <github@lichter.io>
  • Loading branch information
@KrisBraun @manniL
KrisBraun and manniL committed Feb 23, 2024
1 parent 5767986 commit 63f0e36
Show file tree
Hide file tree
Showing 9 changed files with 236 additions and 133 deletions.
42 changes: 42 additions & 0 deletions src/corePlugins.js
View file
Expand Up @@ -2932,6 +2932,48 @@ export let corePlugins = {
{ filterDefault: true }
),
willChange: createUtilityPlugin('willChange', [['will-change', ['will-change']]]),
contain: ({ addDefaults, addUtilities }) => {
let cssContainValue =
'var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style)'

addDefaults('contain', {
'--tw-contain-size': ' ',
'--tw-contain-layout': ' ',
'--tw-contain-paint': ' ',
'--tw-contain-style': ' ',
})

addUtilities({
'.contain-none': { contain: 'none' },
'.contain-content': { contain: 'content' },
'.contain-strict': { contain: 'strict' },
'.contain-size': {
'@defaults contain': {},
'--tw-contain-size': 'size',
contain: cssContainValue,
},
'.contain-inline-size': {
'@defaults contain': {},
'--tw-contain-size': 'inline-size',
contain: cssContainValue,
},
'.contain-layout': {
'@defaults contain': {},
'--tw-contain-layout': 'layout',
contain: cssContainValue,
},
'.contain-paint': {
'@defaults contain': {},
'--tw-contain-paint': 'paint',
contain: cssContainValue,
},
'.contain-style': {
'@defaults contain': {},
'--tw-contain-style': 'style',
contain: cssContainValue,
},
})
},
content: createUtilityPlugin('content', [
['content', ['--tw-content', ['content', 'var(--tw-content)']]],
]),
Expand Down
6 changes: 5 additions & 1 deletion tests/basic-usage.oxide.test.css
View file
Expand Up @@ -49,6 +49,10 @@
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
.container {
width: 100%;
Expand Down Expand Up @@ -768,7 +772,7 @@
}
.font-sans {
font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji,
Segoe UI Symbol, Noto Color Emoji;
Segoe UI Symbol, Noto Color Emoji;
}
.text-2xl {
font-size: 1.5rem;
Expand Down
6 changes: 5 additions & 1 deletion tests/basic-usage.test.css
View file
Expand Up @@ -49,6 +49,10 @@
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
.container {
width: 100%;
Expand Down Expand Up @@ -786,7 +790,7 @@
}
.font-sans {
font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji,
Segoe UI Symbol, Noto Color Emoji;
Segoe UI Symbol, Noto Color Emoji;
}
.text-2xl {
font-size: 1.5rem;
Expand Down
56 changes: 56 additions & 0 deletions tests/plugins/__snapshots__/contain.test.js.snap
View file
@@ -0,0 +1,56 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`should test the 'contain' plugin 1`] = `
"
*, :before, :after {
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
::backdrop {
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
.contain-none {
contain: none;
}
.contain-content {
contain: content;
}
.contain-strict {
contain: strict;
}
.contain-size {
--tw-contain-size: size;
contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);
}
.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-layout {
--tw-contain-layout: layout;
contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);
}
.contain-paint {
--tw-contain-paint: paint;
contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);
}
.contain-style {
--tw-contain-style: style;
contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);
}
"
`;
77 changes: 0 additions & 77 deletions tests/plugins/__snapshots__/mixBlendMode.test.js.snap
View file

This file was deleted.

106 changes: 57 additions & 49 deletions tests/source-maps.test.js
View file
Expand Up @@ -351,57 +351,65 @@ crosscheck(({ stable, oxide }) => {
'2:6-20 -> 433:2-25',
'2:6-20 -> 434:2-26',
'2:6-20 -> 435:2-27',
'2:6 -> 436:2',
'2:20 -> 437:0',
'2:6 -> 439:0',
'2:6-20 -> 440:2-26',
'2:6-20 -> 441:2-26',
'2:6-20 -> 442:2-21',
'2:6-20 -> 443:2-21',
'2:6-20 -> 444:2-16',
'2:6-20 -> 445:2-16',
'2:6-20 -> 446:2-16',
'2:6-20 -> 447:2-17',
'2:6-20 -> 448:2-17',
'2:6-20 -> 449:2-15',
'2:6-20 -> 450:2-15',
'2:6-20 -> 451:2-20',
'2:6-20 -> 452:2-40',
'2:6-20 -> 453:2-32',
'2:6-20 -> 454:2-31',
'2:6-20 -> 455:2-30',
'2:6-20 -> 456:2-17',
'2:6-20 -> 457:2-22',
'2:6-20 -> 458:2-24',
'2:6-20 -> 459:2-25',
'2:6-20 -> 460:2-26',
'2:6-20 -> 461:2-20',
'2:6-20 -> 462:2-29',
'2:6-20 -> 463:2-30',
'2:6-20 -> 464:2-40',
'2:6-20 -> 465:2-36',
'2:6-20 -> 436:2-24',
'2:6-20 -> 437:2-22',
'2:6-20 -> 438:2-24',
'2:6-20 -> 439:2-23',
'2:6 -> 440:2',
'2:20 -> 441:0',
'2:6 -> 443:0',
'2:6-20 -> 444:2-26',
'2:6-20 -> 445:2-26',
'2:6-20 -> 446:2-21',
'2:6-20 -> 447:2-21',
'2:6-20 -> 448:2-16',
'2:6-20 -> 449:2-16',
'2:6-20 -> 450:2-16',
'2:6-20 -> 451:2-17',
'2:6-20 -> 452:2-17',
'2:6-20 -> 453:2-15',
'2:6-20 -> 454:2-15',
'2:6-20 -> 455:2-20',
'2:6-20 -> 456:2-40',
'2:6-20 -> 457:2-32',
'2:6-20 -> 458:2-31',
'2:6-20 -> 459:2-30',
'2:6-20 -> 460:2-17',
'2:6-20 -> 461:2-22',
'2:6-20 -> 462:2-24',
'2:6-20 -> 463:2-25',
'2:6-20 -> 464:2-26',
'2:6-20 -> 465:2-20',
'2:6-20 -> 466:2-29',
'2:6-20 -> 467:2-24',
'2:6-20 -> 468:2-32',
'2:6-20 -> 469:2-14',
'2:6-20 -> 470:2-20',
'2:6-20 -> 471:2-18',
'2:6-20 -> 472:2-19',
'2:6-20 -> 473:2-20',
'2:6-20 -> 474:2-16',
'2:6-20 -> 467:2-30',
'2:6-20 -> 468:2-40',
'2:6-20 -> 469:2-36',
'2:6-20 -> 470:2-29',
'2:6-20 -> 471:2-24',
'2:6-20 -> 472:2-32',
'2:6-20 -> 473:2-14',
'2:6-20 -> 474:2-20',
'2:6-20 -> 475:2-18',
'2:6-20 -> 476:2-15',
'2:6-20 -> 477:2-21',
'2:6-20 -> 478:2-23',
'2:6-20 -> 479:2-29',
'2:6-20 -> 480:2-27',
'2:6-20 -> 481:2-28',
'2:6-20 -> 482:2-29',
'2:6-20 -> 483:2-25',
'2:6-20 -> 484:2-26',
'2:6-20 -> 485:2-27',
'2:6 -> 486:2',
'2:20 -> 487:0',
'2:6-20 -> 476:2-19',
'2:6-20 -> 477:2-20',
'2:6-20 -> 478:2-16',
'2:6-20 -> 479:2-18',
'2:6-20 -> 480:2-15',
'2:6-20 -> 481:2-21',
'2:6-20 -> 482:2-23',
'2:6-20 -> 483:2-29',
'2:6-20 -> 484:2-27',
'2:6-20 -> 485:2-28',
'2:6-20 -> 486:2-29',
'2:6-20 -> 487:2-25',
'2:6-20 -> 488:2-26',
'2:6-20 -> 489:2-27',
'2:6-20 -> 490:2-24',
'2:6-20 -> 491:2-22',
'2:6-20 -> 492:2-24',
'2:6-20 -> 493:2-23',
'2:6 -> 494:2',
'2:20 -> 495:0',
])
})

Expand Down
4 changes: 4 additions & 0 deletions tests/util/defaults.js
View file
Expand Up @@ -58,6 +58,10 @@ export function defaults({ defaultRingColor = `#3b82f680` } = {}) {
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
`
}
Expand Down
14 changes: 10 additions & 4 deletions tests/variants.oxide.test.css
View file
Expand Up @@ -49,6 +49,10 @@
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
.first-letter\:text-2xl:first-letter {
font-size: 1.5rem;
Expand Down Expand Up @@ -384,13 +388,13 @@
background-color: #fde047;
}
}
.ltr\:shadow-md:where([dir="ltr"], [dir="ltr"] *) {
.ltr\:shadow-md:where([dir='ltr'], [dir='ltr'] *) {
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.rtl\:shadow-md:where([dir="rtl"], [dir="rtl"] *) {
.rtl\:shadow-md:where([dir='rtl'], [dir='rtl'] *) {
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
Expand All @@ -402,13 +406,15 @@
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.group:disabled:focus:hover .dark\:group-disabled\:group-focus\:group-hover\:shadow-md:where(.dark, .dark *) {
.group:disabled:focus:hover
.dark\:group-disabled\:group-focus\:group-hover\:shadow-md:where(.dark, .dark *) {
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.peer:disabled:focus:hover ~ .dark\:peer-disabled\:peer-focus\:peer-hover\:shadow-md:where(.dark, .dark *) {
.peer:disabled:focus:hover
~ .dark\:peer-disabled\:peer-focus\:peer-hover\:shadow-md:where(.dark, .dark *) {
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
Expand Down

0 comments on commit 63f0e36

Please sign in to comment.