vitrify 0.17.6 → 0.17.8

package/src/node/plugins/quasar/unocss/index.ts

@@ -2,6 +2,7 @@
 import {
   definePreset,
   type Preflight,
+  presetIcons,
   type Rule,
   transformerVariantGroup,
   type UserShortcuts
@@ -137,7 +138,10 @@ import {
   preflights as DarkPreflights,
   shortcuts as DarkShortcuts
 } from './core/dark.unocss.js'
-import { rules as ElevationRules } from './core/elevation.unocss.js'
+import {
+  shortcuts as ElevationShortcuts,
+  rules as ElevationRules
+} from './core/elevation.unocss.js'
 import { shortcuts as FlexShortcuts } from './core/flex.unocss.js'
 import {
   rules as HelperRules,
@@ -152,7 +156,10 @@ import { shortcuts as OrientationShortcuts } from './core/orientation.unocss.js'
 import { shortcuts as PositionShortcuts } from './core/position.unocss.js'
 import { shortcuts as SizeShortcuts } from './core/size.unocss.js'
 import { shortcuts as TouchShortcuts } from './core/touch.unocss.js'
-import { shortcuts as TransitionsShortcuts } from './core/transitions.unocss.js'
+import {
+  preflights as TransitionPreflights,
+  shortcuts as TransitionsShortcuts
+} from './core/transitions.unocss.js'
 import {
   preflights as TypographyPreflights,
   shortcuts as TypographyShortcuts
@@ -166,16 +173,20 @@ import {
 import { shortcuts as QHeaderShortcuts } from './components/QHeader.unocss.js'
 import { shortcuts as QFooterShortcuts } from './components/QFooter.unocss.js'
 import { shortcuts as QDrawerShortcuts } from './components/QDrawer.unocss.js'
-import { type QuasarPlugins } from 'quasar'
+import { type QuasarIconSet, type QuasarPlugins } from 'quasar'
 
 export interface QuasarPresetOptions {
   plugins?: (keyof QuasarPlugins)[]
-  theme?: {
-    shadowColor?: string
-    darkShadowColor?: string
-  }
+  iconSet?: QuasarIconSet
 }
 
+const extractKeys = (obj: Record<string, any>) =>
+  Object.values(obj).reduce((acc, cur) => {
+    if (typeof cur === 'string') acc.push(cur)
+    else if (typeof cur === 'object') acc = acc.concat(extractKeys(cur))
+    return acc
+  }, [] as string[])
+
 const toKebabCase = (str: string) =>
   str
     .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
@@ -313,293 +324,371 @@ const pluginSafelistMap: Partial<Record<keyof QuasarPlugins, string[]>> = {
 }
 
 const baseSafelist = [
-  'material-icons',
-  'material-icons-outlined',
-  'material-icons-round',
-  'material-icons-sharp',
-  'material-symbols-outlined',
-  'material-symbols-rounded',
-  'material-symbols-sharp',
-  'q-animate--scale',
-  'q-animate--fade',
-  'inset-shadow',
-  'inset-shadow-down',
-  'no-shadow',
-  'shadow-0',
-  'z-marginals',
-  'z-notify',
-  'z-fullscreen',
-  'z-inherit',
-  'row',
+  'absolute',
+  'absolute-bottom',
+  'absolute-full',
+  'absolute-right',
+  'absolute-top',
+  'block',
+  'border-radius-inherit',
   'column',
+  'content-center',
+  'cursor-pointer',
+  'disabled',
+  'ellipsis',
+  'fit',
+  'fixed',
+  'fixed-bottom',
+  'fixed-full',
+  'fixed-left',
+  'fixed-right',
+  'fixed-top',
   'flex',
-  'wrap',
-  'no-wrap',
-  'reverse-wrap',
-  'order-first',
-  'order-last',
-  'order-none',
-  'justify-start',
-  'justify-end',
-  'justify-center',
   'flex-center',
-  'justify-between',
-  'justify-around',
-  'justify-evenly',
-  'items-start',
-  'items-end',
+  'full-width',
+  'fullscreen',
+  'glossy',
+  'hidden',
+  'hide-scrollbar',
+  'invisible',
   'items-center',
-  'items-baseline',
+  'items-end',
+  'items-start',
   'items-stretch',
-  'content-start',
-  'content-end',
-  'content-center',
-  'content-stretch',
-  'content-between',
-  'content-around',
-  'self-start',
-  'self-end',
-  'self-center',
-  'self-baseline',
-  'self-stretch',
-  'q-gutter-x-none',
-  'q-gutter-none',
-  'q-gutter-y-none',
-  'q-col-gutter-x-none',
-  'q-col-gutter-none',
-  'q-col-gutter-y-none',
-  'q-gutter-x-xs',
-  'q-gutter-xs',
-  'q-gutter-y-xs',
-  'q-col-gutter-x-xs',
-  'q-col-gutter-xs',
-  'q-col-gutter-y-xs',
-  'q-gutter-x-sm',
-  'q-gutter-sm',
-  'q-gutter-y-sm',
-  'q-col-gutter-x-sm',
-  'q-col-gutter-sm',
-  'q-col-gutter-y-sm',
-  'q-gutter-x-md',
-  'q-gutter-md',
-  'q-gutter-y-md',
-  'q-col-gutter-x-md',
-  'q-col-gutter-md',
-  'q-col-gutter-y-md',
-  'q-gutter-x-lg',
-  'q-gutter-lg',
-  'q-gutter-y-lg',
-  'q-col-gutter-x-lg',
-  'q-col-gutter-lg',
-  'q-col-gutter-y-lg',
-  'q-gutter-x-xl',
-  'q-gutter-xl',
-  'q-gutter-y-xl',
-  'q-col-gutter-x-xl',
-  'q-col-gutter-xl',
-  'q-col-gutter-y-xl',
-  'rounded-borders',
-  'border-radius-inherit',
+  'justify-between',
+  'justify-center',
+  'justify-end',
+  'justify-start',
+  'no-border',
+  'no-border-radius',
+  'no-outline',
+  'no-pointer-events',
+  'no-pointer-events--children',
+  'no-shadow',
   'no-transition',
-  'transition-0',
-  'glossy',
-  'q-placeholder',
-  'q-body--fullscreen-mixin',
-  'q-body--prevent-scroll',
+  'no-wrap',
+  'non-selectable',
+  'on-left',
+  'on-right',
+  'overflow-auto',
+  'overflow-hidden',
+  'q-animate--scale',
   'q-body--force-scrollbar-x',
   'q-body--force-scrollbar-y',
-  'q-no-input-spinner',
+  'q-body--fullscreen-mixin',
+  'q-body--prevent-scroll',
+  'q-dark',
+  'q-focus-helper',
+  'q-focusable',
+  'q-gutter-x-sm',
+  'q-gutter-xs',
+  'q-hoverable',
   'q-link',
   'q-link--focusable',
-  'non-selectable',
+  'q-manual-focusable',
+  'q-placeholder',
+  'q-position-engine',
+  'readonly',
+  'relative-position',
+  'rotate-180',
+  'rounded-borders',
+  'row',
   'scroll',
   'scroll-x',
   'scroll-y',
-  'no-scroll',
-  'no-pointer-events',
-  'no-pointer-events--children',
-  'all-pointer-events',
-  'cursor-pointer',
-  'cursor-not-afllowed',
-  'cursor-inherit',
-  'cursor-none',
-  'rotate-45',
-  'rotate-90',
-  'rotate-135',
-  'rotate-180',
-  'rotate-225',
-  'rotate-270',
-  'rotate-315',
-  'flip-horizontal',
-  'flip-vertical',
-  'float-left',
-  'float-right',
-  'relative-position',
-  'fixed',
-  'fixed-full',
-  'fullscreen',
-  'fixed-center',
-  'fixed-bottom',
-  'fixed-left',
-  'fixed-right',
-  'fixed-top',
-  'fixed-top-left',
-  'fixed-top-right',
-  'fixed-bottom-left',
-  'fixed-bottom-right',
-  'absolute',
-  'absolute-full',
-  'absolute-center',
-  'absolute-bottom',
-  'absolute-left',
-  'absolute-right',
-  'absolute-top',
-  'absolute-top-left',
-  'absolute-top-right',
-  'absolute-bottom-left',
-  'absolute-bottom-right',
-  'vertical-top',
-  'vertical-middle',
-  'vertical-bottom',
-  'on-left',
-  'on-right',
-  'q-position-engine',
-  'fit',
-  'full-height',
-  'full-width',
-  'window-height',
-  'window-width',
-  'block',
-  'inline-block',
-  'q-touch',
-  'q-touch-x',
-  'q-touch-y',
-  'q-transition--slide-right-enter-active',
-  'q-transition--slide-right-leave-active',
-  'q-transition--slide-left-enter-active',
-  'q-transition--slide-left-leave-active',
-  'q-transition--slide-up-enter-active',
-  'q-transition--slide-up-leave-active',
-  'q-transition--slide-down-enter-active',
-  'q-transition--slide-down-leave-active',
-  'q-transition--jump-right-enter-active',
-  'q-transition--jump-right-leave-active',
-  'q-transition--jump-left-enter-active',
-  'q-transition--jump-left-leave-active',
-  'q-transition--jump-up-enter-active',
-  'q-transition--jump-up-leave-active',
-  'q-transition--jump-down-enter-active',
-  'q-transition--jump-down-leave-active',
-  'q-transition--fade-enter-active',
-  'q-transition--fade-leave-active',
-  'q-transition--scale-enter-active',
-  'q-transition--scale-leave-active',
-  'q-transition--rotate-enter-active',
-  'q-transition--rotate-leave-active',
-  'q-transition--flip-enter-active',
-  'q-transition--flip-leave-active',
-  'q-transition--slide-right-enter-from',
-  'q-transition--slide-right-leave-to',
-  'q-transition--slide-left-enter-from',
-  'q-transition--slide-left-leave-to',
-  'q-transition--slide-up-enter-from',
-  'q-transition--slide-up-leave-to',
-  'q-transition--slide-down-enter-from',
-  'q-transition--slide-down-leave-to',
-  'q-transition--jump-right-enter-from',
-  'q-transition--jump-right-leave-to',
-  'q-transition--jump-left-enter-from',
-  'q-transition--jump-left-leave-to',
-  'q-transition--jump-up-enter-from',
-  'q-transition--jump-up-leave-to',
-  'q-transition--jump-down-enter-from',
-  'q-transition--jump-down-leave-to',
-  'q-transition--fade-enter-from',
-  'q-transition--fade-leave-to',
-  'q-transition--scale-enter-from',
-  'q-transition--scale-leave-to',
-  'q-transition--rotate-enter-from',
-  'q-transition--rotate-leave-to',
-  'q-transition--flip-right-enter-active',
-  'q-transition--flip-right-leave-active',
-  'q-transition--flip-left-enter-active',
-  'q-transition--flip-left-leave-active',
-  'q-transition--flip-up-enter-active',
-  'q-transition--flip-up-leave-active',
-  'q-transition--flip-down-enter-active',
-  'q-transition--flip-down-leave-active',
-  'q-transition--flip-right-enter-to',
-  'q-transition--flip-right-leave-from',
-  'q-transition--flip-left-enter-to',
-  'q-transition--flip-left-leave-from',
-  'q-transition--flip-up-enter-to',
-  'q-transition--flip-up-leave-from',
-  'q-transition--flip-down-enter-to',
-  'q-transition--flip-down-leave-from',
-  'q-transition--flip-right-enter-from',
-  'q-transition--flip-right-leave-to',
-  'q-transition--flip-left-enter-from',
-  'q-transition--flip-left-leave-to',
-  'q-transition--flip-up-enter-from',
-  'q-transition--flip-up-leave-to',
-  'q-transition--flip-down-enter-from',
-  'q-transition--flip-down-leave-to',
-  'text-h1',
-  'text-h2',
-  'text-h3',
-  'text-h4',
-  'text-h5',
-  'text-h6',
-  'text-subtitle1',
-  'text-subtitle2',
-  'text-body1',
+  'self-center',
+  'self-end',
+  'self-start',
+  'self-stretch',
   'text-body2',
-  'text-overline',
   'text-caption',
-  'text-uppercase',
-  'text-lowercase',
-  'text-capitalize',
   'text-center',
-  'text-left',
-  'text-right',
-  'text-justify',
-  'text-italic',
-  'text-bold',
   'text-no-wrap',
-  'text-strike',
-  'text-weight-thin',
-  'text-weight-light',
-  'text-weight-regular',
-  'text-weight-medium',
-  'text-weight-bold',
-  'text-weight-bolder',
-  'no-margin',
-  'no-padding',
-  'no-border',
-  'no-border-radius',
-  'no-box-shadow',
-  'no-outline',
-  'ellipsis',
-  'ellipsis-2-lines',
-  'ellipsis-3-lines',
-  'readonly',
-  'disabled',
-  'hidden',
-  'invisible',
+  'text-overline',
   'transparent',
-  'overflow-auto',
-  'overflow-hidden',
-  'overflow-hidden-y',
-  'hide-scrollbar',
-  'dimmed',
-  'light-dimmed',
-  'z-top',
+  'wrap',
   'z-max',
-  'q-focus-helper',
-  'q-focusable',
-  'q-manual-focusable',
-  'q-hoverable',
-  'q-dark'
+  'z-top'
+  // 'q-animate--scale',
+  // 'q-animate--fade',
+  // 'inset-shadow',
+  // 'inset-shadow-down',
+  // 'no-shadow',
+  // 'shadow-0',
+  // 'z-marginals',
+  // 'z-notify',
+  // 'z-fullscreen',
+  // 'z-inherit',
+  // 'row',
+  // 'column',
+  // 'flex',
+  // 'wrap',
+  // 'no-wrap',
+  // 'reverse-wrap',
+  // 'order-first',
+  // 'order-last',
+  // 'order-none',
+  // 'justify-start',
+  // 'justify-end',
+  // 'justify-center',
+  // 'flex-center',
+  // 'justify-between',
+  // 'justify-around',
+  // 'justify-evenly',
+  // 'items-start',
+  // 'items-end',
+  // 'items-center',
+  // 'items-baseline',
+  // 'items-stretch',
+  // 'content-start',
+  // 'content-end',
+  // 'content-center',
+  // 'content-stretch',
+  // 'content-between',
+  // 'content-around',
+  // 'self-start',
+  // 'self-end',
+  // 'self-center',
+  // 'self-baseline',
+  // 'self-stretch',
+  // 'q-gutter-x-none',
+  // 'q-gutter-none',
+  // 'q-gutter-y-none',
+  // 'q-col-gutter-x-none',
+  // 'q-col-gutter-none',
+  // 'q-col-gutter-y-none',
+  // 'q-gutter-x-xs',
+  // 'q-gutter-xs',
+  // 'q-gutter-y-xs',
+  // 'q-col-gutter-x-xs',
+  // 'q-col-gutter-xs',
+  // 'q-col-gutter-y-xs',
+  // 'q-gutter-x-sm',
+  // 'q-gutter-sm',
+  // 'q-gutter-y-sm',
+  // 'q-col-gutter-x-sm',
+  // 'q-col-gutter-sm',
+  // 'q-col-gutter-y-sm',
+  // 'q-gutter-x-md',
+  // 'q-gutter-md',
+  // 'q-gutter-y-md',
+  // 'q-col-gutter-x-md',
+  // 'q-col-gutter-md',
+  // 'q-col-gutter-y-md',
+  // 'q-gutter-x-lg',
+  // 'q-gutter-lg',
+  // 'q-gutter-y-lg',
+  // 'q-col-gutter-x-lg',
+  // 'q-col-gutter-lg',
+  // 'q-col-gutter-y-lg',
+  // 'q-gutter-x-xl',
+  // 'q-gutter-xl',
+  // 'q-gutter-y-xl',
+  // 'q-col-gutter-x-xl',
+  // 'q-col-gutter-xl',
+  // 'q-col-gutter-y-xl',
+  // 'rounded-borders',
+  // 'border-radius-inherit',
+  // 'no-transition',
+  // 'transition-0',
+  // 'glossy',
+  // 'q-placeholder',
+  // 'q-body--fullscreen-mixin',
+  // 'q-body--prevent-scroll',
+  // 'q-body--force-scrollbar-x',
+  // 'q-body--force-scrollbar-y',
+  // 'q-no-input-spinner',
+  // 'q-link',
+  // 'q-link--focusable',
+  // 'non-selectable',
+  // 'scroll',
+  // 'scroll-x',
+  // 'scroll-y',
+  // 'no-scroll',
+  // 'no-pointer-events',
+  // 'no-pointer-events--children',
+  // 'all-pointer-events',
+  // 'cursor-pointer',
+  // 'cursor-not-afllowed',
+  // 'cursor-inherit',
+  // 'cursor-none',
+  // 'rotate-45',
+  // 'rotate-90',
+  // 'rotate-135',
+  // 'rotate-180',
+  // 'rotate-225',
+  // 'rotate-270',
+  // 'rotate-315',
+  // 'flip-horizontal',
+  // 'flip-vertical',
+  // 'float-left',
+  // 'float-right',
+  // 'relative-position',
+  // 'fixed',
+  // 'fixed-full',
+  // 'fullscreen',
+  // 'fixed-center',
+  // 'fixed-bottom',
+  // 'fixed-left',
+  // 'fixed-right',
+  // 'fixed-top',
+  // 'fixed-top-left',
+  // 'fixed-top-right',
+  // 'fixed-bottom-left',
+  // 'fixed-bottom-right',
+  // 'absolute',
+  // 'absolute-full',
+  // 'absolute-center',
+  // 'absolute-bottom',
+  // 'absolute-left',
+  // 'absolute-right',
+  // 'absolute-top',
+  // 'absolute-top-left',
+  // 'absolute-top-right',
+  // 'absolute-bottom-left',
+  // 'absolute-bottom-right',
+  // 'vertical-top',
+  // 'vertical-middle',
+  // 'vertical-bottom',
+  // 'on-left',
+  // 'on-right',
+  // 'q-position-engine',
+  // 'fit',
+  // 'full-height',
+  // 'full-width',
+  // 'window-height',
+  // 'window-width',
+  // 'block',
+  // 'inline-block',
+  // 'q-touch',
+  // 'q-touch-x',
+  // 'q-touch-y',
+  // 'q-transition--slide-right-enter-active',
+  // 'q-transition--slide-right-leave-active',
+  // 'q-transition--slide-left-enter-active',
+  // 'q-transition--slide-left-leave-active',
+  // 'q-transition--slide-up-enter-active',
+  // 'q-transition--slide-up-leave-active',
+  // 'q-transition--slide-down-enter-active',
+  // 'q-transition--slide-down-leave-active',
+  // 'q-transition--jump-right-enter-active',
+  // 'q-transition--jump-right-leave-active',
+  // 'q-transition--jump-left-enter-active',
+  // 'q-transition--jump-left-leave-active',
+  // 'q-transition--jump-up-enter-active',
+  // 'q-transition--jump-up-leave-active',
+  // 'q-transition--jump-down-enter-active',
+  // 'q-transition--jump-down-leave-active',
+  // 'q-transition--fade-enter-active',
+  // 'q-transition--fade-leave-active',
+  // 'q-transition--scale-enter-active',
+  // 'q-transition--scale-leave-active',
+  // 'q-transition--rotate-enter-active',
+  // 'q-transition--rotate-leave-active',
+  // 'q-transition--flip-enter-active',
+  // 'q-transition--flip-leave-active',
+  // 'q-transition--slide-right-enter-from',
+  // 'q-transition--slide-right-leave-to',
+  // 'q-transition--slide-left-enter-from',
+  // 'q-transition--slide-left-leave-to',
+  // 'q-transition--slide-up-enter-from',
+  // 'q-transition--slide-up-leave-to',
+  // 'q-transition--slide-down-enter-from',
+  // 'q-transition--slide-down-leave-to',
+  // 'q-transition--jump-right-enter-from',
+  // 'q-transition--jump-right-leave-to',
+  // 'q-transition--jump-left-enter-from',
+  // 'q-transition--jump-left-leave-to',
+  // 'q-transition--jump-up-enter-from',
+  // 'q-transition--jump-up-leave-to',
+  // 'q-transition--jump-down-enter-from',
+  // 'q-transition--jump-down-leave-to',
+  // 'q-transition--fade-enter-from',
+  // 'q-transition--fade-leave-to',
+  // 'q-transition--scale-enter-from',
+  // 'q-transition--scale-leave-to',
+  // 'q-transition--rotate-enter-from',
+  // 'q-transition--rotate-leave-to',
+  // 'q-transition--flip-right-enter-active',
+  // 'q-transition--flip-right-leave-active',
+  // 'q-transition--flip-left-enter-active',
+  // 'q-transition--flip-left-leave-active',
+  // 'q-transition--flip-up-enter-active',
+  // 'q-transition--flip-up-leave-active',
+  // 'q-transition--flip-down-enter-active',
+  // 'q-transition--flip-down-leave-active',
+  // 'q-transition--flip-right-enter-to',
+  // 'q-transition--flip-right-leave-from',
+  // 'q-transition--flip-left-enter-to',
+  // 'q-transition--flip-left-leave-from',
+  // 'q-transition--flip-up-enter-to',
+  // 'q-transition--flip-up-leave-from',
+  // 'q-transition--flip-down-enter-to',
+  // 'q-transition--flip-down-leave-from',
+  // 'q-transition--flip-right-enter-from',
+  // 'q-transition--flip-right-leave-to',
+  // 'q-transition--flip-left-enter-from',
+  // 'q-transition--flip-left-leave-to',
+  // 'q-transition--flip-up-enter-from',
+  // 'q-transition--flip-up-leave-to',
+  // 'q-transition--flip-down-enter-from',
+  // 'q-transition--flip-down-leave-to',
+  // 'text-h1',
+  // 'text-h2',
+  // 'text-h3',
+  // 'text-h4',
+  // 'text-h5',
+  // 'text-h6',
+  // 'text-subtitle1',
+  // 'text-subtitle2',
+  // 'text-body1',
+  // 'text-body2',
+  // 'text-overline',
+  // 'text-caption',
+  // 'text-uppercase',
+  // 'text-lowercase',
+  // 'text-capitalize',
+  // 'text-center',
+  // 'text-left',
+  // 'text-right',
+  // 'text-justify',
+  // 'text-italic',
+  // 'text-bold',
+  // 'text-no-wrap',
+  // 'text-strike',
+  // 'text-weight-thin',
+  // 'text-weight-light',
+  // 'text-weight-regular',
+  // 'text-weight-medium',
+  // 'text-weight-bold',
+  // 'text-weight-bolder',
+  // 'no-margin',
+  // 'no-padding',
+  // 'no-border',
+  // 'no-border-radius',
+  // 'no-box-shadow',
+  // 'no-outline',
+  // 'ellipsis',
+  // 'ellipsis-2-lines',
+  // 'ellipsis-3-lines',
+  // 'readonly',
+  // 'disabled',
+  // 'hidden',
+  // 'invisible',
+  // 'transparent',
+  // 'overflow-auto',
+  // 'overflow-hidden',
+  // 'overflow-hidden-y',
+  // 'hide-scrollbar',
+  // 'dimmed',
+  // 'light-dimmed',
+  // 'z-top',
+  // 'z-max',
+  // 'q-focus-helper',
+  // 'q-focusable',
+  // 'q-manual-focusable',
+  // 'q-hoverable',
+  // 'q-dark'
 ]
 
 const qClasses = [
@@ -1420,7 +1509,13 @@ const qClasses = [
   'q-notification--bottom-right-leave-active'
 ]
 
-const generateSafelist = (plugins?: (keyof QuasarPlugins)[]) => {
+const generateSafelist = ({
+  plugins,
+  iconSet
+}: {
+  plugins?: (keyof QuasarPlugins)[]
+  iconSet?: QuasarIconSet
+}) => {
   let safelist = baseSafelist
   if (plugins) {
     for (const plugin of plugins) {
@@ -1428,14 +1523,18 @@ const generateSafelist = (plugins?: (keyof QuasarPlugins)[]) => {
       if (pluginSafelist) safelist = safelist.concat(pluginSafelist)
     }
   }
+  if (iconSet) {
+    const iconSetSafelist = extractKeys(iconSet)
+    if (iconSetSafelist) safelist = safelist.concat(iconSetSafelist)
+  }
   return safelist
 }
 
 export default definePreset((options: QuasarPresetOptions = {}) => {
   return {
     name: 'quasar',
-    presets: [presetUno(), animatedUno()],
-    safelist: generateSafelist(options?.plugins),
+    presets: [presetUno(), animatedUno(), presetIcons({})],
+    safelist: generateSafelist(options),
     preflights: (
       [
         {
@@ -1721,7 +1820,8 @@ export default definePreset((options: QuasarPresetOptions = {}) => {
       HelperPreflights,
       MousePreflights,
       TypographyPreflights,
-      VisibilityPreflights
+      VisibilityPreflights,
+      TransitionPreflights
     ),
     rules: ([] as Rule<QuasarTheme>[]).concat(
       HelperRules,
@@ -1818,7 +1918,8 @@ export default definePreset((options: QuasarPresetOptions = {}) => {
       VisibilityShortcuts,
       QHeaderShortcuts,
       QFooterShortcuts,
-      QDrawerShortcuts
+      QDrawerShortcuts,
+      ElevationShortcuts
     ),
     theme: defaultTheme,
     variants: [
@@ -1831,16 +1932,33 @@ export default definePreset((options: QuasarPresetOptions = {}) => {
         extract({ code }) {
           const kebabMatch = code.matchAll(/q-(\w)([\w-]*)/g)
           const pascalMatch = code.matchAll(/Q([A-Z][a-z0-9]+)+/g)
+          const transitionMatch = code.matchAll(
+            /(transition|transition-show|transition-hide)="(\S*)"/g
+          )
 
           const matches: string[] = []
           for (const match of kebabMatch) matches.push(match[0])
           for (const match of pascalMatch) {
             matches.push(toKebabCase(match[0]))
           }
+          const transitionClasses = []
+          for (const match of transitionMatch) {
+            transitionClasses.push(
+              ...[
+                'enter-from',
+                'enter-active',
+                'enter-to',
+                'leave-from',
+                'leave-active',
+                'leave-to'
+              ].map((v) => `q-transition--${match[2]}-${v}`)
+            )
+          }
 
           const classes = qClasses.filter((c) =>
             matches.some((component) => c.includes(component))
           )
+          classes.push(...transitionClasses)
           return classes
         }
       }
@@ -1854,7 +1972,7 @@ export default definePreset((options: QuasarPresetOptions = {}) => {
       //     return id.match(/quasar\/src\/.*\.js/)
       //   },
       //   async transform(code, id, { uno }) {
-      //     for (const c of safelist) {
+      //     for (const c of baseSafelist) {
       //       if (code.toString().includes(c)) console.log(c)
       //     }
       //     return code