feat(preset-mini,preset-wind): add @supports variant unocss/unocss#1686

MellowCo · Oct 28, 2022 · 019a00c · 019a00c
1 parent 99ad2f9
commit 019a00c
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 0 deletions.
diff --git a/src/theme/types.ts b/src/theme/types.ts
@@ -43,6 +43,8 @@ export interface Theme {
   easing?: Record<string, string>
   // media queries
   media?: Record<string, string>
+  // supports queries
+  supports?: Record<string, string>
   // animation
   animation?: ThemeAnimation
   // grids

diff --git 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<Theme>[] => [
@@ -19,6 +20,7 @@ export const variants = (options: PresetWeappOptions): Variant<Theme>[] => [
   variantInternalLayer,
   variantNegative,
   variantImportant,
+  variantSupports,
   variantPrint,
   variantCustomMedia,
   variantBreakpoints,

diff --git 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
@@ -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<Theme>) {
+    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
@@ -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
@@ -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
@@ -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
@@ -1041,6 +1041,9 @@ export const presetMiniTargets: string[] = [
   '-p-px',
   '-z-1',
 
+  // variants supports
+  'supports-[(display:_grid)]:block',
+
   // variants media
   'media-cssvar:block',