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]>

Author: KrisBraun

src/corePlugins.js

@@ -2926,6 +2926,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)']]],
   ]),

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);
+}
+"
+`;

tests/plugins/contain.test.js

@@ -0,0 +1,3 @@
+import { quickPluginTest } from '../util/run'
+
+quickPluginTest('contain').toMatchSnapshot()

tests/source-maps.test.js

@@ -291,56 +291,64 @@ test('preflight + base have source maps', async () => {
       "243:2-25 -> 243:2-25",
       "244:2-26 -> 244:2-26",
       "245:2-23 -> 245:2-23",
-      "246:0 -> 246:0",
-      "248:0 -> 248:0",
-      "249:2-26 -> 249:2-26",
-      "250:2-26 -> 250:2-26",
-      "251:2-21 -> 251:2-21",
-      "252:2-21 -> 252:2-21",
-      "253:2-16 -> 253:2-16",
-      "254:2-16 -> 254:2-16",
-      "255:2-16 -> 255:2-16",
-      "256:2-17 -> 256:2-17",
-      "257:2-17 -> 257:2-17",
-      "258:2-14 -> 258:2-14",
-      "259:2-14 -> 259:2-14",
-      "260:2-19 -> 260:2-19",
-      "261:2-40 -> 261:2-40",
-      "262:2-31 -> 262:2-31",
-      "263:2-30 -> 263:2-30",
-      "264:2-29 -> 264:2-29",
-      "265:2-16 -> 265:2-16",
-      "266:2-21 -> 266:2-21",
-      "267:2-23 -> 267:2-23",
-      "268:2-24 -> 268:2-24",
-      "269:2-25 -> 269:2-25",
-      "270:2-19 -> 270:2-19",
-      "271:2-29 -> 271:2-29",
-      "272:2-30 -> 272:2-30",
-      "273:2-28 -> 273:2-28",
-      "274:2-36 -> 274:2-36",
+      "246:2-21 -> 246:2-21",
+      "247:2-23 -> 247:2-23",
+      "248:2-22 -> 248:2-22",
+      "249:2-22 -> 249:2-22",
+      "250:0 -> 250:0",
+      "252:0 -> 252:0",
+      "253:2-26 -> 253:2-26",
+      "254:2-26 -> 254:2-26",
+      "255:2-21 -> 255:2-21",
+      "256:2-21 -> 256:2-21",
+      "257:2-16 -> 257:2-16",
+      "258:2-16 -> 258:2-16",
+      "259:2-16 -> 259:2-16",
+      "260:2-17 -> 260:2-17",
+      "261:2-17 -> 261:2-17",
+      "262:2-14 -> 262:2-14",
+      "263:2-14 -> 263:2-14",
+      "264:2-19 -> 264:2-19",
+      "265:2-40 -> 265:2-40",
+      "266:2-31 -> 266:2-31",
+      "267:2-30 -> 267:2-30",
+      "268:2-29 -> 268:2-29",
+      "269:2-16 -> 269:2-16",
+      "270:2-21 -> 270:2-21",
+      "271:2-23 -> 271:2-23",
+      "272:2-24 -> 272:2-24",
+      "273:2-25 -> 273:2-25",
+      "274:2-19 -> 274:2-19",
       "275:2-29 -> 275:2-29",
-      "276:2-24 -> 276:2-24",
-      "277:2-32 -> 277:2-32",
-      "278:2-13 -> 278:2-13",
-      "279:2-19 -> 279:2-19",
-      "280:2-17 -> 280:2-17",
-      "281:2-18 -> 281:2-18",
-      "282:2-19 -> 282:2-19",
-      "283:2-15 -> 283:2-15",
+      "276:2-30 -> 276:2-30",
+      "277:2-28 -> 277:2-28",
+      "278:2-36 -> 278:2-36",
+      "279:2-29 -> 279:2-29",
+      "280:2-24 -> 280:2-24",
+      "281:2-32 -> 281:2-32",
+      "282:2-13 -> 282:2-13",
+      "283:2-19 -> 283:2-19",
       "284:2-17 -> 284:2-17",
-      "285:2-14 -> 285:2-14",
-      "286:2-20 -> 286:2-20",
-      "287:2-22 -> 287:2-22",
-      "288:2-28 -> 288:2-28",
-      "289:2-26 -> 289:2-26",
-      "290:2-27 -> 290:2-27",
-      "291:2-28 -> 291:2-28",
-      "292:2-24 -> 292:2-24",
-      "293:2-25 -> 293:2-25",
-      "294:2-26 -> 294:2-26",
-      "295:2-23 -> 295:2-23",
-      "296:0 -> 296:0",
+      "285:2-18 -> 285:2-18",
+      "286:2-19 -> 286:2-19",
+      "287:2-15 -> 287:2-15",
+      "288:2-17 -> 288:2-17",
+      "289:2-14 -> 289:2-14",
+      "290:2-20 -> 290:2-20",
+      "291:2-22 -> 291:2-22",
+      "292:2-28 -> 292:2-28",
+      "293:2-26 -> 293:2-26",
+      "294:2-27 -> 294:2-27",
+      "295:2-28 -> 295:2-28",
+      "296:2-24 -> 296:2-24",
+      "297:2-25 -> 297:2-25",
+      "298:2-26 -> 298:2-26",
+      "299:2-23 -> 299:2-23",
+      "300:2-21 -> 300:2-21",
+      "301:2-23 -> 301:2-23",
+      "302:2-22 -> 302:2-22",
+      "303:2-22 -> 303:2-22",
+      "304:0 -> 304:0",
     ]
   `)
 })

tests/util/defaults.js

@@ -57,6 +57,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: ;
     }
 
     ::backdrop {
@@ -107,6 +111,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: ;
     }
   `
 }

tests/variants.test.css

@@ -48,6 +48,10 @@
   --tw-backdrop-opacity: ;
   --tw-backdrop-saturate: ;
   --tw-backdrop-sepia: ;
+  --tw-contain-size: ;
+  --tw-contain-layout: ;
+  --tw-contain-paint: ;
+  --tw-contain-style: ;
 }
 ::backdrop {
   --tw-border-spacing-x: 0;
@@ -97,6 +101,10 @@
   --tw-backdrop-opacity: ;
   --tw-backdrop-saturate: ;
   --tw-backdrop-sepia: ;
+  --tw-contain-size: ;
+  --tw-contain-layout: ;
+  --tw-contain-paint: ;
+  --tw-contain-style: ;
 }
 .first-letter\:flex:first-letter,
 .first-line\:flex:first-line,