unocss

.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Local Netlify folder
+.netlify

formkit.config.fkLibrary.ts

@@ -0,0 +1,25 @@
+import {
+  checkbox,
+  form,
+  group,
+  list,
+  number,
+  range,
+  submit,
+  text,
+  textarea,
+} from "@formkit/inputs";
+
+// https://unocss.dev/presets/wind#differences-from-tailwind-css
+
+export const fkLibrary = {
+  text,
+  form,
+  submit,
+  group,
+  checkbox,
+  range,
+  list,
+  number,
+  textarea,
+};

formkit.config.theme.ts

@@ -10,7 +10,7 @@ import type { FormKitNode } from '@formkit/core'
   * @theme - regenesis
   **/
 
- /**
+/**
  * This is the theme function itself, it should be imported and used as the
  * config.rootClasses function. For example:
  *
@@ -25,12 +25,24 @@ import type { FormKitNode } from '@formkit/core'
  * })
  * ```
  **/
- export function rootClasses (sectionName: string, node: FormKitNode): Record<string, boolean> {
+export function rootClasses(sectionName: string, node: FormKitNode): Record<string, boolean> {
+
   const key = `${node.props.type}__${sectionName}`
   const semanticKey = `formkit-${sectionName}`
   const familyKey = node.props.family ? `family:${node.props.family}__${sectionName}` : ''
   const memoKey = `${key}__${familyKey}`
   if (!(memoKey in classes)) {
+    setTimeout(() => {
+      // console.group(`rootClasses(${sectionName}) ${memoKey}`)
+      // console.debug(`key :>> `, key);
+      // console.debug(`semanticKey :>> `, semanticKey);
+      // console.debug(`familyKey :>> `, familyKey);
+      // console.debug(`memoKey :>> `, memoKey);
+      // console.debug(`classes[key] :>> `, classes[key]);
+      // console.debug(`globals[sectionName] :>> `, globals[sectionName]);
+      // console.groupEnd()
+    }, 1000);
+
     const sectionClasses = classes[key] ?? globals[sectionName] ?? {}
     sectionClasses[semanticKey] = true
     if (familyKey in classes) {
@@ -40,13 +52,13 @@ import type { FormKitNode } from '@formkit/core'
     }
   }
   return classes[memoKey] ?? { [semanticKey]: true }
- }
+}
 
 /**
  * These classes have already been merged with globals using tailwind-merge
  * and are ready to be used directly in the theme.
  **/
-const classes: Record<string, Record<string, boolean>> = {
+export const classes: Record<string, Record<string, boolean>> = {
   "family:button__wrapper": {
     "group-data-[disabled=true]:grayscale": true
   },
@@ -3288,7 +3300,7 @@ const classes: Record<string, Record<string, boolean>> = {
  * Globals are merged prior to generating this file — these are included for
  * any other non-matching inputs.
  **/
-const globals: Record<string, Record<string, boolean>> = {
+export const globals: Record<string, Record<string, boolean>> = {
   "outer": {
     "group": true,
     "max-w-[20em]": true,

formkit.config.ts

@@ -2,21 +2,17 @@ import { createAutoAnimatePlugin, createAutoHeightTextareaPlugin } from '@formki
 import type { FormKitOptions } from '@formkit/core'
 import { createI18nPlugin, zh } from '@formkit/i18n'
 import { genesisIcons } from '@formkit/icons'
-import { checkbox, createLibraryPlugin, form, group, list, number, range, submit, text, textarea, } from '@formkit/inputs'
+import { createLibraryPlugin } from '@formkit/inputs'
 import { createProPlugin, toggle } from '@formkit/pro'
 import * as defaultRules from '@formkit/rules'
 import { createThemePlugin } from '@formkit/themes'
 import { createValidationPlugin } from '@formkit/validation'
 import { /* defaultConfig, */ bindings, createInput } from '@formkit/vue'
 import { addAsteriskPlugin } from './formkit.addAsteriskPlugin'
+import { fkLibrary } from './formkit.config.fkLibrary'
 import { rootClasses } from "./formkit.config.theme"
-import HeadlessuiToggle from "./src/headlessui-switch.vue";
+import HeadlessuiToggle from "./src/headlessui-switch.vue"
 
-
-const library = createLibraryPlugin({
-  text, form, submit, group, checkbox, range, list, number, textarea,
-  'headlessuiSwitch': createInput(HeadlessuiToggle)
-})
 const validation = createValidationPlugin(defaultRules)
 const i18n = createI18nPlugin({ zh })
 const theme = undefined;
@@ -28,7 +24,13 @@ export default {
   plugins: [
     createProPlugin(apiKey, { toggle }),
 
-    library,
+    createLibraryPlugin(fkLibrary),
+
+    createLibraryPlugin(
+      {
+        'headlessuiSwitch': createInput(HeadlessuiToggle),
+      }
+    ),
 
     themePlugin, bindings, i18n, validation, addAsteriskPlugin,
 

package.json

@@ -7,7 +7,8 @@
   "scripts": {
     "dev": "vite --port 1115",
     "build": "vue-tsc -b && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "preview:netlify": "netlify deploy --dir dist"
   },
   "dependencies": {
     "@formkit/addons": "^1.6.9",
@@ -27,8 +28,10 @@
     "zod-i18n-map": "^2.27.0"
   },
   "devDependencies": {
+    "@unocss/extractor-arbitrary-variants": "^0.64.1",
     "@vitejs/plugin-vue": "^5.2.0",
     "typescript": "~5.6.3",
+    "unocss": "^0.64.1",
     "vite": "^5.4.11",
     "vue-tsc": "^2.1.10"
   }

src/assets/main.css

@@ -1,16 +1,16 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/* @tailwind base; */
+/* @tailwind components; */
+/* @tailwind utilities; */
 
 body {
-  background-color:#f3f4f6;
-  color:#1f2937;
+  background-color: #f3f4f6;
+  color: #1f2937;
 }
 
 @media (prefers-color-scheme: dark) {
   body {
-    background-color:#1a202c;
-    color:#e5e7eb;
+    background-color: #1a202c;
+    color: #e5e7eb;
   }
 }
 

src/main.ts

@@ -4,6 +4,10 @@ import { createApp } from 'vue'
 import formKitConfig from '../formkit.config'
 import App from './App.vue'
 
+// import '@unocss/reset/tailwind-compat.css'
+import '@unocss/reset/tailwind.css'
+import 'virtual:uno.css'
+
 const app = createApp(App)
 
 // https://github.dev/formkit/auto-animate/blob/master/docs/src/examples/formkit/ActualFormKit.vue

unocss.config.ts

@@ -0,0 +1,63 @@
+import { extractorArbitraryVariants } from "@unocss/extractor-arbitrary-variants";
+import {
+  defineConfig,
+  presetUno,
+  transformerVariantGroup
+} from "unocss";
+import { fkLibrary } from "./formkit.config.fkLibrary";
+import { classes, globals } from "./formkit.config.theme";
+
+const familyList = [
+  ...new Set(Object.values(fkLibrary).map((lib) => lib.family)),
+].filter((f) => f) as string[];
+const typeList = [
+  ...new Set(Object.values(fkLibrary).map((lib) => lib.type)),
+].filter((f) => f) as string[];
+
+console.debug(`familyList :>> `, familyList);
+console.debug(`typeList :>> `, typeList);
+
+const globalsR = [
+  ...new Set(Object.values(globals).flatMap((v) => Object.keys(v))),
+];
+const classesR = [
+  ...new Set(
+    Object.keys(classes)
+      .filter(
+        (k) =>
+          familyList.some((f) => k.includes(f)) ||
+          typeList.some((t) => k.includes(t))
+      )
+      .map((k) => classes[k])
+      .flatMap((v) => Object.keys(v))
+      .filter((className) => !className.includes("[]"))
+      .filter((className) => !className.includes("&::"))
+  ),
+];
+// console.debug(`classesR :>> `, classesR);
+
+export default defineConfig({
+  content: {
+    filesystem: ["xx.ts"],
+    inline: [
+      "!border-none", // for: "range__inner"
+      classesR.join(" "),
+      globalsR.join(" "),
+      async () => {
+        return "";
+      },
+    ],
+    pipeline: {
+      // include: [
+      //   /xx.ts($|\?)/,
+      // ],
+    },
+  },
+  presets: [
+    presetUno({
+      dark: "media",
+    }),
+  ],
+  transformers: [transformerVariantGroup()],
+  extractors: [extractorArbitraryVariants()],
+});

vite.config.ts

@@ -1,9 +1,10 @@
+import UnoCSS from 'unocss/vite'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), UnoCSS(),],
   build: {
     sourcemap: true
   }

xx.ts

@@ -0,0 +1,8 @@
+const classss = [
+  'text-8882',
+  'formkit-disabled:opacity-40',
+]
+
+const globals: Record<string, Record<string, boolean>> = {
+
+};