From e4154e00865859a0fee02b8a133a77e07d7c1e7d Mon Sep 17 00:00:00 2001 From: Kris Braun Date: Wed, 21 Feb 2024 15:55:36 -0500 Subject: [PATCH] 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 --- src/corePlugins.js | 42 +++++++ .../__snapshots__/contain.test.js.snap | 56 ++++++++++ tests/plugins/contain.test.js | 3 + tests/source-maps.test.js | 104 ++++++++++-------- tests/util/defaults.js | 8 ++ tests/variants.test.css | 8 ++ 6 files changed, 173 insertions(+), 48 deletions(-) create mode 100644 tests/plugins/__snapshots__/contain.test.js.snap create mode 100644 tests/plugins/contain.test.js diff --git a/src/corePlugins.js b/src/corePlugins.js index 8728d7345..e688fc5cc 100644 --- a/src/corePlugins.js +++ b/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)']]], ]), diff --git a/tests/plugins/__snapshots__/contain.test.js.snap b/tests/plugins/__snapshots__/contain.test.js.snap new file mode 100644 index 000000000..15354b8a7 --- /dev/null +++ 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/contain.test.js b/tests/plugins/contain.test.js new file mode 100644 index 000000000..10e6f0403 --- /dev/null +++ b/tests/plugins/contain.test.js @@ -0,0 +1,3 @@ +import { quickPluginTest } from '../util/run' + +quickPluginTest('contain').toMatchSnapshot() diff --git a/tests/source-maps.test.js b/tests/source-maps.test.js index a1e2a7dd8..30eb46467 100644 --- a/tests/source-maps.test.js +++ b/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", ] `) }) diff --git a/tests/util/defaults.js b/tests/util/defaults.js index 945cc753b..0a5f540d7 100644 --- a/tests/util/defaults.js +++ b/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: ; } ` } diff --git a/tests/variants.test.css b/tests/variants.test.css index b8e87257c..bbb3a327b 100644 --- a/tests/variants.test.css +++ b/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,