From 3d98f9f0ea02df1281c5a3383d76157ff757be93 Mon Sep 17 00:00:00 2001 From: chris-zhu <1633711653@qq.com> Date: Wed, 10 Aug 2022 15:38:31 +0800 Subject: [PATCH 1/2] feat(preset-mini): content visibility rules --- packages/preset-mini/src/rules/default.ts | 3 ++- packages/preset-mini/src/rules/static.ts | 8 ++++++++ packages/preset-wind/src/rules/default.ts | 2 ++ test/__snapshots__/preset-mini.test.ts.snap | 8 ++++++++ test/assets/preset-mini-targets.ts | 10 ++++++++++ 5 files changed, 30 insertions(+), 1 deletion(-) 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..e192ada6bb 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) })], + ['content-visible', { 'content-visibility': 'visible' }], + ['content-hidden', { 'content-visibility': 'hidden' }], + ['content-auto', { 'content-visibility': 'auto' }], + ...makeGlobalStaticRules('content', '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..4771dfb99e 100644 --- a/test/__snapshots__/preset-mini.test.ts.snap +++ b/test/__snapshots__/preset-mini.test.ts.snap @@ -288,6 +288,13 @@ 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-visible{content-visibility:visible;} +.content-hidden{content-visibility:hidden;} +.content-auto{content-visibility:auto;} .after\\\\:content-\\\\[unocss\\\\]::after, .content-\\\\[unocss\\\\]{content:\\"unocss\\";} .content-\\\\[\\\\!\\\\]{content:\\"!\\";} @@ -747,6 +754,7 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina .content-center{align-content:center;} .content-start{align-content:flex-start;} .content-inherit{align-content:inherit;} +.content-unset{align-content:unset;} .items-end{align-items:flex-end;} .items-unset{align-items:unset;} .self-stretch{align-self:stretch;} diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts index cab0652ab3..51f16ce952 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-auto', + 'content-visible', + 'content-hidden', + 'content-unset', + 'intrinsic-size-200', + 'intrinsic-size-200px', + 'intrinsic-size-1/2', + 'intrinsic-size-unset', + // svg 'fill-none', 'fill-current', From af3f760a7dc1ef4b49b5423e200b952108d7568d Mon Sep 17 00:00:00 2001 From: chris-zhu <1633711653@qq.com> Date: Wed, 10 Aug 2022 17:29:26 +0800 Subject: [PATCH 2/2] chore: update --- packages/preset-mini/src/rules/static.ts | 10 +++++----- test/__snapshots__/preset-mini.test.ts.snap | 8 ++++---- test/assets/preset-mini-targets.ts | 8 ++++---- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/preset-mini/src/rules/static.ts b/packages/preset-mini/src/rules/static.ts index e192ada6bb..048d5ed17c 100644 --- a/packages/preset-mini/src/rules/static.ts +++ b/packages/preset-mini/src/rules/static.ts @@ -61,11 +61,11 @@ export const whitespaces: Rule[] = [ ] export const contentVisibility: Rule[] = [ - [/^intrinsic-size-(.+)$/, ([, d]) => ({ 'contain-intrinsic-size': h.bracket.cssvar.global.fraction.rem(d) })], - ['content-visible', { 'content-visibility': 'visible' }], - ['content-hidden', { 'content-visibility': 'hidden' }], - ['content-auto', { 'content-visibility': 'auto' }], - ...makeGlobalStaticRules('content', 'content-visibility'), + [/^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[] = [ diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap index 4771dfb99e..29ce78dae5 100644 --- a/test/__snapshots__/preset-mini.test.ts.snap +++ b/test/__snapshots__/preset-mini.test.ts.snap @@ -292,9 +292,10 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina .intrinsic-size-200{contain-intrinsic-size:50rem;} .intrinsic-size-200px{contain-intrinsic-size:200px;} .intrinsic-size-unset{contain-intrinsic-size:unset;} -.content-visible{content-visibility:visible;} -.content-hidden{content-visibility:hidden;} -.content-auto{content-visibility:auto;} +.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:\\"!\\";} @@ -754,7 +755,6 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina .content-center{align-content:center;} .content-start{align-content:flex-start;} .content-inherit{align-content:inherit;} -.content-unset{align-content:unset;} .items-end{align-items:flex-end;} .items-unset{align-items:unset;} .self-stretch{align-self:stretch;} diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts index 51f16ce952..1eb8573db2 100644 --- a/test/assets/preset-mini-targets.ts +++ b/test/assets/preset-mini-targets.ts @@ -612,10 +612,10 @@ export const presetMiniTargets: string[] = [ 'content-$unocss-var', // content visibility - 'content-auto', - 'content-visible', - 'content-hidden', - 'content-unset', + 'content-visibility-auto', + 'content-visibility-visible', + 'content-visibility-hidden', + 'content-visibility-unset', 'intrinsic-size-200', 'intrinsic-size-200px', 'intrinsic-size-1/2',