From 019a00c76a84cc9f141170a008b5cc215f423b9f Mon Sep 17 00:00:00 2001 From: MellowCo <799478052@qq.com> Date: Fri, 28 Oct 2022 11:31:21 +0800 Subject: [PATCH] feat(preset-mini,preset-wind): add @supports variant https://github.com/unocss/unocss/pull/1686 --- src/theme/types.ts | 2 ++ src/variants/default.ts | 2 ++ src/variants/index.ts | 1 + src/variants/supports.ts | 34 +++++++++++++++++++ test/__snapshots__/preset-mini.test.ts.snap | 3 ++ .../preset-weapp-rules.test.ts.snap | 3 ++ test/__snapshots__/preset-weapp.test.ts.snap | 3 ++ test/assets/preset-mini-targets.ts | 3 ++ 8 files changed, 51 insertions(+) create mode 100644 src/variants/supports.ts diff --git a/src/theme/types.ts b/src/theme/types.ts index 9768f90..a180b95 100644 --- a/src/theme/types.ts +++ b/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/src/variants/default.ts b/src/variants/default.ts index 48549f9..fcf29f9 100644 --- a/src/variants/default.ts +++ b/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: PresetWeappOptions): Variant[] => [ @@ -19,6 +20,7 @@ export const variants = (options: PresetWeappOptions): Variant[] => [ variantInternalLayer, variantNegative, variantImportant, + variantSupports, variantPrint, variantCustomMedia, variantBreakpoints, diff --git a/src/variants/index.ts b/src/variants/index.ts index c440496..f81f132 100644 --- a/src/variants/index.ts +++ b/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/src/variants/supports.ts b/src/variants/supports.ts new file mode 100644 index 0000000..e6eabc1 --- /dev/null +++ b/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/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap index f4a611d..9719dbb 100644 --- a/test/__snapshots__/preset-mini.test.ts.snap +++ b/test/__snapshots__/preset-mini.test.ts.snap @@ -1039,6 +1039,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-weapp-rules.test.ts.snap b/test/__snapshots__/preset-weapp-rules.test.ts.snap index 5102989..8b43965 100644 --- a/test/__snapshots__/preset-weapp-rules.test.ts.snap +++ b/test/__snapshots__/preset-weapp-rules.test.ts.snap @@ -1015,6 +1015,9 @@ div:hover .group--fl1r-div-cr1-hover-fr1r---fl1r-combinator-cr1-test-4-fr1r-{com .print-cr1-block{display:block;} .print-cr1-link-cr1--er1-underline:link{text-decoration-line:underline !important;} } +@supports (display: grid){ +.supports--fl1r--bl1r-display-cr1-_grid-br1r--fr1r--cr1-block{display:block;} +} @supports(display:grid){ .-fl1r-\\\\@supports-bl1r-display-cr1-grid-br1r--fr1r--cr1-bg-red-sr1-33{background-color:rgba(248,113,113,0.33);} *+.-fl1r-\\\\@supports-bl1r-display-cr1-grid-br1r--fr1r--cr1--fl1r-\\\\*\\\\+\\\\&-fr1r--cr1-bg-red-sr1-34{background-color:rgba(248,113,113,0.34);} diff --git a/test/__snapshots__/preset-weapp.test.ts.snap b/test/__snapshots__/preset-weapp.test.ts.snap index 8f71667..2acc97b 100644 --- a/test/__snapshots__/preset-weapp.test.ts.snap +++ b/test/__snapshots__/preset-weapp.test.ts.snap @@ -1015,6 +1015,9 @@ div:hover .group--fl-div-c-hover-fr---fl-combinator-c-test-4-fr-{combinator:test .print-c-block{display:block;} .print-c-link-c--e-underline:link{text-decoration-line:underline !important;} } +@supports (display: grid){ +.supports--fl--bl-display-c-_grid-br--fr--c-block{display:block;} +} @supports(display:grid){ .-fl-\\\\@supports-bl-display-c-grid-br--fr--c-bg-red-s-33{background-color:rgba(248,113,113,0.33);} *+.-fl-\\\\@supports-bl-display-c-grid-br--fr--c--fl-\\\\*\\\\+\\\\&-fr--c-bg-red-s-34{background-color:rgba(248,113,113,0.34);} diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts index 0079fe3..a2c8601 100644 --- a/test/assets/preset-mini-targets.ts +++ b/test/assets/preset-mini-targets.ts @@ -1041,6 +1041,9 @@ export const presetMiniTargets: string[] = [ '-p-px', '-z-1', + // variants supports + 'supports-[(display:_grid)]:block', + // variants media 'media-cssvar:block',