feat(preset-mini): add start variant for @starting-style and transition-discrete, transition-normal rules

[henrikvilhelmberglund]

This PR:

Adds a start: variant to support @starting-style which can be used to set initial values for popover CSS transitions. Used for fade in effects.

This allows for three states in popover transitions:

• Start (fade in) with start:popover-open:
• Open with popover-open:
• End (fade out) with the default (non variant) class
  https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style

Adds transition-discrete and transition-normal rules.

transition-discrete can be needed for popover transitions (the End part) and transition-normal is the default behavior
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior

Example:

<button popovertarget="my-styled-popover">Open styled Popover</button>

<div class="m-0 transition-all top-20 p-4 mx-auto
  start:popover-open:translate-y-0
  transition-all
  transition-discrete
  start:popover-open:opacity-0
  popover-open:translate-y-40
  start:popover-open:opacity-0
  popover-open:opacity-100
  opacity-0
  duration-1000
  backdrop:duration-1000
  
  start:popover-open:backdrop:bg-black
  popover-open:backdrop:bg-blue-300
  backdrop:transition-all
  backdrop:transition-discrete
  " 
  popover id="my-styled-popover">Greetings, one and all! (styled popover)</div>

[netlify]

✅ Deploy Preview for unocss ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	cee80b6
🔍 Latest deploy log	https://app.netlify.com/sites/unocss/deploys/65f4721edb667d0009b7d4f9
😎 Deploy Preview	https://deploy-preview-3621--unocss.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[antfu]

I am not so sure about this variant; the name feels a bit too general and can be confusing. Since the feature is still experimental, I guess it might be better for you do it in-house at this moment.

[henrikvilhelmberglund]

It is experimental but already in Chrome/Chrome for Android and Edge. https://caniuse.com/?search=%40starting-style
Webkit support coming soon: WebKit/WebKit@1544606

start could be starting instead (saw this in Tailwind, also not merged yet) but starting-style is what it's called basically.

No rush to merge (might as well wait for Tailwind PR review) but this will be useful for popovers using transitions instead of animations so could be nice to have if/when those become popular later.