From a8d4db6c4c7c6e1fdbb00d98f7dd282063a4cec6 Mon Sep 17 00:00:00 2001 From: Saya <379924+chu121su12@users.noreply.github.com> Date: Fri, 7 Oct 2022 10:08:56 +0800 Subject: [PATCH] feat(preset-mini,preset-wind): add @supports variant (#1686) --- packages/preset-mini/src/_theme/types.ts | 2 ++ packages/preset-mini/src/_variants/default.ts | 2 ++ packages/preset-mini/src/_variants/index.ts | 1 + .../preset-mini/src/_variants/supports.ts | 34 +++++++++++++++++++ packages/preset-wind/src/theme.ts | 3 ++ test/__snapshots__/preset-mini.test.ts.snap | 3 ++ test/__snapshots__/preset-wind.test.ts.snap | 3 ++ test/assets/preset-mini-targets.ts | 3 ++ test/assets/preset-wind-targets.ts | 3 ++ 9 files changed, 54 insertions(+) create mode 100644 packages/preset-mini/src/_variants/supports.ts diff --git a/packages/preset-mini/src/_theme/types.ts b/packages/preset-mini/src/_theme/types.ts index d7672e72c9..75cc1be43a 100644 --- a/packages/preset-mini/src/_theme/types.ts +++ b/packages/preset-mini/src/_theme/types.ts @@ -43,6 +43,8 @@ export interface Theme { easing?: Record // media queries media?: Record + // supports queries + supports?: Record // animation animation?: ThemeAnimation // grids diff --git a/packages/preset-mini/src/_variants/default.ts b/packages/preset-mini/src/_variants/default.ts index a2668254ef..d97edd06e2 100644 --- a/packages/preset-mini/src/_variants/default.ts +++ b/packages/preset-mini/src/_variants/default.ts @@ -9,6 +9,7 @@ import { variantCssLayer, variantInternalLayer, variantScope, variantSelector, v import { variantNegative } from './negative' import { variantImportant } from './important' import { variantCustomMedia, variantPrint } from './media' +import { variantSupports } from './supports' import { partClasses, variantPseudoClassFunctions, variantPseudoClassesAndElements, variantTaggedPseudoClasses } from './pseudo' export const variants = (options: PresetMiniOptions): Variant[] => [ @@ -19,6 +20,7 @@ export const variants = (options: PresetMiniOptions): Variant[] => [ variantInternalLayer, variantNegative, variantImportant, + variantSupports, variantPrint, variantCustomMedia, variantBreakpoints, diff --git a/packages/preset-mini/src/_variants/index.ts b/packages/preset-mini/src/_variants/index.ts index c4404966dd..f81f132126 100644 --- a/packages/preset-mini/src/_variants/index.ts +++ b/packages/preset-mini/src/_variants/index.ts @@ -2,6 +2,7 @@ export * from './breakpoints' export * from './combinators' export * from './media' +export * from './supports' export * from './dark' export * from './default' export * from './directions' diff --git a/packages/preset-mini/src/_variants/supports.ts b/packages/preset-mini/src/_variants/supports.ts new file mode 100644 index 0000000000..e6eabc1e97 --- /dev/null +++ b/packages/preset-mini/src/_variants/supports.ts @@ -0,0 +1,34 @@ +import type { VariantContext, VariantObject } from '@unocss/core' +import type { Theme } from '../theme' +import { getComponent, handler as h } from '../utils' + +export const variantSupports: VariantObject = { + name: 'supports', + match(matcher, { theme }: VariantContext) { + if (matcher.startsWith('supports-')) { + const matcherValue = matcher.substring(9) + + const [match, rest] = getComponent(matcherValue, '[', ']', ':') ?? [] + if (!(match && rest && rest !== '')) + return + + let supports = h.bracket(match) ?? '' + if (supports === '') { + const themeValue = theme.supports?.[match] + if (themeValue) + supports = themeValue + } + + if (supports) { + return { + matcher: rest, + handle: (input, next) => next({ + ...input, + parent: `${input.parent ? `${input.parent} $$ ` : ''}@supports ${supports}`, + }), + } + } + } + }, + multiPass: true, +} diff --git a/packages/preset-wind/src/theme.ts b/packages/preset-wind/src/theme.ts index b650099923..af2ab20b34 100644 --- a/packages/preset-wind/src/theme.ts +++ b/packages/preset-wind/src/theme.ts @@ -182,6 +182,9 @@ export const theme: Theme = { mouse: '(hover) and (pointer: fine)', hd_color: '(dynamic-range: high)', }, + supports: { + grid: '(display: grid)', + }, preflightBase: { ...transformBase, ...touchActionBase, diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap index f45d201eec..cc9ddfd057 100644 --- a/test/__snapshots__/preset-mini.test.ts.snap +++ b/test/__snapshots__/preset-mini.test.ts.snap @@ -918,6 +918,9 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina .print\\\\:block{display:block;} .print\\\\:link\\\\:\\\\!underline:link{text-decoration-line:underline !important;} } +@supports (display: grid){ +.supports-\\\\[\\\\(display\\\\:_grid\\\\)\\\\]\\\\:block{display:block;} +} @supports(display:grid){ .\\\\[\\\\@supports\\\\(display\\\\:grid\\\\)\\\\]\\\\:bg-red\\\\/33{background-color:rgba(248,113,113,0.33);} *+.\\\\[\\\\@supports\\\\(display\\\\:grid\\\\)\\\\]\\\\:\\\\[\\\\*\\\\+\\\\&\\\\]\\\\:bg-red\\\\/34{background-color:rgba(248,113,113,0.34);} diff --git a/test/__snapshots__/preset-wind.test.ts.snap b/test/__snapshots__/preset-wind.test.ts.snap index 56a148a75d..6791c5e78e 100644 --- a/test/__snapshots__/preset-wind.test.ts.snap +++ b/test/__snapshots__/preset-wind.test.ts.snap @@ -419,5 +419,8 @@ exports[`preset-wind > targets 1`] = ` } @media (prefers-reduced-motion: reduce){ .motion-reduce\\\\:hover\\\\:translate-0:hover{--un-translate-x:0rem;--un-translate-y:0rem;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} +} +@supports (display: grid){ +.supports-grid\\\\:block{display:block;} }" `; diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts index 4391c83f2e..5aae9f8c50 100644 --- a/test/assets/preset-mini-targets.ts +++ b/test/assets/preset-mini-targets.ts @@ -911,6 +911,9 @@ export const presetMiniTargets: string[] = [ '-p-px', '-z-1', + // variants supports + 'supports-[(display:_grid)]:block', + // variants media 'media-cssvar:block', diff --git a/test/assets/preset-wind-targets.ts b/test/assets/preset-wind-targets.ts index 99bd387e9e..5f844fbc09 100644 --- a/test/assets/preset-wind-targets.ts +++ b/test/assets/preset-wind-targets.ts @@ -366,6 +366,9 @@ export const presetWindTargets: string[] = [ // variants combinators 'svg:fill-red', + // variants supports: grid + 'supports-grid:block', + // variants media: contrasts, motions, orientations 'contrast-more:bg-black', 'uno-layer-_pre:contrast-less:bg-gray-3',