feat: add starting: variant for @starting-style

src/rules/transition.ts

@@ -97,4 +97,8 @@ export const transitions: Rule<Theme>[] = [
   // none
   ['transition-none', { transition: 'none' }],
   ...makeGlobalStaticRules('transition'),
+
+  // behavior
+  ['transition-discrete', { 'transition-behavior': 'allow-discrete' }],
+  ['transition-normal', { 'transition-behavior': 'normal' }],
 ]

src/variants/default.ts

@@ -15,6 +15,7 @@ import { variantAria, variantTaggedAriaAttributes } from './aria'
 import { variantDataAttribute, variantTaggedDataAttributes } from './data'
 import { variantContainerQuery } from './container'
 import { variantChildren } from './children'
+import { variantStartingStyle } from './startingstyle'
 
 export function variants(options: PresetWeappOptions): Variant<Theme>[] {
   return [
@@ -25,6 +26,7 @@ export function variants(options: PresetWeappOptions): Variant<Theme>[] {
     variantSelector,
     variantInternalLayer,
     variantNegative,
+    variantStartingStyle,
     variantImportant(),
     variantSupports,
     variantPrint,

src/variants/index.ts

@@ -14,3 +14,4 @@ export * from './pseudo'
 export * from './important'
 export * from './negative'
 export * from './children'
+export * from './startingstyle'

src/variants/startingstyle.ts

@@ -0,0 +1,17 @@
+import type { Variant } from '@unocss/core'
+
+export const variantStartingStyle: Variant = {
+  name: 'starting',
+  match(matcher) {
+    if (!matcher.startsWith('starting:'))
+      return
+
+    return {
+      matcher: matcher.slice(9),
+      handle: (input, next) => next({
+        ...input,
+        parent: `@starting-style`,
+      }),
+    }
+  },
+}

test/__snapshots__/autocomplete.test.ts.snap

@@ -428,7 +428,7 @@ exports[`autocomplete > should provide autocomplete 1`] = `
   "transform-scale-z-": "transform-scale-z-0 transform-scale-z-10 transform-scale-z-20 transform-scale-z-30 transform-scale-z-40 transform-scale-z-50 transform-scale-z-60 transform-scale-z-70 transform-scale-z-80 transform-scale-z-90",
   "transform-skew-x-": "transform-skew-x-0 transform-skew-x-10 transform-skew-x-20 transform-skew-x-30 transform-skew-x-40 transform-skew-x-50 transform-skew-x-60 transform-skew-x-70 transform-skew-x-80 transform-skew-x-90",
   "transform-skew-y-": "transform-skew-y-0 transform-skew-y-10 transform-skew-y-20 transform-skew-y-30 transform-skew-y-40 transform-skew-y-50 transform-skew-y-60 transform-skew-y-70 transform-skew-y-80 transform-skew-y-90",
-  "transition-": "transition-all transition-colors transition-delay-none transition-duration-none transition-ease-DEFAULT transition-ease-in transition-ease-in-out transition-ease-linear transition-ease-out transition-inherit",
+  "transition-": "transition-all transition-colors transition-delay-none transition-discrete transition-duration-none transition-ease-DEFAULT transition-ease-in transition-ease-in-out transition-ease-linear transition-ease-out",
   "translate-": "translate-0 translate-10 translate-20 translate-30 translate-40 translate-50 translate-60 translate-70 translate-80 translate-90",
   "translate-x-": "translate-x-0 translate-x-10 translate-x-20 translate-x-30 translate-x-40 translate-x-50 translate-x-60 translate-x-70 translate-x-80 translate-x-90",
   "v-": "v-base v-baseline v-bottom v-btm v-end v-inherit v-initial v-mid v-middle v-revert",

test/assets/output/preset-mini/targets.css

@@ -1264,6 +1264,8 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .transition-property-width{transition-property:width;}
 .transition-none{transition:none;}
 .transition-revert-layer{transition:revert-layer;}
+.transition-discrete{transition-behavior:allow-discrete;}
+.transition-normal{transition-behavior:normal;}
 .will-change-auto{will-change:auto;}
 .will-change-contents{will-change:contents;}
 .will-change-margin\,padding{will-change:margin,padding;}
@@ -1330,6 +1332,10 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .print\:block{display:block;}
 .print\:link\:\!underline:link{text-decoration-line:underline !important;}
 }
+@starting-style{
+.starting\:opacity-0{opacity:0;}
+.starting\:popover-open\:opacity-0:popover-open{opacity:0;}
+}
 @supports (display: grid){
 .supports-\[\(display\:_grid\)\]\:block{display:block;}
 }

test/assets/output/preset-weapp/targets-custom-rules.css

@@ -1265,6 +1265,8 @@ unocss .scope-_lfl11_unocss_lfr11__cl11_block{display:block;}
 .transition-property-width{transition-property:width;}
 .transition-none{transition:none;}
 .transition-revert-layer{transition:revert-layer;}
+.transition-discrete{transition-behavior:allow-discrete;}
+.transition-normal{transition-behavior:normal;}
 .will-change-auto{will-change:auto;}
 .will-change-contents{will-change:contents;}
 .will-change-margin_lco11_padding{will-change:margin,padding;}
@@ -1323,6 +1325,10 @@ unocss .scope-_lfl11_unocss_lfr11__cl11_block{display:block;}
 .print_cl11_block{display:block;}
 .print_cl11_link_cl11__el11_underline:link{text-decoration-line:underline !important;}
 }
+@starting-style{
+.starting_cl11_opacity-0{opacity:0;}
+.starting_cl11_popover-open_cl11_opacity-0:popover-open{opacity:0;}
+}
 @supports (display: grid){
 .supports-_lfl11__lbl11_display_cl11__grid_lbr11__lfr11__cl11_block{display:block;}
 }

test/assets/output/preset-weapp/targets.css

@@ -1268,6 +1268,8 @@ unocss .scope-_lfl_unocss_lfr__cl_block{display:block;}
 .transition-property-width{transition-property:width;}
 .transition-none{transition:none;}
 .transition-revert-layer{transition:revert-layer;}
+.transition-discrete{transition-behavior:allow-discrete;}
+.transition-normal{transition-behavior:normal;}
 .will-change-auto{will-change:auto;}
 .will-change-contents{will-change:contents;}
 .will-change-margin_lco_padding{will-change:margin,padding;}
@@ -1326,6 +1328,10 @@ unocss .scope-_lfl_unocss_lfr__cl_block{display:block;}
 .print_cl_block{display:block;}
 .print_cl_link_cl__el_underline:link{text-decoration-line:underline !important;}
 }
+@starting-style{
+.starting_cl_opacity-0{opacity:0;}
+.starting_cl_popover-open_cl_opacity-0:popover-open{opacity:0;}
+}
 @supports (display: grid){
 .supports-_lfl__lbl_display_cl__grid_lbr__lfr__cl_block{display:block;}
 }

test/assets/preset-mini-targets.ts

@@ -1031,6 +1031,10 @@ export const presetMiniTargets: string[] = [
   'ease-out',
   'transition-ease-in',
 
+  // transition - behavior - discrete/normal
+  'transition-discrete',
+  'transition-normal',
+
   // typography
   'font-mono',
   'font-[system-ui]',
@@ -1156,6 +1160,10 @@ export const presetMiniTargets: string[] = [
   'word-spacing-$variable',
   'ws-$variable',
 
+  // variants - starting style
+  'starting:opacity-0',
+  'starting:popover-open:opacity-0',
+
   // variables - property
   '[a:b]',
   '[margin:logical_1rem_2rem_3rem]',