chore: wip

glennmichael123 · glennmichael123 · commit 880497927b71 · 2025-12-10T18:02:16.000+08:00
diff --git a/README.md b/README.md
@@ -268,7 +268,7 @@ _Develop dynamic UIs with helpers for atomic design, and much more._
 - 🖥️ **Desktop** _transforms your web app into a desktop app, plus more_
 - 📝 **Documentation** _markdown-based documentation, auto-generated_
 - 📚 **Library** _auto-builds & manages component & function libraries_
-- ⚡️ Powered by Bun, Tauri, UnoCSS, Vite, VitePress and Vue
+- ⚡️ Powered by Bun, Tauri, Headwind, Vite, VitePress and Vue
 
 ### Backend Development
 
diff --git a/config/lint.ts b/config/lint.ts
@@ -14,7 +14,6 @@ export default config({
   vue: false,
   jsonc: true,
   yaml: true,
-  unocss: true,
 
   ignores: [
     '**/fixtures',
diff --git a/docs/index.md b/docs/index.md
@@ -63,7 +63,7 @@ features:
     details: “An approachable, performant and versatile framework for building web UIs,” Vue.
   - title: Atomic CSS Engine
     icon: 🎨
-    details: “Instant on-demand atomic CSS engine,” UnoCSS. Easily create & manage your styles.
+    details: "Blazingly fast utility-first CSS framework," Headwind. Easily create & manage your styles.
   - title: Streamlined Testing
     icon: 🧪
     details: A fast built-in testing framework. Enjoyable support for both unit & feature tests.
diff --git a/headwind.config.ts b/headwind.config.ts
@@ -0,0 +1,11 @@
+import type { HeadwindOptions } from 'headwind'
+
+export default {
+  content: [
+    './resources/**/*.{html,js,ts,jsx,tsx,stx}',
+    './storage/framework/defaults/**/*.{html,js,ts,jsx,tsx,stx}',
+    './storage/framework/views/**/*.{html,js,ts,jsx,tsx,stx}',
+  ],
+  output: './storage/framework/assets/headwind.css',
+  minify: false,
+} satisfies HeadwindOptions
diff --git a/package.json b/package.json
@@ -58,6 +58,7 @@
     "@stacksjs/clarity": "^0.3.24",
     "@stacksjs/stx": "link:@stacksjs/stx",
     "bun-plugin-stx": "link:bun-plugin-stx",
+    "headwind": "link:headwind",
     "stacks": "workspace:*"
   },
   "workspaces": [
diff --git a/storage/framework/core/README.md b/storage/framework/core/README.md
@@ -258,7 +258,7 @@ _Develop dynamic UIs with helpers for atomic design, and much more._
 - 🖥️ **Desktop** _transforms your web app into a desktop app, plus more_
 - 📝 **Documentation** _markdown-based documentation, auto-generated_
 - 📚 **Library** _auto-builds & manages component & function libraries_
-- ⚡️ Powered by Bun, Tauri, UnoCSS, Vite, VitePress and Vue
+- ⚡️ Powered by Bun, Tauri, Headwind, Vite, VitePress and Vue
 
 ### Backend Development
 
diff --git a/storage/framework/core/buddy/README.md b/storage/framework/core/buddy/README.md
@@ -258,7 +258,7 @@ _Develop dynamic UIs with helpers for atomic design, and much more._
 - 🖥️ **Desktop** _transforms your web app into a desktop app, plus more_
 - 📝 **Documentation** _markdown-based documentation, auto-generated_
 - 📚 **Library** _auto-builds & manages component & function libraries_
-- ⚡️ Powered by Bun, Tauri, UnoCSS, Vite, VitePress and Vue
+- ⚡️ Powered by Bun, Tauri, Headwind, Vite, VitePress and Vue
 
 ### Backend Development
 
diff --git a/storage/framework/core/docs/package.json b/storage/framework/core/docs/package.json
@@ -39,7 +39,7 @@
     "@shikijs/vitepress-twoslash": "^3.12.2",
     "@vite-pwa/assets-generator": "^1.0.0",
     "@vite-pwa/vitepress": "^1.0.0",
-    "unocss": "^66.4.2",
+    "headwind": "link:headwind",
     "unplugin-icons": "^22.2.0",
     "unplugin-vue-components": "^28.8.0",
     "vite-plugin-pwa": "^1.0.3",
diff --git a/storage/framework/core/types/build.ts b/storage/framework/core/types/build.ts
@@ -12,7 +12,7 @@ const result = await Bun.build({
   target: 'bun',
   // sourcemap: 'linked',
   minify: true,
-  external: ['@stacksjs/validation', 'consola', 'unocss', '@unocss/core'],
+  external: ['@stacksjs/validation', 'consola', 'headwind'],
   plugins: [
     dts({
       root: '.',
diff --git a/storage/framework/core/types/src/ui.ts b/storage/framework/core/types/src/ui.ts
@@ -1,10 +1,9 @@
-import type { UserConfig } from '@unocss/core'
-import type { UserShortcuts } from 'unocss'
+import type { HeadwindOptions } from 'headwind'
 
 export type Font = 'inter' | 'mona' | 'hubot'
 export type Icon = 'heroicons' | 'hugeicons'
 export type WebFontsProviders = 'google' | 'bunny' | 'fontshare'
-export type Shortcuts = UserShortcuts
+export type Shortcuts = HeadwindOptions['shortcuts']
 
 export interface FontInfo {
   title: string
@@ -119,7 +118,7 @@ export interface UiOptions {
    * reset styles are utilized. You may set this value to `null`
    * if you prefer not applying any default stylesheets.
    *
-   * @url https://www.npmjs.com/package/@unocss/reset
+   * @url https://github.com/stacksjs/headwind
    * @todo preset needs to be added via a Vite plugin on development & build
    * @example
    * ```ts
@@ -163,11 +162,10 @@ export interface UiOptions {
   icons: Icon | Icon[]
   // icons: Record<string, () => Promise<any>>
 
-  theme: UserConfig['theme']
-  // plugins: UserConfig['plugins']
-  // corePlugins: UserConfig['corePlugins']
-  variants: UserConfig['variants']
-  layers: UserConfig['layers']
+  theme: HeadwindOptions['theme']
+  // plugins: HeadwindOptions['plugins']
+  // corePlugins: HeadwindOptions['corePlugins']
+  variants: HeadwindOptions['variants']
   // darkMode: UserConfig['darkMode']
   // extend: UserConfig['extend']
   // screens: UserConfig['screens']
diff --git a/storage/framework/core/ui/README.md b/storage/framework/core/ui/README.md
@@ -5,7 +5,7 @@ This package contains the Stacks UI engine.
 ## ☘️ Features
 
 - 🍀 **Vue-powered** _extendable & native access to the ecosystem_
-- 🎨 **Style with ease** _via an atomic CSS engine, powered by UnoCSS_
+- 🎨 **Style with ease** _via a blazingly fast utility-first CSS framework, powered by Headwind_
 - 🍍 **Simple data storage** _accessed via an intuitive API_
 - Written in modern ESM/TypeScript
 
@@ -54,7 +54,7 @@ For casual chit-chat with others using this package:
 Many thanks to the following core technologies & people who have contributed to this package:
 
 - [Vue](https://vuejs.org)
-- [UnoCSS](https://github.com/unocss/unocss)
+- [Headwind](https://github.com/stacksjs/headwind)
 - [Pinia](https://pinia.vuejs.org)
 - [Chris Breuer](https://github.com/chrisbbreuer)
 - [All Contributors](../../contributors)
diff --git a/storage/framework/core/ui/package.json b/storage/framework/core/ui/package.json
@@ -26,8 +26,7 @@
     "styles",
     "stacks",
     "headwind",
-    "tailwind",
-    "unocss"
+    "tailwind"
   ],
   "sideEffects": false,
   "exports": {
@@ -57,7 +56,7 @@
     "@stacksjs/build": "workspace:*",
     "@stacksjs/config": "workspace:*",
     "@stacksjs/development": "workspace:*",
-    "@stacksjs/headwind": "^0.1.3",
-    "@stacksjs/router": "workspace:*"
+    "@stacksjs/router": "workspace:*",
+    "headwind": "link:headwind"
   }
 }
diff --git a/storage/framework/core/utils/src/helpers.ts b/storage/framework/core/utils/src/helpers.ts
@@ -70,28 +70,15 @@ export async function isAppKeySet(): Promise<boolean> {
 /**
  * Determines the utilized reset preset.
  *
- * @url https://www.npmjs.com/package/@unocss/reset
+ * @url https://github.com/stacksjs/headwind
  * @param preset
  */
 export function determineResetPreset(preset?: string): string[] {
   if (ui.reset)
     preset = ui.reset
 
-  if (preset === 'tailwind')
-    return ['import \'@unocss/reset/tailwind.css\'']
-
-  if (preset === 'normalize')
-    return ['import \'@unocss/reset/normalize.css\'']
-
-  if (preset === 'sanitize')
-    return ['import \'@unocss/reset/sanitize/sanitize.css\'', 'import \'@unocss/reset/sanitize/assets.css']
-
-  if (preset === 'eric-meyer')
-    return ['import \'@unocss/reset/eric-meyer.css\'']
-
-  if (preset === 'antfu')
-    return ['import \'@unocss/reset/antfu.css\'']
-
+  // Headwind handles CSS resets internally via preflight
+  // Return empty array as headwind build generates the necessary resets
   return []
 }
 
diff --git a/storage/framework/core/x-ray/src/desktop/main.ts b/storage/framework/core/x-ray/src/desktop/main.ts
@@ -1,6 +1,5 @@
 import { createApp } from 'vue'
-import App from './App.vue'
-import '@unocss/reset/tailwind.css'
+import App from './App.stx'
 
 // import { unifiedApp } from './plugins/unified/unified-app'
 const app = createApp(App)
diff --git a/storage/framework/defaults/ide/cursor/rules/readme.mdc b/storage/framework/defaults/ide/cursor/rules/readme.mdc
@@ -253,7 +253,7 @@ _Develop dynamic UIs with helpers for atomic design, and much more._
 - 🖥️ **Desktop** _transforms your web app into a desktop app, plus more_
 - 📝 **Documentation** _markdown-based documentation, auto-generated_
 - 📚 **Library** _auto-builds & manages component & function libraries_
-- ⚡️ Powered by Bun, Tauri, UnoCSS, Vite, VitePress and Vue
+- ⚡️ Powered by Bun, Tauri, Headwind, Vite, VitePress and Vue
 
 ### Backend Development
 
diff --git a/storage/framework/defaults/ide/dictionary.txt b/storage/framework/defaults/ide/dictionary.txt
@@ -144,6 +144,7 @@ gstatic
 gupshup
 gzipped
 headlessui
+headwind
 heex
 heroicon
 heroicons
@@ -353,7 +354,6 @@ unhead
 unimport
 universalify
 unmanaged
-unocss
 unplugin
 Unprefix
 Unprefixed
diff --git a/storage/framework/defaults/ide/vscode/.vscode/settings.json b/storage/framework/defaults/ide/vscode/.vscode/settings.json
@@ -86,7 +86,6 @@
   },
   // TypeScript
   "typescript.tsdk": "${workspaceFolder}/node_modules/typescript/lib",
-  "unocss.root": "${workspaceFolder}/storage/framework/core/ui/src/uno.config.ts",
   // Shell
   "[shellscript]": {
     "editor.defaultFormatter": "foxundermoon.shell-format"
diff --git a/storage/framework/defaults/ide/vscode/README.md b/storage/framework/defaults/ide/vscode/README.md
@@ -9,7 +9,7 @@ _Please note, the Stacks framework auto-configures any extension that needs to b
 - [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) - Language support
 - [ESlint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - Linting & formatting
 - [markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint) - Markdown linting
-- [UnoCSS](https://marketplace.visualstudio.com/items?itemName=antfu.unocss) - Atomic CSS framework support
+- [Headwind](https://github.com/stacksjs/headwind) - Blazingly fast utility-first CSS framework
 - [Goto Definition Alias](https://marketplace.visualstudio.com/items?itemName=antfu.goto-definition-alias) - Allows jumping to the definition of an aliased import
 - [NPM Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense) - auto-completes npm modules in import statements
 - [Jumpy](https://marketplace.visualstudio.com/items?itemName=wmaurer.vscode-jumpy) - We lose a lot of time scanning with a mouse, time we can get back by using our keyboard instead. Jumpy provides fast cursor movement by giving you a couple of keys that offer a hook to get to another part of the document.
diff --git a/storage/framework/defaults/ide/vscode/package.json b/storage/framework/defaults/ide/vscode/package.json
@@ -41,7 +41,6 @@
   "extensionPack": [
     "dotenv.dotenvx-vscode",
     "amazonwebservices.aws-toolkit-vscode",
-    "antfu.unocss",
     "antfu.goto-alias",
     "dbaeumer.vscode-eslint",
     "christian-kohler.npm-intellisense",
diff --git a/storage/framework/docs/.vitepress/unocss.config.ts b/storage/framework/docs/.vitepress/unocss.config.ts
diff --git a/storage/framework/docs/.vitepress/vite.config.ts b/storage/framework/docs/.vitepress/vite.config.ts
@@ -3,7 +3,6 @@ import { resolve } from 'node:path'
 import { alias } from '@stacksjs/alias'
 import { path } from '@stacksjs/path'
 // Removed server import from @stacksjs/server
-import UnoCSS from 'unocss/vite'
 import IconsResolver from 'unplugin-icons/resolver'
 import Icons from 'unplugin-icons/vite'
 import Components from 'unplugin-vue-components/vite'
@@ -60,8 +59,6 @@ export default defineConfig({
       defaultStyle: 'display: inline-block',
     }),
 
-    UnoCSS(resolve(__dirname, 'unocss.config.ts')),
-
     // Inspect(),
   ],
 
diff --git a/storage/framework/libs/components/vue/main.ts b/storage/framework/libs/components/vue/main.ts
@@ -1,8 +1,6 @@
 import { createApp } from 'vue'
 // import Previewer from 'virtual:vue-component-preview'
-import Demo from '../../../../../resources/components/Playground.vue'
-
-import 'unocss'
+import Demo from '../../../../../resources/components/Playground.stx'
 
 // prepare the messages object from the yaml language files
 // const messages = Object.fromEntries(
diff --git a/storage/framework/views/dashboard/src/main.ts b/storage/framework/views/dashboard/src/main.ts
@@ -2,9 +2,7 @@ import { createPinia } from 'pinia'
 import { setupLayouts } from 'virtual:generated-layouts'
 import { ViteSSG } from 'vite-ssg'
 import { routes } from 'vue-router/auto-routes'
-import App from './App.vue'
-import '@unocss/reset/tailwind.css'
-import 'uno.css'
+import App from './App.stx'
 import './styles/main.css'
 
 const pinia = createPinia()
diff --git a/storage/framework/views/desktop/src/main.ts b/storage/framework/views/desktop/src/main.ts
@@ -2,9 +2,7 @@ import { createPinia } from 'pinia'
 import { setupLayouts } from 'virtual:generated-layouts'
 import { ViteSSG } from 'vite-ssg'
 import { routes } from 'vue-router/auto-routes'
-import App from './App.vue'
-import '@unocss/reset/tailwind.css'
-import 'unocss'
+import App from './App.stx'
 import '../../../../../resources/assets/styles/main.css'
 
 const pinia = createPinia()
diff --git a/storage/framework/views/web/src/main.ts b/storage/framework/views/web/src/main.ts
@@ -4,9 +4,7 @@ import type { UserModule } from './types'
 import { setupLayouts } from 'virtual:generated-layouts'
 import { ViteSSG } from 'vite-ssg'
 import { routes } from 'vue-router/auto-routes'
-import App from './App.vue'
-import '@unocss/reset/tailwind.css'
-import 'unocss'
+import App from './App.stx'
 import '../../../../../resources/assets/styles/main.css'
 
 export const createApp = ViteSSG(
