From 448142a73d86edc64527e95c53ed53d3917c8f56 Mon Sep 17 00:00:00 2001
From: praburangki <praburangki@gmail.com>
Date: Fri, 18 Nov 2022 03:44:20 +0800
Subject: [PATCH] feat(preset-mini): add contain (#1854)

---
 packages/preset-mini/src/_rules/default.ts  |  3 ++-
 packages/preset-mini/src/_rules/static.ts   | 13 +++++++++++++
 test/__snapshots__/preset-mini.test.ts.snap |  3 +++
 test/assets/preset-mini-targets.ts          |  3 +++
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/preset-mini/src/_rules/default.ts b/packages/preset-mini/src/_rules/default.ts
index 5204a785fa..c019c50224 100644
--- a/packages/preset-mini/src/_rules/default.ts
+++ b/packages/preset-mini/src/_rules/default.ts
@@ -12,7 +12,7 @@ import { rings } from './ring'
 import { boxShadows } from './shadow'
 import { aspectRatio, sizes } from './size'
 import { margins, paddings } from './spacing'
-import { appearances, breaks, contentVisibility, contents, cursors, displays, fontSmoothings, fontStyles, pointerEvents, resizes, textOverflows, textTransforms, userSelects, whitespaces } from './static'
+import { appearances, breaks, contains, contentVisibility, contents, cursors, displays, fontSmoothings, fontStyles, pointerEvents, resizes, textOverflows, textTransforms, userSelects, whitespaces } from './static'
 import { transforms } from './transform'
 import { cssProperty, cssVariables } from './variables'
 import { questionMark } from './question-mark'
@@ -77,6 +77,7 @@ export const rules: Rule[] = [
   transforms,
   willChange,
   containerParent,
+  contains,
 
   // should be the last
   questionMark,
diff --git a/packages/preset-mini/src/_rules/static.ts b/packages/preset-mini/src/_rules/static.ts
index 1d8203ab73..ccf7bd9399 100644
--- a/packages/preset-mini/src/_rules/static.ts
+++ b/packages/preset-mini/src/_rules/static.ts
@@ -2,6 +2,7 @@ import type { Rule } from '@unocss/core'
 import { globalKeywords, handler as h, makeGlobalStaticRules } from '../utils'
 
 const cursorValues = ['auto', 'default', 'none', 'context-menu', 'help', 'pointer', 'progress', 'wait', 'cell', 'crosshair', 'text', 'vertical-text', 'alias', 'copy', 'move', 'no-drop', 'not-allowed', 'grab', 'grabbing', 'all-scroll', 'col-resize', 'row-resize', 'n-resize', 'e-resize', 's-resize', 'w-resize', 'ne-resize', 'nw-resize', 'se-resize', 'sw-resize', 'ew-resize', 'ns-resize', 'nesw-resize', 'nwse-resize', 'zoom-in', 'zoom-out']
+const containValues = ['none', 'strict', 'content', 'size', 'inline-size', 'layout', 'style', 'paint']
 
 export const varEmpty = ' '
 
@@ -30,6 +31,18 @@ export const cursors: Rule[] = [
   ...cursorValues.map((v): Rule => [`cursor-${v}`, { cursor: v }]),
 ]
 
+export const contains: Rule[] = [
+  [/^contain-(.*)$/, ([, d]) => {
+    if (h.bracket(d) != null) {
+      return {
+        contain: h.bracket(d)!.split(' ').map(e => h.cssvar.fraction(e) ?? e).join(' '),
+      }
+    }
+
+    return containValues.includes(d) ? { contain: d } : undefined
+  }],
+]
+
 export const pointerEvents: Rule[] = [
   ['pointer-events-auto', { 'pointer-events': 'auto' }],
   ['pointer-events-none', { 'pointer-events': 'none' }],
diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap
index 344fc77e31..3f042734d5 100644
--- a/test/__snapshots__/preset-mini.test.ts.snap
+++ b/test/__snapshots__/preset-mini.test.ts.snap
@@ -918,6 +918,9 @@ unocss .scope-\\\\[unocss\\\\]\\\\:block{display:block;}
 .\\\\@container-normal{container-type:normal;}
 .\\\\@container\\\\/label{container-type:inline-size;container-name:label;}
 .\\\\@container\\\\/label-normal{container-type:normal;container-name:label;}
+.contain-\\\\[size_layout_paint\\\\]{contain:size layout paint;}
+.contain-\\\\[size_layout\\\\]{contain:size layout;}
+.contain-layout{contain:layout;}
 @container (min-width: 10.5rem){
 .\\\\@\\\\[10\\\\.5rem\\\\]-text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
 }
diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
index 5f8e73e08b..ac015a8c80 100644
--- a/test/assets/preset-mini-targets.ts
+++ b/test/assets/preset-mini-targets.ts
@@ -595,6 +595,9 @@ export const presetMiniTargets: string[] = [
   'whitespace-unset',
   'ws-nowrap',
   'ws-revert',
+  'contain-layout',
+  'contain-[size_layout]',
+  'contain-[size_layout_paint]',
 
   'break-normal',
   'break-words',