From 800c8fd0335022cdcc654b81b3a8819a9e5c2ff7 Mon Sep 17 00:00:00 2001 From: "Mr.Dat" Date: Tue, 6 Jan 2026 18:42:14 +0700 Subject: [PATCH] feat: Add classnames minifier transformer and update component styles --- plugins/encodeClassTransformer.ts | 108 +++++++++++++++++++++++++++++ src/components/DashboardLayout.vue | 8 +-- src/routes/NotFound.vue | 2 +- src/routes/auth/layout.vue | 4 +- src/routes/auth/login.vue | 6 +- src/routes/public-routes/Home.vue | 26 +++---- uno.config.ts | 4 +- 7 files changed, 134 insertions(+), 24 deletions(-) create mode 100644 plugins/encodeClassTransformer.ts diff --git a/plugins/encodeClassTransformer.ts b/plugins/encodeClassTransformer.ts new file mode 100644 index 0000000..e8c170a --- /dev/null +++ b/plugins/encodeClassTransformer.ts @@ -0,0 +1,108 @@ +// import type { SourceCodeTransformer } from '@unocss/core' +// import { escapeRegExp, expandVariantGroup } from '@unocss/core' + +import { SourceCodeTransformer, escapeRegExp, expandVariantGroup } from 'unocss' +export const defaultChars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ' + +export function charCombinations(chars: string = defaultChars) { + const combination = [-1] + const charsLastIdx = chars.length - 1 + + const resetFromIndex = (idx: number) => { + for (let i = idx; i < combination.length; i++) + combination[i] = 0 + } + + return () => { + for (let i = combination.length - 1; i >= 0; i--) { + if (combination[i] !== charsLastIdx) { + combination[i] += 1 + resetFromIndex(i + 1) + break + } + if (i === 0) { + resetFromIndex(0) + combination.push(0) + break + } + } + + return "_"+combination.map(i => chars[i]).join('') + } +} + +export interface CompileClassOptions { + /** + * Special prefix to avoid UnoCSS transforming your code. + * @default ':uno:' + */ + trigger?: string + + /** + * Hash function + */ + hashFn?: () => string + + /** + * The layer name of generated rules + */ + layer?: string +} + +export default function transformerClassnamesMinifier(options: CompileClassOptions = {}): SourceCodeTransformer { + const { + trigger = ':uno:', + hashFn = charCombinations(), + } = options + + const compiledClass = new Map() + + const regexp = RegExp(`(["'\`])${escapeRegExp(trigger)}${trigger ? '\\s' : ''}(.*?)\\1`, 'g') + + return { + name: 'name', + enforce: 'pre', + async transform(s, _id, { uno }) { + if(s.original.includes('p-button') || s.original.includes('p-component') || s.original.includes('p-button-secondary')) { + console.log("transforming:", _id); + } + const matches = [...s.original.matchAll(regexp)] + if (!matches.length) + return + // console.log("s.original", s.original) + + for (const match of matches) { + const body = match.length ? expandVariantGroup(match[2].trim()) : '' + + const start = match.index! + const replacements = [] + + const result = await Promise.all(body.split(/\s+/).filter(Boolean).map(async i => [i, !!await uno.parseToken(i)] as const)) + const known = result.filter(([, matched]) => matched).map(([i]) => i) + const unknown = result.filter(([, matched]) => !matched).map(([i]) => i) + + replacements.push(...unknown) + + known.forEach((i) => { + const compiled = compiledClass.get(i) + + if (compiled) + return replacements.push(compiled) + + const className = hashFn() + + compiledClass.set(i, className) + + if (options.layer) + uno.config.shortcuts.push([className, i, { layer: options.layer }]) + else + uno.config.shortcuts.push([className, i]) + + replacements.push(className) + }) + + s.overwrite(start + 1, start + match[0].length - 1, replacements.join(' ')) + } + }, + } +} \ No newline at end of file diff --git a/src/components/DashboardLayout.vue b/src/components/DashboardLayout.vue index cacf209..8e494b7 100644 --- a/src/components/DashboardLayout.vue +++ b/src/components/DashboardLayout.vue @@ -29,15 +29,15 @@ const links = [ :class="cn(className, $route.path === i.href && 'bg-primary/15')"> -
-
-
+
-
+

404 - Page Not Found

The page you are looking for does not exist.

Go back to Home diff --git a/src/routes/auth/layout.vue b/src/routes/auth/layout.vue index b6cc61a..17abfc1 100644 --- a/src/routes/auth/layout.vue +++ b/src/routes/auth/layout.vue @@ -1,7 +1,7 @@