feat(preset-mini): content visibility rules (#1398)

unocss · Aug 11, 2022 · a5f6d96 · a5f6d96
1 parent 2180281
commit a5f6d96
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 1 deletion.
diff --git 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, contents, cursors, displays, fontSmoothings, fontStyles, pointerEvents, resizes, textOverflows, textTransforms, userSelects, whitespaces } from './static'
+import { appearances, breaks, 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'
@@ -31,6 +31,7 @@ export const rules: Rule[] = [
   bgColors,
   svgUtilities,
   borders,
+  contentVisibility,
   contents,
   fonts,
   tabSizes,

diff --git a/packages/preset-mini/src/rules/static.ts b/packages/preset-mini/src/rules/static.ts
@@ -60,6 +60,14 @@ export const whitespaces: Rule[] = [
   ],
 ]
 
+export const contentVisibility: Rule[] = [
+  [/^intrinsic-size-(.+)$/, ([, d]) => ({ 'contain-intrinsic-size': h.bracket.cssvar.global.fraction.rem(d) }), { autocomplete: 'intrinsic-size-<num>' }],
+  ['content-visibility-visible', { 'content-visibility': 'visible' }],
+  ['content-visibility-hidden', { 'content-visibility': 'hidden' }],
+  ['content-visibility-auto', { 'content-visibility': 'auto' }],
+  ...makeGlobalStaticRules('content-visibility'),
+]
+
 export const contents: Rule[] = [
   [/^content-\[(.+)\]$/, ([, v]) => ({ content: `"${v}"` })],
   [/^content-(\$.+)]$/, ([, v]) => ({ content: h.cssvar(v) })],

diff --git a/packages/preset-wind/src/rules/default.ts b/packages/preset-wind/src/rules/default.ts
@@ -8,6 +8,7 @@ import {
   borders,
   boxShadows,
   boxSizing,
+  contentVisibility,
   contents,
   cssProperty,
   cursors,
@@ -152,6 +153,7 @@ export const rules: Rule[] = [
   filters,
   transitions,
   willChange,
+  contentVisibility,
   contents,
   placeholders,
 

diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap
@@ -288,6 +288,14 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .border-block-style-double{border-block-start-style:double;border-block-end-style:double;}
 .border-ie-unset{border-inline-end-style:unset;}
 .border-is-style-double{border-inline-start-style:double;}
+.intrinsic-size-1\\\\/2{contain-intrinsic-size:50%;}
+.intrinsic-size-200{contain-intrinsic-size:50rem;}
+.intrinsic-size-200px{contain-intrinsic-size:200px;}
+.intrinsic-size-unset{contain-intrinsic-size:unset;}
+.content-visibility-visible{content-visibility:visible;}
+.content-visibility-hidden{content-visibility:hidden;}
+.content-visibility-auto{content-visibility:auto;}
+.content-visibility-unset{content-visibility:unset;}
 .after\\\\:content-\\\\[unocss\\\\]::after,
 .content-\\\\[unocss\\\\]{content:\\"unocss\\";}
 .content-\\\\[\\\\!\\\\]{content:\\"!\\";}

diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
@@ -611,6 +611,16 @@ export const presetMiniTargets: string[] = [
   'content-[attr(underlined_attr)]',
   'content-$unocss-var',
 
+  // content visibility
+  'content-visibility-auto',
+  'content-visibility-visible',
+  'content-visibility-hidden',
+  'content-visibility-unset',
+  'intrinsic-size-200',
+  'intrinsic-size-200px',
+  'intrinsic-size-1/2',
+  'intrinsic-size-unset',
+
   // svg
   'fill-none',
   'fill-current',