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]>
tailwindlabs · Feb 23, 2024 · 63f0e36 · 63f0e36
1 parent 5767986
commit 63f0e36
Show file tree

Hide file tree

Showing 9 changed files with 236 additions and 133 deletions.
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__/contain.test.js.snap b/tests/plugins/__snapshots__/contain.test.js.snap
@@ -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);
+}
+"
+`;
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),