feat: add contain utilities (#12993)

KrisBraun · TheAlexLichter · KrisBraun · commit 780163c58a42 · 2024-02-23T18:16:15.000-05:00
* 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 &lt;github@lichter.io&gt;
diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -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)']]],
   ]),
diff --git a/tests/basic-usage.oxide.test.css b/tests/basic-usage.oxide.test.css
@@ -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%;
@@ -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;
diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css
@@ -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%;
@@ -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;
diff --git a/tests/plugins/__snapshots__/mixBlendMode.test.js.snap b/tests/plugins/__snapshots__/mixBlendMode.test.js.snap
diff --git a/tests/source-maps.test.js b/tests/source-maps.test.js
@@ -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',
     ])
   })
 
diff --git a/tests/util/defaults.js b/tests/util/defaults.js
@@ -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: ;
     }
   `
 }
diff --git a/tests/variants.oxide.test.css b/tests/variants.oxide.test.css
@@ -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;
@@ -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),
@@ -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),
diff --git a/tests/variants.test.css b/tests/variants.test.css

Original file line number	Diff line number	Diff line change
`@@ -49,6 +49,10 @@`
`49`	`49`	`--tw-backdrop-opacity: ;`
`50`	`50`	`--tw-backdrop-saturate: ;`
`51`	`51`	`--tw-backdrop-sepia: ;`
	`52`	`+ --tw-contain-size: ;`
	`53`	`+ --tw-contain-layout: ;`
	`54`	`+ --tw-contain-paint: ;`
	`55`	`+ --tw-contain-style: ;`
`52`	`56`	`}`
`53`	`57`	`.container {`
`54`	`58`	`width: 100%;`
`@@ -768,7 +772,7 @@`
`768`	`772`	`}`
`769`	`773`	`.font-sans {`
`770`	`774`	`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;`
`772`	`776`	`}`
`773`	`777`	`.text-2xl {`
`774`	`778`	`font-size: 1.5rem;`
Original file line number	Diff line number	Diff line change
@@ -58,6 +58,10 @@ export function defaults({ defaultRingColor = `#3b82f680` } = {}) {
`58`	`58`	`--tw-backdrop-opacity: ;`
`59`	`59`	`--tw-backdrop-saturate: ;`
`60`	`60`	`--tw-backdrop-sepia: ;`
	`61`	`+ --tw-contain-size: ;`
	`62`	`+ --tw-contain-layout: ;`
	`63`	`+ --tw-contain-paint: ;`
	`64`	`+ --tw-contain-style: ;`
`61`	`65`	`}`
`62`	`66`	`
`63`	`67`	`}`