diff --git a/src/corePlugins.js b/src/corePlugins.js index 551b0641e173..df52c1d9c4c0 100644 --- 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 index 2c102b7a35e5..2419d6f8e18e 100644 --- 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 index 17600764a711..49107dd91db7 100644 --- 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 new file mode 100644 index 000000000000..15354b8a7390 --- /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/__snapshots__/mixBlendMode.test.js.snap b/tests/plugins/__snapshots__/mixBlendMode.test.js.snap deleted file mode 100644 index 786d86ec62fe..000000000000 --- a/tests/plugins/__snapshots__/mixBlendMode.test.js.snap +++ /dev/null @@ -1,77 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`should test the 'mixBlendMode' plugin 1`] = ` -" -.mix-blend-normal { - mix-blend-mode: normal; -} - -.mix-blend-multiply { - mix-blend-mode: multiply; -} - -.mix-blend-screen { - mix-blend-mode: screen; -} - -.mix-blend-overlay { - mix-blend-mode: overlay; -} - -.mix-blend-darken { - mix-blend-mode: darken; -} - -.mix-blend-lighten { - mix-blend-mode: lighten; -} - -.mix-blend-color-dodge { - mix-blend-mode: color-dodge; -} - -.mix-blend-color-burn { - mix-blend-mode: color-burn; -} - -.mix-blend-hard-light { - mix-blend-mode: hard-light; -} - -.mix-blend-soft-light { - mix-blend-mode: soft-light; -} - -.mix-blend-difference { - mix-blend-mode: difference; -} - -.mix-blend-exclusion { - mix-blend-mode: exclusion; -} - -.mix-blend-hue { - mix-blend-mode: hue; -} - -.mix-blend-saturation { - mix-blend-mode: saturation; -} - -.mix-blend-color { - mix-blend-mode: color; -} - -.mix-blend-luminosity { - mix-blend-mode: luminosity; -} - -.mix-blend-plus-darker { - mix-blend-mode: plus-darker; -} - -.mix-blend-plus-lighter { - mix-blend-mode: plus-lighter; -} -" -`; diff --git a/tests/source-maps.test.js b/tests/source-maps.test.js index 686ec14eae59..08b60c9f52a1 100644 --- 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 index bea97d338154..4d3925c2cd5a 100644 --- 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 index c04721895c07..e35ed35ef1f2 100644 --- 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 index 95404e1cbe39..0b27b228141c 100644 --- a/tests/variants.test.css +++ b/tests/variants.test.css @@ -1,6 +1,58 @@ *, :before, -:after, +:after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: #3b82f680; + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --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; --tw-border-spacing-y: 0; @@ -49,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\:text-2xl:first-letter { font-size: 1.5rem;