docs: enable twoslash

docs/.vitepress/config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vitepress'
 import type { DefaultTheme } from 'vitepress/types'
+import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
 import { version } from '../../package.json'
 
 const ogUrl = 'https://unocss.dev/'
@@ -269,6 +270,11 @@ export default defineConfig({
       light: 'vitesse-light',
       dark: 'vitesse-dark',
     },
+    codeTransformers: [
+      transformerTwoslash({
+        processHoverInfo: info => info.replace(/_unocss_core\./g, ''),
+      }),
+    ],
   },
 
   themeConfig: {

docs/.vitepress/theme/index.ts

@@ -1,8 +1,11 @@
 // https://vitepress.dev/guide/custom-theme
 import { h, watch } from 'vue'
 import Theme from 'vitepress/theme'
+import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
 import UnoCSSLayout from './UnoCSSLayout.vue'
 
+import '@shikijs/vitepress-twoslash/style.css'
+
 import './rainbow.css'
 import './vars.css'
 import './overrides.css'
@@ -15,7 +18,9 @@ export default {
   Layout: () => {
     return h(UnoCSSLayout)
   },
-  enhanceApp({ router }) {
+  enhanceApp({ app, router }) {
+    app.use(TwoslashFloatingVue)
+
     if (typeof window === 'undefined')
       return
 

docs/guide/config-file.md

@@ -4,7 +4,7 @@ We **highly recommend to use a dedicated `uno.config.ts` file** to configure you
 
 A full featured config file looks like this:
 
-```ts
+```ts twoslash
 // uno.config.ts
 import {
   defineConfig,

docs/guide/presets.md

@@ -12,7 +12,7 @@ Presets are the heart of UnoCSS. They let you make your own custom framework in
 
 To set presets to your project:
 
-```ts
+```ts twoslash
 // uno.config.ts
 import { defineConfig, presetAttributify, presetUno } from 'unocss'
 
@@ -29,7 +29,7 @@ When the `presets` option is specified, the default preset will be ignored.
 
 To disable the default preset, you can set `presets` to an empty array:
 
-```ts
+```ts twoslash
 // uno.config.ts
 import { defineConfig } from 'unocss'
 

docs/package.json

@@ -17,6 +17,6 @@
     "@iconify-json/vscode-icons": "^1.1.33",
     "ofetch": "^1.3.3",
     "unocss": "workspace:*",
-    "vitepress": "1.0.0-rc.31"
+    "vitepress": "^1.0.0-rc.45"
   }
 }

package.json

@@ -45,6 +45,7 @@
     "@iconify-json/twemoji": "^1.1.15",
     "@iconify-json/uim": "^1.1.9",
     "@iconify/json": "^2.2.192",
+    "@shikijs/vitepress-twoslash": "^1.1.7",
     "@types/connect": "^3.4.38",
     "@types/css-tree": "^2.3.7",
     "@types/fs-extra": "^11.0.4",

packages/preset-attributify/src/index.ts

@@ -10,6 +10,25 @@ export * from './variant'
 export * from './types'
 export * from './jsx'
 
+/**
+ * This enables the attributify mode for other presets.
+ *
+ * @example
+ *
+ * ```html
+ * <button
+ *   bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
+ *   text="sm white"
+ *   font="mono light"
+ *   p="y-2 x-4"
+ *   border="2 rounded blue-200"
+ * >
+ *   Button
+ * </button>
+ * ```
+ *
+ * @see https://unocss.dev/presets/attributify
+ */
 export const presetAttributify = definePreset((options: AttributifyOptions = {}) => {
   options.strict = options.strict ?? false
   options.prefix = options.prefix ?? 'un-'

packages/preset-icons/src/index.ts

@@ -17,6 +17,19 @@ async function createNodeLoader() {
   catch { }
 }
 
+/**
+ * Use any icon with Pure CSS for UnoCSS.
+ *
+ * @example
+ *
+ * ```html
+ * <div class="i-mdi-alarm"></div>
+ * <div class="i-logos-vue text-3xl"></div>
+ * <button class="i-carbon-sun dark:i-carbon-moon"></div>
+ * ```
+ *
+ * @see https://unocss.dev/presets/icons
+ */
 export const presetIcons = /* @__PURE__ */ createPresetIcons(async (options) => {
   const {
     cdn,

packages/preset-mini/src/index.ts

@@ -72,6 +72,11 @@ export interface PresetMiniOptions extends PresetOptions {
   arbitraryVariants?: boolean
 }
 
+/**
+ * The basic preset for UnoCSS, with only the most essential utilities.
+ *
+ * @see https://unocss.dev/presets/mini
+ */
 export const presetMini = definePreset((options: PresetMiniOptions = {}) => {
   options.dark = options.dark ?? 'class'
   options.attributifyPseudo = options.attributifyPseudo ?? false

packages/preset-uno/src/index.ts

@@ -7,6 +7,11 @@ export type { Theme }
 
 export interface PresetUnoOptions extends PresetMiniOptions {}
 
+/**
+ * The defult UnoCSS preset, provide Tailwind-like utilities with some additional features.
+ *
+ * @see https://unocss.dev/presets/uno
+ */
 export const presetUno = definePreset((options: PresetUnoOptions = {}) => {
   const wind = presetWind(options)
   return {

packages/preset-web-fonts/src/index.ts

@@ -7,6 +7,12 @@ export { createGoogleCompatibleProvider as createGoogleProvider } from './provid
 
 const userAgentWoff2 = 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36'
 const defaultFetch = async (url: string) => (await import('ofetch')).$fetch(url, { headers: { 'User-Agent': userAgentWoff2 }, retry: 3 })
+
+/**
+ * Preset for using web fonts by provide just the names.
+ *
+ * @see https://unocss.dev/presets/web-fonts
+ */
 const presetWebFonts = definePreset(createWebFontPreset(defaultFetch))
 
 export default presetWebFonts

packages/preset-wind/src/index.ts

@@ -28,6 +28,11 @@ export interface PresetWindOptions extends PresetMiniOptions {
   important?: boolean | string
 }
 
+/**
+ * The Tailwind CSS / Windi CSS compact preset for UnoCSS.
+ *
+ * @see https://unocss.dev/presets/wind
+ */
 export const presetWind = definePreset((options: PresetWindOptions = {}) => {
   options.important = options.important ?? false
 

packages/shared-docs/src/search.ts

@@ -4,7 +4,7 @@ import { watchAtMost } from '@vueuse/core'
 import Fuse from 'fuse.js'
 import { createAutocomplete } from '@unocss/autocomplete'
 import type { Ref } from 'vue'
-import { computed, reactive, toRaw } from 'vue'
+import { computed, shallowReactive, toRaw } from 'vue'
 import type { DocItem, GuideItem, ResultItem, RuleItem } from './types'
 import { extractColors, formatCSS, sampleArray } from './utils'
 
@@ -19,8 +19,8 @@ export function createSearch(
   { uno, docs, guides, limit = 50 }: SearchState,
 ) {
   const ac = createAutocomplete(uno)
-  const matchedMap = reactive(new Map<string, RuleItem>())
-  const featuresMap = reactive(new Map<string, Set<RuleItem>>())
+  const matchedMap = shallowReactive(new Map<string, RuleItem>())
+  const featuresMap = shallowReactive(new Map<string, Set<RuleItem>>())
 
   let fuseCollection: ResultItem[] = []
 

packages/shared-integration/src/transformers.ts

@@ -2,7 +2,6 @@ import type { SourceCodeTransformerEnforce, UnocssPluginContext } from '@unocss/
 import MagicString from 'magic-string'
 import type { EncodedSourceMap } from '@ampproject/remapping'
 import remapping from '@ampproject/remapping'
-import type { SourceMap } from 'rollup'
 import { IGNORE_COMMENT, SKIP_COMMENT_RE } from './constants'
 import { hash } from './hash'
 
@@ -44,7 +43,7 @@ export async function applyTransformers(
     ctx.affectedModules.add(id)
     return {
       code,
-      map: remapping(maps, () => null) as SourceMap,
+      map: remapping(maps, () => null) as any,
     }
   }
 }

packages/unocss/src/index.ts

@@ -15,6 +15,9 @@ export { default as transformerVariantGroup } from '@unocss/transformer-variant-
 export { default as transformerCompileClass } from '@unocss/transformer-compile-class'
 export { default as transformerAttributifyJsx } from '@unocss/transformer-attributify-jsx'
 
+/**
+ * Define UnoCSS config
+ */
 export function defineConfig<T extends object = Theme>(config: UserConfig<T>) {
   return config
 }