feat(preset-mini): add contain (#1854)

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,

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' }],

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));}
 }

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',