feat(autocomplete): add template for magic animate

packages/core/src/core/autocomplete.ts

@@ -0,0 +1,13 @@
+import type { UserConfig } from '@unocss/core';
+import { magicAnimate } from './theme/magic-animate';
+
+const keyframes = magicAnimate()?.keyframes ?? {};
+
+export const autocomplete: UserConfig['autocomplete'] = {
+  shorthands: {
+    magic: '(' + Object.keys(keyframes).join('|') + ')',
+  },
+  templates: [
+    'animate-<magic>',
+  ]
+}

packages/core/src/core/index.ts

@@ -4,3 +4,4 @@ export * from './rules'
 export * from './shortcuts'
 export * from './theme'
 export * from './variants'
+export * from './autocomplete'

packages/core/src/index.ts

@@ -1,7 +1,7 @@
 import type { Postprocessor, PresetFactory } from 'unocss'
 import { definePreset } from '@unocss/core'
 import { PRESET_NAME } from './meta'
-import { extractors, rules, shortcuts, variants } from './core'
+import { extractors, rules, shortcuts, variants, autocomplete } from './core'
 import { importantProcess, postprocessWithUnColor } from './core/postprocess'
 import type { UsefulOptions, UsefulTheme } from './types'
 import { resolveOptions } from './resolve'
@@ -28,6 +28,7 @@ export const presetUseful = definePreset((options: UsefulOptions = {}) => {
       important ? importantProcess() : undefined,
     ].filter(Boolean) as Postprocessor[],
     presets: meta.presets,
+    autocomplete,
   }
 }) as PresetFactory<UsefulTheme, UsefulOptions>