diff --git a/package.json b/package.json
index 33ce0f4e10..57f57c7374 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,10 @@
   "devDependencies": {
     "@antfu/eslint-config": "^0.34.0",
     "@antfu/ni": "^0.18.8",
+    "@codemirror/lang-css": "^6.0.1",
+    "@codemirror/lang-html": "^6.4.1",
+    "@codemirror/lang-javascript": "^6.1.2",
+    "@codemirror/lang-xml": "^6.0.2",
     "@iconify-json/carbon": "^1.1.13",
     "@iconify-json/iconoir": "^1.1.17",
     "@iconify-json/la": "^1.1.3",
@@ -37,7 +41,6 @@
     "@iconify-json/twemoji": "^1.1.9",
     "@iconify-json/uim": "^1.1.3",
     "@iconify/json": "^2.2.3",
-    "@types/codemirror": "^5.60.6",
     "@types/connect": "^3.4.35",
     "@types/css-tree": "^2.0.1",
     "@types/fs-extra": "^9.0.13",
@@ -73,7 +76,7 @@
     "@vueuse/math": "^9.10.0",
     "brotli-size": "^4.0.0",
     "bumpp": "^8.2.1",
-    "codemirror": "^5.65.9",
+    "codemirror": "^6.0.1",
     "codemirror-theme-vars": "^0.1.1",
     "eslint": "8.31.0",
     "esno": "^0.16.3",
diff --git a/packages/inspector/client/components/CodeMirror.vue b/packages/inspector/client/components/CodeMirror.vue
index 54dc21895c..8393efc2dd 100644
--- a/packages/inspector/client/components/CodeMirror.vue
+++ b/packages/inspector/client/components/CodeMirror.vue
@@ -1,76 +1,46 @@
 <script setup lang="ts">
-import type { AsyncHintFunction, HintFunction, HintFunctionResolver } from 'codemirror'
 import { getMatchedPositions } from '@unocss/shared-common'
-import { useCodeMirror } from '../composables/codemirror'
+import { Decoration } from '@codemirror/view'
+import { useEventListener, useThrottleFn } from '@vueuse/core'
+import type { CompletionSource } from '@codemirror/autocomplete'
+import { addMarks, filterMarks, useCodeMirror } from '../composables/codemirror'
 
 const props = defineProps<{
   modelValue: string
   mode?: string
   readOnly?: boolean
   matched?: Set<string> | string[]
-  getHint?: HintFunction | AsyncHintFunction | HintFunctionResolver
+  getHint?: CompletionSource
 }>()
 
 const emit = defineEmits<{ (e: 'update:modelValue', payload: string): void }>()
-const modeMap: Record<string, any> = {
-  html: 'htmlmixed',
-  vue: 'htmlmixed',
-  svelte: 'htmlmixed',
-  js: 'javascript',
-  mjs: 'javascript',
-  cjs: 'javascript',
-  ts: { name: 'javascript', typescript: true },
-  mts: { name: 'javascript', typescript: true },
-  cts: { name: 'javascript', typescript: true },
-  jsx: { name: 'javascript', jsx: true },
-  tsx: { name: 'javascript', typescript: true, jsx: true },
-}
 
-const el = ref<HTMLTextAreaElement>()
+const el = ref<HTMLElement>()
 const input = useVModel(props, 'modelValue', emit, { passive: true })
 
-const mode = computed(() => modeMap[props.mode || ''] || props.mode)
-const extraKeys = computed(() => (props.getHint
-  ? {
-      'Ctrl-Space': 'autocomplete',
-      'Ctrl-.': 'autocomplete',
-      'Cmd-Space': 'autocomplete',
-      'Cmd-.': 'autocomplete',
-      'Tab': 'autocomplete',
-    }
-  : {}) as CodeMirror.KeyMap)
-const hintOptions = computed(() => props.getHint ? { hint: props.getHint } : {})
-
 onMounted(async () => {
   const cm = useCodeMirror(el, input, reactive({
+    autocomplete: props.getHint,
     ...toRefs(props),
-    mode,
-    hintOptions,
-    extraKeys,
   }))
-  cm.setSize('100%', '100%')
-
-  if (props.getHint) {
-    cm.on('keyup', (editor, event) => {
-      if (event.key.match(/^[\w:-]$/))
-        editor.execCommand('autocomplete')
-    })
-  }
 
-  setTimeout(() => cm.refresh(), 100)
-  const decorations: CodeMirror.TextMarker<CodeMirror.MarkerRange>[] = []
+  useEventListener(cm.contentDOM.parentElement, 'scroll', useThrottleFn(() => {
+    cm.requestMeasure()
+  }, 50, true))
 
   function mark(start: number, end: number) {
-    decorations.push(cm.markText(
-      cm.posFromIndex(start),
-      cm.posFromIndex(end),
-      { className: 'highlighted' },
-    ))
+    const strikeMark = Decoration.mark({
+      class: 'highlighted',
+    })
+    cm.dispatch({
+      effects: addMarks.of([strikeMark.range(start, end)]),
+    })
   }
 
   function highlight() {
-    // clear previous
-    decorations.forEach(i => i.clear())
+    cm.dispatch({
+      effects: filterMarks.of((from: number, to: number) => to <= 0 || from >= cm.state.doc.toString().length),
+    })
     getMatchedPositions(props.modelValue, Array.from(props.matched || []), true)
       .forEach(i => mark(i[0], i[1]))
   }
@@ -86,23 +56,32 @@ onMounted(async () => {
 
 <template>
   <div
+    ref="el"
     relative
     font-mono
     text-sm
-  >
-    <textarea ref="el" />
-  </div>
+    data-enable-grammarly="false"
+    h-full
+  />
 </template>
 
 <style>
-.CodeMirror {
+#gtx-trans,
+grammarly-extension,
+deepl-inline-translate,
+grammarly-popups,
+deepl-inline-popup,
+grammarly-desktop-integration {
+    display: none!important;
+}
+
+.cm-editor {
   height: 100% !important;
   width: 100% !important;
   font-family: inherit;
 }
-
-.cm-s-vars .cm-tag {
-  color: var(--cm-keyword);
+.cm-content {
+  cursor: text !important;
 }
 
 :root {
@@ -111,21 +90,16 @@ onMounted(async () => {
   --cm-background: #fdfdfd;
   --cm-comment: #a0ada0;
   --cm-string: #b56959;
-  --cm-literal: #2f8a89;
   --cm-number: #296aa3;
+  --cm-variable: #59873a;
   --cm-keyword: #1c6b48;
-  --cm-function: #6c7834;
-  --cm-boolean: #1c6b48;
-  --cm-constant: #a65e2b;
-  --cm-deleted: #a14f55;
-  --cm-class: #2993a3;
-  --cm-builtin: #ab5959;
   --cm-property: #b58451;
-  --cm-namespace: #b05a78;
+  --cm-definition-keyword: #ab5959;
   --cm-punctuation: #8e8f8b;
-  --cm-decorator: #bd8f8f;
-  --cm-regex: #ab5e3f;
-  --cm-json-property: #698c96;
+  --cm-decorator: #b07d48;
+  --cm-line-highlight-background: #c9c9c910;
+  --cm-line-highlight-border: #b0b0b030;
+  --cm-selection-background: #eeeeee;
   /* scrollbars colors */
   --cm-ttc-c-thumb: #eee;
   --cm-ttc-c-track: white;
@@ -134,42 +108,35 @@ onMounted(async () => {
 html.dark {
   --cm-scheme: dark;
   --cm-foreground: #d4cfbf80;
-  --cm-background: #111;
+  --cm-background: #121212;
   --cm-comment: #758575;
   --cm-string: #d48372;
-  --cm-literal: #429988;
   --cm-keyword: #4d9375;
-  --cm-boolean: #1c6b48;
   --cm-number: #6394bf;
   --cm-variable: #c2b36e;
-  --cm-function: #a1b567;
-  --cm-deleted: #a14f55;
-  --cm-class: #54b1bf;
-  --cm-builtin: #e0a569;
   --cm-property: #dd8e6e;
-  --cm-namespace: #db889a;
+  --cm-definition-keyword: #cb7676;
   --cm-punctuation: #858585;
-  --cm-decorator: #bd8f8f;
-  --cm-regex: #ab5e3f;
-  --cm-json-property: #6b8b9e;
-  --cm-line-number: #888888;
+  --cm-decorator: #bd976a;
+  --cm-line-number: #dedcd530;
   --cm-line-number-gutter: #eeeeee;
-  --cm-line-highlight-background: #444444;
-  --cm-selection-background: #44444450;
+  --cm-line-highlight-background: #4d4d4d29;
+  --cm-line-highlight-border: #3a3a3a80;
+  --cm-selection-background: #242424;
   /* scrollbars colors */
   --cm-ttc-c-thumb: #222;
   --cm-ttc-c-track: #111;
 }
 
-.highlighted {
+.highlighted, .highlighted > span {
   border-bottom: 1px dashed currentColor;
 }
-.CodeMirror-scroll::-webkit-scrollbar,
-.scrolls::-webkit-scrollbar {
+.cm-scroller::-webkit-scrollbar {
   width: 8px;
   height: 8px;
 }
-.full-scrolls .CodeMirror .CodeMirror-scroll,
+
+.full-scrolls .cm-scroller,
 .scrolls {
   overflow: auto !important;
   height: calc(100vh - 2px) !important;
@@ -179,42 +146,28 @@ html.dark {
 .scrolls-sidebar {
   height: calc(100vh - 25px - 1.5rem - 65px - 1rem - 2px) !important;
 }
-.overview-scrolls .CodeMirror .CodeMirror-scroll {
+.overview-scrolls .cm-scroller {
   --use-overview-scrolls: var(--overview-scrolls, calc(100vh - 116px - 1rem - 61px - 1rem - 2px));
   height: var(--use-overview-scrolls) !important;
 }
-.module-scrolls .CodeMirror .CodeMirror-scroll {
+.module-scrolls .cm-scroller {
   --use-module-scrolls: var(--module-scrolls, calc(100vh - 41px - 2.5rem));
   height: var(--use-module-scrolls) !important;
 }
-.rpel-scrolls .CodeMirror .CodeMirror-scroll {
-  --use-rpel-scrolls: var(--rpel-scrolls, calc(100vh - 41px - 2.5rem));
-  height: var(--use-rpel-scrolls) !important;
+.repl-scrolls .cm-scroller {
+  --use-repl-scrolls: var(--repl-scrolls, calc(100vh - 41px - 2.5rem));
+  height: var(--use-repl-scrolls) !important;
 }
-.CodeMirror-scroll::-webkit-scrollbar-track,
-.scrolls::-webkit-scrollbar-track {
+
+.cm-scroller::-webkit-scrollbar-track {
   background: var(--cm-ttc-c-track);
 }
-.CodeMirror-scroll::-webkit-scrollbar-thumb,
-.scrolls::-webkit-scrollbar-thumb {
+.cm-scroller::-webkit-scrollbar-thumb {
   background-color: var(--cm-ttc-c-thumb);
   border-radius: 3px;
   border: 2px solid var(--cm-ttc-c-thumb);
 }
-.CodeMirror-scroll::-webkit-scrollbar-corner,
-.scrolls::-webkit-scrollbar-corner {
+.cm-scroller::-webkit-scrollbar-corner {
   background-color: var(--cm-ttc-c-track);
 }
-.CodeMirror {
-  overflow: unset !important;
-}
-.CodeMirror-vscrollbar,
-.CodeMirror-hscrollbar {
-  display: none !important;
-}
-.CodeMirror-scroll {
-  margin-bottom: unset !important;
-  margin-right: unset !important;
-  padding-bottom: unset !important;
-}
 </style>
diff --git a/packages/inspector/client/components/Overview.vue b/packages/inspector/client/components/Overview.vue
index 4e979b6aa5..bcd6d567b8 100644
--- a/packages/inspector/client/components/Overview.vue
+++ b/packages/inspector/client/components/Overview.vue
@@ -97,7 +97,7 @@ const formatted = useCSSPrettify(computed(() => overview.value?.css), isPrettify
       :model-value="formatted"
       :read-only="true"
       mode="css"
-      class="scrolls overview-scrolls"
+      class="overview-scrolls"
       :style="style"
     />
   </div>
diff --git a/packages/inspector/client/components/ReplPlayground.vue b/packages/inspector/client/components/ReplPlayground.vue
index e661e7ea93..a21c195ec3 100644
--- a/packages/inspector/client/components/ReplPlayground.vue
+++ b/packages/inspector/client/components/ReplPlayground.vue
@@ -3,7 +3,7 @@ import { fetchRepl } from '../composables/fetch'
 import { useScrollStyle } from '../composables/useScrollStyle'
 
 const status = ref(null)
-const style = useScrollStyle(status, 'rpel-scrolls')
+const style = useScrollStyle(status, 'repl-scrolls')
 
 const input = useLocalStorage(
   'unocss:inspector:repl',
@@ -16,26 +16,28 @@ const { data: result } = fetchRepl(input, isSafelistIncluded)
 
 <template>
   <div h-full grid="~ rows-[max-content_1fr]" of-hidden>
-    <StatusBar ref="status">
-      <div>
-        REPL Playground
-      </div>
-      <div op60>
-        Edit your code below to test and play UnoCSS's matching and generating.
-      </div>
-    </StatusBar>
-    <TitleBar border="b gray-400/20" title="">
-      <label>
-        <input v-model="isSafelistIncluded" type="checkbox">
-        Include safelist
-      </label>
-    </TitleBar>
+    <div ref="status">
+      <StatusBar>
+        <div>
+          REPL Playground
+        </div>
+        <div op60>
+          Edit your code below to test and play UnoCSS's matching and generating.
+        </div>
+      </StatusBar>
+      <TitleBar border="b gray-400/20" title="">
+        <label>
+          <input v-model="isSafelistIncluded" type="checkbox">
+          Include safelist
+        </label>
+      </TitleBar>
+    </div>
     <div h-full of-hidden grid grid-cols-2>
       <CodeMirror
         v-model="input"
         mode="html"
         :matched="result?.matched || []"
-        class="scrolls rpel-scrolls"
+        class="scrolls repl-scrolls"
         :style="style"
       />
       <CodeMirror
@@ -44,7 +46,7 @@ const { data: result } = fetchRepl(input, isSafelistIncluded)
         :model-value="result?.css || '/* empty */'"
         :read-only="true"
         mode="css"
-        class="scrolls rpel-scrolls"
+        class="scrolls repl-scrolls"
         :style="style"
       />
     </div>
diff --git a/packages/inspector/client/composables/codemirror.ts b/packages/inspector/client/composables/codemirror.ts
index 5f6a2955fc..128e0e206c 100644
--- a/packages/inspector/client/composables/codemirror.ts
+++ b/packages/inspector/client/composables/codemirror.ts
@@ -1,56 +1,126 @@
 import type { Ref, WritableComputedRef } from 'vue'
-import { watch } from 'vue'
-import CodeMirror from 'codemirror'
-import 'codemirror/mode/javascript/javascript'
-import 'codemirror/mode/css/css'
-import 'codemirror/mode/xml/xml'
-import 'codemirror/mode/htmlmixed/htmlmixed'
-import 'codemirror/mode/jsx/jsx'
-import 'codemirror/addon/display/placeholder'
-import 'codemirror/addon/hint/show-hint'
-import 'codemirror/lib/codemirror.css'
-import 'codemirror-theme-vars/base.css'
-import 'codemirror/addon/hint/show-hint.css'
+import { computed, unref, watch } from 'vue'
+import { Decoration, keymap } from '@codemirror/view'
+import type { EditorViewConfig } from '@codemirror/view'
+import type { Extension } from '@codemirror/state'
+import { EditorSelection, EditorState, StateEffect, StateField } from '@codemirror/state'
+import { EditorView, basicSetup } from 'codemirror'
+import { javascript } from '@codemirror/lang-javascript'
+import { css } from '@codemirror/lang-css'
+import { xml } from '@codemirror/lang-xml'
+import { htmlLanguage } from '@codemirror/lang-html'
+import type { CompletionSource } from '@codemirror/autocomplete'
+import { acceptCompletion, completionKeymap } from '@codemirror/autocomplete'
 import type { MaybeRef } from '@vueuse/core'
+import { vitesse } from '../theme'
+
+// Effects can be attached to transactions to communicate with the extension
+export const addMarks = StateEffect.define<any>()
+export const filterMarks = StateEffect.define<any>()
+// This value must be added to the set of extensions to enable this
+const markField = StateField.define({
+  // Start with an empty set of decorations
+  create() { return Decoration.none },
+  // This is called whenever the editor updates—it computes the new set
+  update(value, tr) {
+    // Move the decorations to account for document changes
+    value = value.map(tr.changes)
+    // If this transaction adds or removes decorations, apply those changes
+    for (const effect of tr.effects) {
+      if (effect.is(addMarks))
+        value = value.update({ add: effect.value, sort: true })
+      // @ts-expect-error any
+      else if (effect.is(filterMarks))
+        // @ts-expect-error any
+        value = value.update({ filter: effect.value })
+    }
+    return value
+  },
+  // Indicate that this field provides a set of decorations
+  provide: f => EditorView.decorations.from(f),
+})
+
+const langExtensions: Record<string, () => {}> = {
+  xml,
+  css,
+  html: () => htmlLanguage.extension,
+  vue: () => htmlLanguage.extension,
+  svelte: () => htmlLanguage.extension,
+  js: javascript,
+  mjs: javascript,
+  cjs: javascript,
+  ts: () => javascript({ typescript: true }),
+  mts: () => javascript({ typescript: true }),
+  cts: () => javascript({ typescript: true }),
+  jsx: () => javascript({ jsx: true }),
+  tsx: () => javascript({ typescript: true, jsx: true }),
+}
 
 export function useCodeMirror(
-  textarea: Ref<HTMLTextAreaElement | null | undefined>,
+  parent: Ref<HTMLElement | null | undefined>,
   input: Ref<string> | WritableComputedRef<string>,
-  options: MaybeRef<CodeMirror.EditorConfiguration> = {},
+  options: MaybeRef<EditorViewConfig & { readOnly?: boolean; mode?: string; autocomplete?: CompletionSource }> = {},
 ) {
-  const cm = CodeMirror.fromTextArea(
-    textarea.value!,
+  const keymaps = [...completionKeymap]
+  keymaps.push({ key: 'Tab', run: acceptCompletion })
+  const extensions = computed(() => {
+    const { mode = 'html', readOnly, autocomplete } = unref(options)
+    return [
+      basicSetup,
+      vitesse,
+      markField,
+      langExtensions[mode](),
+      mode === 'html' && autocomplete && htmlLanguage.data.of({ autocomplete }),
+      readOnly && EditorState.readOnly.of(true),
+      keymap.of(keymaps),
+    ].filter(Boolean) as Extension[]
+  })
+  let skip = false
+  const cm = new EditorView(
     {
-      theme: 'vars',
+      parent: parent.value as Element,
+      doc: input.value,
+      extensions: extensions.value,
+      dispatch(tr) {
+        cm.update([tr])
+        const selection = cm.state.selection.main
+        if (selection.from !== selection.to) {
+          cm.contentDOM.style.setProperty('--cm-line-highlight-background', 'transparent')
+          cm.contentDOM.style.setProperty('--cm-line-highlight-border', 'transparent')
+        }
+        else {
+          cm.contentDOM.style.removeProperty('--cm-line-highlight-background')
+          cm.contentDOM.style.removeProperty('--cm-line-highlight-border')
+        }
+
+        if (tr.docChanged) {
+          if (skip) {
+            skip = false
+            return
+          }
+          input.value = cm.state.doc.toString()
+        }
+      },
       ...unref(options),
     },
   )
 
-  watch(
-    options,
-    options => Object
-      .entries(options)
-      .forEach(([key, option]) => cm.setOption(key as keyof CodeMirror.EditorConfiguration, option)),
-  )
-
-  let skip = false
-
-  cm.on('change', () => {
-    if (skip) {
-      skip = false
-      return
-    }
-    input.value = cm.getValue()
+  watch(options, () => {
+    cm.dispatch({
+      effects: StateEffect.reconfigure.of(extensions.value),
+    })
   })
 
   watch(
     input,
     (v) => {
-      if (v !== cm.getValue()) {
+      if (v !== cm.state.doc.toString()) {
         skip = true
-        const selections = cm.listSelections()
-        cm.replaceRange(v, cm.posFromIndex(0), cm.posFromIndex(Infinity))
-        cm.setSelections(selections)
+        const selections = cm.state.selection.ranges
+        cm.dispatch({
+          changes: { from: 0, to: cm.state.doc.length, insert: v },
+          selection: EditorSelection.create(selections),
+        })
       }
     },
     { immediate: true },
diff --git a/packages/inspector/client/theme.ts b/packages/inspector/client/theme.ts
new file mode 100644
index 0000000000..4d80e0c54e
--- /dev/null
+++ b/packages/inspector/client/theme.ts
@@ -0,0 +1,185 @@
+import { EditorView } from '@codemirror/view'
+import type { Extension } from '@codemirror/state'
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
+import { tags as t } from '@lezer/highlight'
+
+const keyword = 'var(--cm-keyword)'
+const property = 'var(--cm-property)'
+const punctuation = 'var(--cm-punctuation)'
+const invalid = '#ffffff'
+const foreground = 'var(--cm-foreground)'
+const lineNumber = 'var(--cm-line-number)'
+const comment = 'var(--cm-comment)'
+const variable = 'var(--cm-variable)'
+const string = 'var(--cm-string)'
+const darkBackground = 'var(--cm-background)'
+const highlightBackground = 'var(--cm-line-highlight-background)'
+const background = 'var(--cm-background)'
+const tooltipBackground = '#242222'
+const selection = 'var(--cm-selection-background)'
+const cursor = '#888'
+
+export const vitesseTheme = EditorView.theme({
+  '&': {
+    color: foreground,
+    backgroundColor: background,
+  },
+  '& div': {
+    flexDirection: 'initial',
+  },
+
+  '&.cm-focused': {
+    outline: 'none',
+  },
+
+  '.cm-content': {
+    caretColor: cursor,
+  },
+
+  '.cm-completionIcon': {
+    display: 'none',
+  },
+
+  '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
+  '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': { backgroundColor: selection },
+
+  '.cm-panels': { backgroundColor: darkBackground, color: foreground },
+  '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
+  '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
+
+  '.cm-searchMatch': {
+    backgroundColor: '#72a1ff59',
+    outline: '1px solid #457dff',
+  },
+  '.cm-searchMatch.cm-searchMatch-selected': {
+    backgroundColor: '#6199ff2f',
+  },
+
+  '.cm-line': { border: '1px solid transparent' },
+  '.cm-activeLine': { backgroundColor: highlightBackground, border: '1px solid var(--cm-line-highlight-border)' },
+  '.cm-selectionMatch': { backgroundColor: '#aafe661a' },
+
+  '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
+    backgroundColor: 'transparent',
+  },
+
+  '.cm-gutters': {
+    backgroundColor: background,
+    color: lineNumber,
+    border: 'none',
+  },
+
+  '.cm-activeLineGutter': {
+    backgroundColor: 'transparent',
+    color: '#bfbaaa',
+  },
+
+  '.cm-foldPlaceholder': {
+    backgroundColor: 'transparent',
+    border: 'none',
+    color: '#ddd',
+  },
+
+  '.cm-tooltip': {
+    border: 'none',
+    backgroundColor: tooltipBackground,
+    color: '#c2beb3',
+  },
+  '.cm-tooltip .cm-tooltip-arrow:before': {
+    borderTopColor: 'transparent',
+    borderBottomColor: 'transparent',
+  },
+  '.cm-tooltip .cm-tooltip-arrow:after': {
+    borderTopColor: tooltipBackground,
+    borderBottomColor: tooltipBackground,
+  },
+  '.cm-tooltip-autocomplete': {
+    '& > ul > li[aria-selected]': {
+      backgroundColor: '#ffffff14',
+      color: '#c2beb3',
+    },
+  },
+}, { dark: true })
+
+export const vitesseHighlightStyle = HighlightStyle.define([
+  {
+    tag: [t.variableName, t.regexp],
+    color: 'var(--cm-decorator)',
+  },
+  {
+    tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
+    color: property,
+  },
+  {
+    tag: [t.function(t.variableName), t.labelName],
+    color: variable,
+  },
+  {
+    tag: [t.color, t.constant(t.name), t.standard(t.name)],
+    color: '#c99076',
+  },
+  {
+    tag: [t.definition(t.name), t.separator],
+    color: foreground,
+  },
+  {
+    tag: [t.angleBracket],
+    color: '#666666',
+  },
+  {
+    tag: [t.brace],
+    color: '#5eaab5',
+  },
+  {
+    tag: [t.bracket],
+    color: '#4d9375',
+  },
+  {
+    tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace, t.keyword, t.atom, t.bool, t.special(t.variableName)],
+    color: keyword,
+  },
+  {
+    tag: [t.definitionKeyword],
+    color: 'var(--cm-definition-keyword)',
+  },
+  {
+    tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.link, t.special(t.string)],
+    color: punctuation,
+  },
+  {
+    tag: [t.meta, t.comment],
+    color: comment,
+  },
+  {
+    tag: t.strong,
+    fontWeight: 'bold',
+  },
+  {
+    tag: t.emphasis,
+    fontStyle: 'italic',
+  },
+  {
+    tag: t.strikethrough,
+    textDecoration: 'line-through',
+  },
+  {
+    tag: t.link,
+    color: lineNumber,
+    textDecoration: 'underline',
+  },
+  {
+    tag: t.heading,
+    fontWeight: 'bold',
+    color: property,
+  },
+  {
+    tag: [t.processingInstruction, t.string, t.inserted],
+    color: string,
+  },
+  {
+    tag: t.invalid,
+    color: invalid,
+  },
+])
+
+export const vitesse: Extension = [vitesseTheme, syntaxHighlighting(vitesseHighlightStyle)]
diff --git a/playground/src/components/Editor.vue b/playground/src/components/Editor.vue
index 54a1479f65..33d6374293 100644
--- a/playground/src/components/Editor.vue
+++ b/playground/src/components/Editor.vue
@@ -52,15 +52,8 @@ function handleReset() {
   }
 }
 
-const handleEditorResize = useThrottleFn(() => {
-  // manually refresh when resizing, ensure content display completely
-  Array.from(document.querySelectorAll('.CodeMirror') ?? []).forEach((el) => {
-    (el as any).CodeMirror?.refresh()
-  })
-}, 200)
 function handleResize(event: ({ size: number })[]) {
   panelSizes.value = event.map(({ size }) => size)
-  handleEditorResize()
 }
 function isCollapsed(index: number) {
   return panelSizes.value[index] <= titleHeightPercent.value + 3
@@ -217,7 +210,7 @@ onMounted(() => {
       </div>
       <CodeMirror
         flex-auto
-        mode="htmlmixed"
+        mode="html"
         class="scrolls border-(l gray-400/20)"
         :matched="output?.matched || new Set()"
         :get-hint="getHint"
@@ -254,7 +247,7 @@ onMounted(() => {
       <CodeMirror
         v-model="customConfigRaw"
         flex-auto
-        mode="javascript"
+        mode="js"
         border="l gray-400/20"
         class="scrolls"
       />
diff --git a/playground/src/logics/uno.ts b/playground/src/logics/uno.ts
index 7f4e87a783..75d2e57eec 100644
--- a/playground/src/logics/uno.ts
+++ b/playground/src/logics/uno.ts
@@ -1,11 +1,10 @@
-/// <reference types="codemirror/addon/hint/show-hint" />
 import type { GenerateResult, UserConfig } from 'unocss'
 import { createGenerator } from 'unocss'
-import type { Editor, Hints } from 'codemirror'
 import { createAutocomplete } from '@unocss/autocomplete'
 import MagicString from 'magic-string'
 import type { UnocssPluginContext } from '@unocss/core'
 import { evaluateUserConfig } from '@unocss/shared-docs'
+import type { CompletionContext, CompletionResult } from '@codemirror/autocomplete'
 import { customConfigRaw, inputHTML } from './url'
 import { defaultConfig } from './config'
 
@@ -59,24 +58,21 @@ export async function generate() {
   init.value = true
 }
 
-export async function getHint(cm: Editor): Promise<Hints | undefined> {
-  const cursor = cm.indexFromPos(cm.getCursor())
-
-  const result = await autocomplete.suggestInFile(cm.getDoc().getValue(), cursor)
+export async function getHint(context: CompletionContext): Promise<CompletionResult | null> {
+  const cursor = context.pos
+  const result = await autocomplete.suggestInFile(context.state.doc.toString(), cursor)
 
   if (!result.suggestions?.length)
-    return
+    return null
 
+  const resolved = result.resolveReplacement(result.suggestions[0][0])
   return {
-    from: cm.posFromIndex(cursor),
-    to: cm.posFromIndex(cursor),
-    list: result.suggestions.map(([value, label]) => {
-      const resolved = result.resolveReplacement(value)
+    from: resolved.start,
+    options: result.suggestions.map(([, label]) => {
       return ({
-        text: resolved.replacement,
-        displayText: label,
-        from: cm.posFromIndex(resolved.start),
-        to: cm.posFromIndex(resolved.end),
+        label,
+        type: 'text',
+        boost: 99,
       })
     }),
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6737b50d0d..aefbd49e67 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,6 +10,10 @@ importers:
     specifiers:
       '@antfu/eslint-config': ^0.34.0
       '@antfu/ni': ^0.18.8
+      '@codemirror/lang-css': ^6.0.1
+      '@codemirror/lang-html': ^6.4.1
+      '@codemirror/lang-javascript': ^6.1.2
+      '@codemirror/lang-xml': ^6.0.2
       '@iconify-json/carbon': ^1.1.13
       '@iconify-json/iconoir': ^1.1.17
       '@iconify-json/la': ^1.1.3
@@ -22,7 +26,6 @@ importers:
       '@iconify-json/twemoji': ^1.1.9
       '@iconify-json/uim': ^1.1.3
       '@iconify/json': ^2.2.3
-      '@types/codemirror': ^5.60.6
       '@types/connect': ^3.4.35
       '@types/css-tree': ^2.0.1
       '@types/fs-extra': ^9.0.13
@@ -58,7 +61,7 @@ importers:
       '@vueuse/math': ^9.10.0
       brotli-size: ^4.0.0
       bumpp: ^8.2.1
-      codemirror: ^5.65.9
+      codemirror: ^6.0.1
       codemirror-theme-vars: ^0.1.1
       eslint: 8.31.0
       esno: ^0.16.3
@@ -96,6 +99,10 @@ importers:
     devDependencies:
       '@antfu/eslint-config': 0.34.0_iukboom6ndih5an6iafl45j2fe
       '@antfu/ni': 0.18.8
+      '@codemirror/lang-css': 6.0.1_nzpoxphwgc7witc3f5hdaoweju
+      '@codemirror/lang-html': 6.4.1
+      '@codemirror/lang-javascript': 6.1.2
+      '@codemirror/lang-xml': 6.0.2_@codemirror+view@6.7.3
       '@iconify-json/carbon': 1.1.13
       '@iconify-json/iconoir': 1.1.17
       '@iconify-json/la': 1.1.3
@@ -108,7 +115,6 @@ importers:
       '@iconify-json/twemoji': 1.1.9
       '@iconify-json/uim': 1.1.3
       '@iconify/json': 2.2.3
-      '@types/codemirror': 5.60.6
       '@types/connect': 3.4.35
       '@types/css-tree': 2.0.1
       '@types/fs-extra': 9.0.13
@@ -144,7 +150,7 @@ importers:
       '@vueuse/math': 9.10.0_vue@3.2.40
       brotli-size: 4.0.0
       bumpp: 8.2.1
-      codemirror: 5.65.9
+      codemirror: 6.0.1_@lezer+common@1.0.2
       codemirror-theme-vars: 0.1.1
       eslint: 8.31.0
       esno: 0.16.3
@@ -160,7 +166,7 @@ importers:
       nuxt-tsconfig-stub: 0.0.2
       pnpm: 7.22.0
       prettier: 2.8.1
-      prettier-plugin-svelte: 2.9.0_sro2v6ld777payjtkjtiuogcxi
+      prettier-plugin-svelte: 2.9.0_4h247imu46srxjbpsfob5j3nnq
       react: 18.2.0
       rollup: 3.7.2
       semver: 7.3.8
@@ -274,7 +280,7 @@ importers:
       markdown-it-link-attributes: 4.0.1
       nuxt: 3.0.0_rollup@2.79.1
       p-limit: 4.0.0
-      postcss-nested: 6.0.0_postcss@8.4.20
+      postcss-nested: 6.0.0_postcss@8.4.21
       prettier: 2.8.1
       shiki: 0.12.1
       theme-vitesse: 0.6.0
@@ -2295,6 +2301,118 @@ packages:
       mime: 3.0.0
     dev: true
 
+  /@codemirror/autocomplete/6.4.0_3jfk5zzaw77h3sqp5wt6b7asku:
+    resolution: {integrity: sha512-HLF2PnZAm1s4kGs30EiqKMgD7XsYaQ0XJnMR0rofEWQ5t5D60SfqpDIkIh1ze5tiEbyUWm8+VJ6W1/erVvBMIA==}
+    peerDependencies:
+      '@codemirror/language': ^6.0.0
+      '@codemirror/state': ^6.0.0
+      '@codemirror/view': ^6.0.0
+      '@lezer/common': ^1.0.0
+    dependencies:
+      '@codemirror/language': 6.4.0
+      '@codemirror/state': 6.2.0
+      '@codemirror/view': 6.7.3
+      '@lezer/common': 1.0.2
+    dev: true
+
+  /@codemirror/commands/6.2.0:
+    resolution: {integrity: sha512-+00smmZBradoGFEkRjliN7BjqPh/Hx0KCHWOEibUmflUqZz2RwBTU0MrVovEEHozhx3AUSGcO/rl3/5f9e9Biw==}
+    dependencies:
+      '@codemirror/language': 6.4.0
+      '@codemirror/state': 6.2.0
+      '@codemirror/view': 6.7.3
+      '@lezer/common': 1.0.2
+    dev: true
+
+  /@codemirror/lang-css/6.0.1_nzpoxphwgc7witc3f5hdaoweju:
+    resolution: {integrity: sha512-rlLq1Dt0WJl+2epLQeAsfqIsx3lGu4HStHCJu95nGGuz2P2fNugbU3dQYafr2VRjM4eMC9HviI6jvS98CNtG5w==}
+    dependencies:
+      '@codemirror/autocomplete': 6.4.0_3jfk5zzaw77h3sqp5wt6b7asku
+      '@codemirror/language': 6.4.0
+      '@codemirror/state': 6.2.0
+      '@lezer/css': 1.1.1
+    transitivePeerDependencies:
+      - '@codemirror/view'
+      - '@lezer/common'
+    dev: true
+
+  /@codemirror/lang-html/6.4.1:
+    resolution: {integrity: sha512-9NzhWKAkWEwjXC04DKM6yrHnxIPFTqZNLDhWfZiKLMxUiU++XoHz9n6D5EPp1igBmX0vXcpFb5Kud6XzIJhZ4A==}
+    dependencies:
+      '@codemirror/autocomplete': 6.4.0_3jfk5zzaw77h3sqp5wt6b7asku
+      '@codemirror/lang-css': 6.0.1_nzpoxphwgc7witc3f5hdaoweju
+      '@codemirror/lang-javascript': 6.1.2
+      '@codemirror/language': 6.4.0
+      '@codemirror/state': 6.2.0
+      '@codemirror/view': 6.7.3
+      '@lezer/common': 1.0.2
+      '@lezer/css': 1.1.1
+      '@lezer/html': 1.3.0
+    dev: true
+
+  /@codemirror/lang-javascript/6.1.2:
+    resolution: {integrity: sha512-OcwLfZXdQ1OHrLiIcKCn7MqZ7nx205CMKlhe+vL88pe2ymhT9+2P+QhwkYGxMICj8TDHyp8HFKVwpiisUT7iEQ==}
+    dependencies:
+      '@codemirror/autocomplete': 6.4.0_3jfk5zzaw77h3sqp5wt6b7asku
+      '@codemirror/language': 6.4.0
+      '@codemirror/lint': 6.1.0
+      '@codemirror/state': 6.2.0
+      '@codemirror/view': 6.7.3
+      '@lezer/common': 1.0.2
+      '@lezer/javascript': 1.4.1
+    dev: true
+
+  /@codemirror/lang-xml/6.0.2_@codemirror+view@6.7.3:
+    resolution: {integrity: sha512-JQYZjHL2LAfpiZI2/qZ/qzDuSqmGKMwyApYmEUUCTxLM4MWS7sATUEfIguZQr9Zjx/7gcdnewb039smF6nC2zw==}
+    dependencies:
+      '@codemirror/autocomplete': 6.4.0_3jfk5zzaw77h3sqp5wt6b7asku
+      '@codemirror/language': 6.4.0
+      '@codemirror/state': 6.2.0
+      '@lezer/common': 1.0.2
+      '@lezer/xml': 1.0.1
+    transitivePeerDependencies:
+      - '@codemirror/view'
+    dev: true
+
+  /@codemirror/language/6.4.0:
+    resolution: {integrity: sha512-Wzb7GnNj8vnEtbPWiOy9H0m1fBtE28kepQNGLXekU2EEZv43BF865VKITUn+NoV8OpW6gRtvm29YEhqm46927Q==}
+    dependencies:
+      '@codemirror/state': 6.2.0
+      '@codemirror/view': 6.7.3
+      '@lezer/common': 1.0.2
+      '@lezer/highlight': 1.1.3
+      '@lezer/lr': 1.3.1
+      style-mod: 4.0.0
+    dev: true
+
+  /@codemirror/lint/6.1.0:
+    resolution: {integrity: sha512-mdvDQrjRmYPvQ3WrzF6Ewaao+NWERYtpthJvoQ3tK3t/44Ynhk8ZGjTSL9jMEv8CgSMogmt75X8ceOZRDSXHtQ==}
+    dependencies:
+      '@codemirror/state': 6.2.0
+      '@codemirror/view': 6.7.3
+      crelt: 1.0.5
+    dev: true
+
+  /@codemirror/search/6.2.3:
+    resolution: {integrity: sha512-V9n9233lopQhB1dyjsBK2Wc1i+8hcCqxl1wQ46c5HWWLePoe4FluV3TGHoZ04rBRlGjNyz9DTmpJErig8UE4jw==}
+    dependencies:
+      '@codemirror/state': 6.2.0
+      '@codemirror/view': 6.7.3
+      crelt: 1.0.5
+    dev: true
+
+  /@codemirror/state/6.2.0:
+    resolution: {integrity: sha512-69QXtcrsc3RYtOtd+GsvczJ319udtBf1PTrr2KbLWM/e2CXUPnh0Nz9AUo8WfhSQ7GeL8dPVNUmhQVgpmuaNGA==}
+    dev: true
+
+  /@codemirror/view/6.7.3:
+    resolution: {integrity: sha512-Lt+4POnhXrZFfHOdPzXEHxrzwdy7cjqYlMkOWvoFGi6/bAsjzlFfr0NY3B15B/PGx+cDFgM1hlc12wvYeZbGLw==}
+    dependencies:
+      '@codemirror/state': 6.2.0
+      style-mod: 4.0.0
+      w3c-keyname: 2.2.6
+    dev: true
+
   /@csstools/normalize.css/12.0.0:
     resolution: {integrity: sha512-M0qqxAcwCsIVfpFQSlGN5XjXWu8l5JDZN+fPt1LeW5SZexQTgnaEvgXAY+CeygRw0EeppWHi12JxESWiWrB0Sg==}
     dev: true
@@ -2843,6 +2961,51 @@ packages:
     resolution: {integrity: sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==}
     dev: true
 
+  /@lezer/common/1.0.2:
+    resolution: {integrity: sha512-SVgiGtMnMnW3ActR8SXgsDhw7a0w0ChHSYAyAUxxrOiJ1OqYWEKk/xJd84tTSPo1mo6DXLObAJALNnd0Hrv7Ng==}
+    dev: true
+
+  /@lezer/css/1.1.1:
+    resolution: {integrity: sha512-mSjx+unLLapEqdOYDejnGBokB5+AiJKZVclmud0MKQOKx3DLJ5b5VTCstgDDknR6iIV4gVrN6euzsCnj0A2gQA==}
+    dependencies:
+      '@lezer/highlight': 1.1.3
+      '@lezer/lr': 1.3.1
+    dev: true
+
+  /@lezer/highlight/1.1.3:
+    resolution: {integrity: sha512-3vLKLPThO4td43lYRBygmMY18JN3CPh9w+XS2j8WC30vR4yZeFG4z1iFe4jXE43NtGqe//zHW5q8ENLlHvz9gw==}
+    dependencies:
+      '@lezer/common': 1.0.2
+    dev: true
+
+  /@lezer/html/1.3.0:
+    resolution: {integrity: sha512-jU/ah8DEoiECLTMouU/X/ujIg6k9WQMIOFMaCLebzaXfrguyGaR3DpTgmk0tbljiuIJ7hlmVJPcJcxGzmCd0Mg==}
+    dependencies:
+      '@lezer/common': 1.0.2
+      '@lezer/highlight': 1.1.3
+      '@lezer/lr': 1.3.1
+    dev: true
+
+  /@lezer/javascript/1.4.1:
+    resolution: {integrity: sha512-Hqx36DJeYhKtdpc7wBYPR0XF56ZzIp0IkMO/zNNj80xcaFOV4Oj/P7TQc/8k2TxNhzl7tV5tXS8ZOCPbT4L3nA==}
+    dependencies:
+      '@lezer/highlight': 1.1.3
+      '@lezer/lr': 1.3.1
+    dev: true
+
+  /@lezer/lr/1.3.1:
+    resolution: {integrity: sha512-+GymJB/+3gThkk2zHwseaJTI5oa4AuOuj1I2LCslAVq1dFZLSX8SAe4ZlJq1TjezteDXtF/+d4qeWz9JvnrG9Q==}
+    dependencies:
+      '@lezer/common': 1.0.2
+    dev: true
+
+  /@lezer/xml/1.0.1:
+    resolution: {integrity: sha512-jMDXrV953sDAUEMI25VNrI9dz94Ai96FfeglytFINhhwQ867HKlCE2jt3AwZTCT7M528WxdDWv/Ty8e9wizwmQ==}
+    dependencies:
+      '@lezer/highlight': 1.1.3
+      '@lezer/lr': 1.3.1
+    dev: true
+
   /@ljharb/has-package-exports-patterns/0.0.2:
     resolution: {integrity: sha512-4/RWEeXDO6bocPONheFe6gX/oQdP/bEpv0oL4HqjPP5DCenBSt0mHgahppY49N0CpsaqffdwPq+TlX9CYOq2Dw==}
     dev: true
@@ -3639,12 +3802,6 @@ packages:
     resolution: {integrity: sha512-KnRanxnpfpjUTqTCXslZSEdLfXExwgNxYPdiO2WGUj8+HDjFi8R3k5RVKPeSCzLjCcshCAtVO2QBbVuAV4kTnw==}
     dev: true
 
-  /@types/codemirror/5.60.6:
-    resolution: {integrity: sha512-JIDPSvkYRlcv/2F0erqD+de2ni/Mz6FJMEGb0vwF6ByQOcHIKfiEfwrO4d6dSRwYeHyNUMpGjev0PyjX2M0XWw==}
-    dependencies:
-      '@types/tern': 0.23.4
-    dev: true
-
   /@types/connect-history-api-fallback/1.3.5:
     resolution: {integrity: sha512-h8QJa8xSb1WD4fpKBDcATDNGXghFj6/3GRWG6dhmRcu0RX1Ubasur2Uvx5aeEwlf0MwblEC2bMzzMQntxnw/Cw==}
     dependencies:
@@ -3939,12 +4096,6 @@ packages:
     resolution: {integrity: sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==}
     dev: true
 
-  /@types/tern/0.23.4:
-    resolution: {integrity: sha512-JAUw1iXGO1qaWwEOzxTKJZ/5JxVeON9kvGZ/osgZaJImBnyjyn0cjovPsf6FNLmyGY8Vw9DoXZCMlfMkMwHRWg==}
-    dependencies:
-      '@types/estree': 1.0.0
-    dev: true
-
   /@types/uglify-js/3.17.0:
     resolution: {integrity: sha512-3HO6rm0y+/cqvOyA8xcYLweF0TKXlAxmQASjbOi49Co51A1N4nR4bEwBgRoD9kNM+rqFGArjKr654SLp2CoGmQ==}
     dependencies:
@@ -7264,8 +7415,18 @@ packages:
     resolution: {integrity: sha512-Au0Ysn6tUMZB/1Jd5S8g4Or1kZxTuTnNx6MVs9H46Ad7w8IEjkHusH+4oyia/FBcVuAJO4DIlkDnPM8Qnnf1rg==}
     dev: true
 
-  /codemirror/5.65.9:
-    resolution: {integrity: sha512-19Jox5sAKpusTDgqgKB5dawPpQcY+ipQK7xoEI+MVucEF9qqFaXpeqY1KaoyGBso/wHQoDa4HMMxMjdsS3Zzzw==}
+  /codemirror/6.0.1_@lezer+common@1.0.2:
+    resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}
+    dependencies:
+      '@codemirror/autocomplete': 6.4.0_3jfk5zzaw77h3sqp5wt6b7asku
+      '@codemirror/commands': 6.2.0
+      '@codemirror/language': 6.4.0
+      '@codemirror/lint': 6.1.0
+      '@codemirror/search': 6.2.3
+      '@codemirror/state': 6.2.0
+      '@codemirror/view': 6.7.3
+    transitivePeerDependencies:
+      - '@lezer/common'
     dev: true
 
   /collection-visit/1.0.0:
@@ -7811,6 +7972,10 @@ packages:
   /create-require/1.1.1:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
 
+  /crelt/1.0.5:
+    resolution: {integrity: sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==}
+    dev: true
+
   /cross-spawn/6.0.5:
     resolution: {integrity: sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==}
     engines: {node: '>=4.8'}
@@ -15801,6 +15966,16 @@ packages:
       postcss-selector-parser: 6.0.10
     dev: true
 
+  /postcss-nested/6.0.0_postcss@8.4.21:
+    resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+    dependencies:
+      postcss: 8.4.21
+      postcss-selector-parser: 6.0.10
+    dev: true
+
   /postcss-normalize-charset/4.0.1:
     resolution: {integrity: sha512-gMXCrrlWh6G27U0hF3vNvR3w8I1s2wOBILvA87iNXaPvSNo5uZAMYsZG7XjCUf1eVxuPfyL4TJ7++SGZLc9A3g==}
     engines: {node: '>=6.9.0'}
@@ -16149,6 +16324,15 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
+  /postcss/8.4.21:
+    resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.4
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+    dev: true
+
   /preferred-pm/3.0.3:
     resolution: {integrity: sha512-+wZgbxNES/KlJs9q40F/1sfOd/j7f1O9JaHcW5Dsn3aUUOZg3L2bjpVUcKV2jvtElYfoTuQiNeMfQJ4kwUAhCQ==}
     engines: {node: '>=10'}
@@ -16179,14 +16363,14 @@ packages:
       synckit: 0.8.4
     dev: true
 
-  /prettier-plugin-svelte/2.9.0_sro2v6ld777payjtkjtiuogcxi:
+  /prettier-plugin-svelte/2.9.0_4h247imu46srxjbpsfob5j3nnq:
     resolution: {integrity: sha512-3doBi5NO4IVgaNPtwewvrgPpqAcvNv0NwJNflr76PIGgi9nf1oguQV1Hpdm9TI2ALIQVn/9iIwLpBO5UcD2Jiw==}
     peerDependencies:
       prettier: ^1.16.4 || ^2.0.0
       svelte: ^3.2.0
     dependencies:
       prettier: 2.8.1
-      svelte: 3.54.0
+      svelte: 3.55.1
     dev: true
 
   /prettier/2.8.1:
@@ -18052,6 +18236,10 @@ packages:
     dependencies:
       acorn: 8.8.1
 
+  /style-mod/4.0.0:
+    resolution: {integrity: sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw==}
+    dev: true
+
   /style-to-object/0.3.0:
     resolution: {integrity: sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==}
     dependencies:
@@ -18146,8 +18334,8 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /svelte/3.54.0:
-    resolution: {integrity: sha512-tdrgeJU0hob0ZWAMoKXkhcxXA7dpTg6lZGxUeko5YqvPdJBiyRspGsCwV27kIrbrqPP2WUoSV9ca0gnLlw8YzQ==}
+  /svelte/3.55.1:
+    resolution: {integrity: sha512-S+87/P0Ve67HxKkEV23iCdAh/SX1xiSfjF1HOglno/YTbSTW7RniICMCofWGdJJbdjw3S+0PfFb1JtGfTXE0oQ==}
     engines: {node: '>= 8'}
     dev: true
 
@@ -20245,6 +20433,10 @@ packages:
       '@vue/shared': 3.2.45
     dev: true
 
+  /w3c-keyname/2.2.6:
+    resolution: {integrity: sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg==}
+    dev: true
+
   /watchpack-chokidar2/2.0.1:
     resolution: {integrity: sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==}
     requiresBuild: true