diff --git a/packages/preset-mini/src/rules/default.ts b/packages/preset-mini/src/rules/default.ts index e186754fe1..9bfc460269 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, 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 index 88617e3cea..048d5ed17c 100644 --- 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-' }], + ['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 index 9f7f6b7d9d..56b00e7f2f 100644 --- 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 index b611885871..29ce78dae5 100644 --- 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 index cab0652ab3..1eb8573db2 100644 --- 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',