diff --git a/packages/preset-mini/src/_rules/transition.ts b/packages/preset-mini/src/_rules/transition.ts index 8c7874accb..50efb609d4 100644 --- a/packages/preset-mini/src/_rules/transition.ts +++ b/packages/preset-mini/src/_rules/transition.ts @@ -64,4 +64,8 @@ export const transitions: Rule[] = [ // none ['transition-none', { transition: 'none' }], ...makeGlobalStaticRules('transition'), + + // behavior + ['transition-discrete', { 'transition-behavior': 'allow-discrete' }], + ['transition-normal', { 'transition-behavior': 'normal' }], ] diff --git a/packages/preset-mini/src/_variants/default.ts b/packages/preset-mini/src/_variants/default.ts index faf1182823..d1c91db48c 100644 --- a/packages/preset-mini/src/_variants/default.ts +++ b/packages/preset-mini/src/_variants/default.ts @@ -14,6 +14,7 @@ import { variantPartClasses, variantPseudoClassFunctions, variantPseudoClassesAn import { variantAria } from './aria' import { variantDataAttribute, variantTaggedDataAttributes } from './data' import { variantContainerQuery } from './container' +import { variantStartingStyle } from './startingstyle' export function variants(options: PresetMiniOptions): Variant[] { return [ @@ -24,6 +25,7 @@ export function variants(options: PresetMiniOptions): Variant[] { variantSelector, variantInternalLayer, variantNegative, + variantStartingStyle, variantImportant(), variantSupports, variantPrint, diff --git a/packages/preset-mini/src/_variants/index.ts b/packages/preset-mini/src/_variants/index.ts index c307f8076a..0b9442019a 100644 --- a/packages/preset-mini/src/_variants/index.ts +++ b/packages/preset-mini/src/_variants/index.ts @@ -13,3 +13,4 @@ export * from './misc' export * from './negative' export * from './pseudo' export * from './supports' +export * from './startingstyle' diff --git a/packages/preset-mini/src/_variants/startingstyle.ts b/packages/preset-mini/src/_variants/startingstyle.ts new file mode 100644 index 0000000000..7ac9ced82b --- /dev/null +++ b/packages/preset-mini/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`, + }), + } + }, +} diff --git a/test/__snapshots__/autocomplete.test.ts.snap b/test/__snapshots__/autocomplete.test.ts.snap index 313deb6520..59edee6c23 100644 --- a/test/__snapshots__/autocomplete.test.ts.snap +++ b/test/__snapshots__/autocomplete.test.ts.snap @@ -70,7 +70,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-inherit transition-initial transition-none transition-opacity transition-revert transition-revert-layer transition-shadow transition-transform", + "transition-": "transition-all transition-colors transition-discrete transition-inherit transition-initial transition-none transition-normal transition-opacity transition-revert transition-revert-layer", "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",