Skip to content

Commit 780163c

Browse files
KrisBraunTheAlexLichter
KrisBraun
and
TheAlexLichter
committed
feat: add contain utilities (#12993)
* 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 <[email protected]>
1 parent 5767986 commit 780163c

File tree

8 files changed

+180
-133
lines changed

8 files changed

+180
-133
lines changed

‎src/corePlugins.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2932,6 +2932,48 @@ export let corePlugins = {
29322932
{ filterDefault: true }
29332933
),
29342934
willChange: createUtilityPlugin('willChange', [['will-change', ['will-change']]]),
2935+
contain: ({ addDefaults, addUtilities }) => {
2936+
let cssContainValue =
2937+
'var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style)'
2938+
2939+
addDefaults('contain', {
2940+
'--tw-contain-size': ' ',
2941+
'--tw-contain-layout': ' ',
2942+
'--tw-contain-paint': ' ',
2943+
'--tw-contain-style': ' ',
2944+
})
2945+
2946+
addUtilities({
2947+
'.contain-none': { contain: 'none' },
2948+
'.contain-content': { contain: 'content' },
2949+
'.contain-strict': { contain: 'strict' },
2950+
'.contain-size': {
2951+
'@defaults contain': {},
2952+
'--tw-contain-size': 'size',
2953+
contain: cssContainValue,
2954+
},
2955+
'.contain-inline-size': {
2956+
'@defaults contain': {},
2957+
'--tw-contain-size': 'inline-size',
2958+
contain: cssContainValue,
2959+
},
2960+
'.contain-layout': {
2961+
'@defaults contain': {},
2962+
'--tw-contain-layout': 'layout',
2963+
contain: cssContainValue,
2964+
},
2965+
'.contain-paint': {
2966+
'@defaults contain': {},
2967+
'--tw-contain-paint': 'paint',
2968+
contain: cssContainValue,
2969+
},
2970+
'.contain-style': {
2971+
'@defaults contain': {},
2972+
'--tw-contain-style': 'style',
2973+
contain: cssContainValue,
2974+
},
2975+
})
2976+
},
29352977
content: createUtilityPlugin('content', [
29362978
['content', ['--tw-content', ['content', 'var(--tw-content)']]],
29372979
]),

‎tests/basic-usage.oxide.test.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,10 @@
4949
--tw-backdrop-opacity: ;
5050
--tw-backdrop-saturate: ;
5151
--tw-backdrop-sepia: ;
52+
--tw-contain-size: ;
53+
--tw-contain-layout: ;
54+
--tw-contain-paint: ;
55+
--tw-contain-style: ;
5256
}
5357
.container {
5458
width: 100%;
@@ -768,7 +772,7 @@
768772
}
769773
.font-sans {
770774
font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji,
771-
Segoe UI Symbol, Noto Color Emoji;
775+
Segoe UI Symbol, Noto Color Emoji;
772776
}
773777
.text-2xl {
774778
font-size: 1.5rem;

‎tests/basic-usage.test.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,10 @@
4949
--tw-backdrop-opacity: ;
5050
--tw-backdrop-saturate: ;
5151
--tw-backdrop-sepia: ;
52+
--tw-contain-size: ;
53+
--tw-contain-layout: ;
54+
--tw-contain-paint: ;
55+
--tw-contain-style: ;
5256
}
5357
.container {
5458
width: 100%;
@@ -786,7 +790,7 @@
786790
}
787791
.font-sans {
788792
font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji,
789-
Segoe UI Symbol, Noto Color Emoji;
793+
Segoe UI Symbol, Noto Color Emoji;
790794
}
791795
.text-2xl {
792796
font-size: 1.5rem;

‎tests/plugins/__snapshots__/mixBlendMode.test.js.snap

Lines changed: 0 additions & 77 deletions
This file was deleted.

‎tests/source-maps.test.js

Lines changed: 57 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -351,57 +351,65 @@ crosscheck(({ stable, oxide }) => {
351351
'2:6-20 -> 433:2-25',
352352
'2:6-20 -> 434:2-26',
353353
'2:6-20 -> 435:2-27',
354-
'2:6 -> 436:2',
355-
'2:20 -> 437:0',
356-
'2:6 -> 439:0',
357-
'2:6-20 -> 440:2-26',
358-
'2:6-20 -> 441:2-26',
359-
'2:6-20 -> 442:2-21',
360-
'2:6-20 -> 443:2-21',
361-
'2:6-20 -> 444:2-16',
362-
'2:6-20 -> 445:2-16',
363-
'2:6-20 -> 446:2-16',
364-
'2:6-20 -> 447:2-17',
365-
'2:6-20 -> 448:2-17',
366-
'2:6-20 -> 449:2-15',
367-
'2:6-20 -> 450:2-15',
368-
'2:6-20 -> 451:2-20',
369-
'2:6-20 -> 452:2-40',
370-
'2:6-20 -> 453:2-32',
371-
'2:6-20 -> 454:2-31',
372-
'2:6-20 -> 455:2-30',
373-
'2:6-20 -> 456:2-17',
374-
'2:6-20 -> 457:2-22',
375-
'2:6-20 -> 458:2-24',
376-
'2:6-20 -> 459:2-25',
377-
'2:6-20 -> 460:2-26',
378-
'2:6-20 -> 461:2-20',
379-
'2:6-20 -> 462:2-29',
380-
'2:6-20 -> 463:2-30',
381-
'2:6-20 -> 464:2-40',
382-
'2:6-20 -> 465:2-36',
354+
'2:6-20 -> 436:2-24',
355+
'2:6-20 -> 437:2-22',
356+
'2:6-20 -> 438:2-24',
357+
'2:6-20 -> 439:2-23',
358+
'2:6 -> 440:2',
359+
'2:20 -> 441:0',
360+
'2:6 -> 443:0',
361+
'2:6-20 -> 444:2-26',
362+
'2:6-20 -> 445:2-26',
363+
'2:6-20 -> 446:2-21',
364+
'2:6-20 -> 447:2-21',
365+
'2:6-20 -> 448:2-16',
366+
'2:6-20 -> 449:2-16',
367+
'2:6-20 -> 450:2-16',
368+
'2:6-20 -> 451:2-17',
369+
'2:6-20 -> 452:2-17',
370+
'2:6-20 -> 453:2-15',
371+
'2:6-20 -> 454:2-15',
372+
'2:6-20 -> 455:2-20',
373+
'2:6-20 -> 456:2-40',
374+
'2:6-20 -> 457:2-32',
375+
'2:6-20 -> 458:2-31',
376+
'2:6-20 -> 459:2-30',
377+
'2:6-20 -> 460:2-17',
378+
'2:6-20 -> 461:2-22',
379+
'2:6-20 -> 462:2-24',
380+
'2:6-20 -> 463:2-25',
381+
'2:6-20 -> 464:2-26',
382+
'2:6-20 -> 465:2-20',
383383
'2:6-20 -> 466:2-29',
384-
'2:6-20 -> 467:2-24',
385-
'2:6-20 -> 468:2-32',
386-
'2:6-20 -> 469:2-14',
387-
'2:6-20 -> 470:2-20',
388-
'2:6-20 -> 471:2-18',
389-
'2:6-20 -> 472:2-19',
390-
'2:6-20 -> 473:2-20',
391-
'2:6-20 -> 474:2-16',
384+
'2:6-20 -> 467:2-30',
385+
'2:6-20 -> 468:2-40',
386+
'2:6-20 -> 469:2-36',
387+
'2:6-20 -> 470:2-29',
388+
'2:6-20 -> 471:2-24',
389+
'2:6-20 -> 472:2-32',
390+
'2:6-20 -> 473:2-14',
391+
'2:6-20 -> 474:2-20',
392392
'2:6-20 -> 475:2-18',
393-
'2:6-20 -> 476:2-15',
394-
'2:6-20 -> 477:2-21',
395-
'2:6-20 -> 478:2-23',
396-
'2:6-20 -> 479:2-29',
397-
'2:6-20 -> 480:2-27',
398-
'2:6-20 -> 481:2-28',
399-
'2:6-20 -> 482:2-29',
400-
'2:6-20 -> 483:2-25',
401-
'2:6-20 -> 484:2-26',
402-
'2:6-20 -> 485:2-27',
403-
'2:6 -> 486:2',
404-
'2:20 -> 487:0',
393+
'2:6-20 -> 476:2-19',
394+
'2:6-20 -> 477:2-20',
395+
'2:6-20 -> 478:2-16',
396+
'2:6-20 -> 479:2-18',
397+
'2:6-20 -> 480:2-15',
398+
'2:6-20 -> 481:2-21',
399+
'2:6-20 -> 482:2-23',
400+
'2:6-20 -> 483:2-29',
401+
'2:6-20 -> 484:2-27',
402+
'2:6-20 -> 485:2-28',
403+
'2:6-20 -> 486:2-29',
404+
'2:6-20 -> 487:2-25',
405+
'2:6-20 -> 488:2-26',
406+
'2:6-20 -> 489:2-27',
407+
'2:6-20 -> 490:2-24',
408+
'2:6-20 -> 491:2-22',
409+
'2:6-20 -> 492:2-24',
410+
'2:6-20 -> 493:2-23',
411+
'2:6 -> 494:2',
412+
'2:20 -> 495:0',
405413
])
406414
})
407415

‎tests/util/defaults.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,10 @@ export function defaults({ defaultRingColor = `#3b82f680` } = {}) {
5858
--tw-backdrop-opacity: ;
5959
--tw-backdrop-saturate: ;
6060
--tw-backdrop-sepia: ;
61+
--tw-contain-size: ;
62+
--tw-contain-layout: ;
63+
--tw-contain-paint: ;
64+
--tw-contain-style: ;
6165
}
6266
`
6367
}

‎tests/variants.oxide.test.css

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,10 @@
4949
--tw-backdrop-opacity: ;
5050
--tw-backdrop-saturate: ;
5151
--tw-backdrop-sepia: ;
52+
--tw-contain-size: ;
53+
--tw-contain-layout: ;
54+
--tw-contain-paint: ;
55+
--tw-contain-style: ;
5256
}
5357
.first-letter\:text-2xl:first-letter {
5458
font-size: 1.5rem;
@@ -384,13 +388,13 @@
384388
background-color: #fde047;
385389
}
386390
}
387-
.ltr\:shadow-md:where([dir="ltr"], [dir="ltr"] *) {
391+
.ltr\:shadow-md:where([dir='ltr'], [dir='ltr'] *) {
388392
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
389393
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
390394
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
391395
var(--tw-shadow);
392396
}
393-
.rtl\:shadow-md:where([dir="rtl"], [dir="rtl"] *) {
397+
.rtl\:shadow-md:where([dir='rtl'], [dir='rtl'] *) {
394398
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
395399
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
396400
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -402,13 +406,15 @@
402406
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
403407
var(--tw-shadow);
404408
}
405-
.group:disabled:focus:hover .dark\:group-disabled\:group-focus\:group-hover\:shadow-md:where(.dark, .dark *) {
409+
.group:disabled:focus:hover
410+
.dark\:group-disabled\:group-focus\:group-hover\:shadow-md:where(.dark, .dark *) {
406411
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
407412
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
408413
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
409414
var(--tw-shadow);
410415
}
411-
.peer:disabled:focus:hover ~ .dark\:peer-disabled\:peer-focus\:peer-hover\:shadow-md:where(.dark, .dark *) {
416+
.peer:disabled:focus:hover
417+
~ .dark\:peer-disabled\:peer-focus\:peer-hover\:shadow-md:where(.dark, .dark *) {
412418
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
413419
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
414420
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),

0 commit comments

Comments
 (0)