diff --git a/packages/vite-plugin/dist/config.d.ts b/packages/vite-plugin/dist/config.d.ts index 61dcc89..4274bea 100644 --- a/packages/vite-plugin/dist/config.d.ts +++ b/packages/vite-plugin/dist/config.d.ts @@ -1,2 +1,33 @@ -import type { Config } from "../types"; -export declare const config: Config.Data; +export declare const config: { + type: string; + reqUrl: string; + demo: boolean; + nameTag: boolean; + eps: { + enable: boolean; + api: string; + dist: string; + mapping: ({ + custom: ({ propertyName, type }: { + propertyName: string; + type: string; + }) => null; + type?: undefined; + test?: undefined; + } | { + type: string; + test: string[]; + custom?: undefined; + })[]; + }; + svg: { + skipNames: string[]; + }; + tailwind: { + enable: boolean; + remUnit: number; + remPrecision: number; + rpxRatio: number; + darkTextClass: string; + }; +}; diff --git a/packages/vite-plugin/dist/index.js b/packages/vite-plugin/dist/index.js index ce4b34d..0d64be2 100644 --- a/packages/vite-plugin/dist/index.js +++ b/packages/vite-plugin/dist/index.js @@ -7,6 +7,7 @@ const config = { type: "admin", reqUrl: "", + nameTag: true, eps: { enable: true, api: "", @@ -46,9 +47,10 @@ }, tailwind: { enable: true, - remUnit: 16, + remUnit: 14, remPrecision: 6, rpxRatio: 2, + darkTextClass: "dark:text-surface-50", }, }; @@ -1048,332 +1050,550 @@ if (typeof window !== 'undefined') { }; } - // @ts-ignore /** - * Tailwind CSS 特殊字符映射表 - * 用于将类名中的特殊字符转换为安全字符,避免编译或运行时冲突 + * 特殊字符映射表 */ - const TAILWIND_SAFE_CHAR_MAP = { - "[": "-", - "]": "-", - "(": "-", - ")": "-", - "{": "-", - "}": "-", - $: "-v-", - "#": "-h-", - "!": "-i-", - "/": "-s-", - ":": "-c-", - ",": "-2c-", + const SAFE_CHAR_MAP = { + "[": "-bracket-start-", + "]": "-bracket-end-", + "(": "-paren-start-", + ")": "-paren-end-", + "{": "-brace-start-", + "}": "-brace-end-", + $: "-dollar-", + "#": "-hash-", + "!": "-important-", + "/": "-slash-", + ":": "-colon-", + }; + + /** + * 获取动态类名 + */ + const getDynamicClassNames = (value) => { + const names = new Set(); + // 匹配数组中的字符串元素(如 'text-center') + const arrayRegex = /['"](.*?)['"]/g; + let arrayMatch; + while ((arrayMatch = arrayRegex.exec(value)) !== null) { + arrayMatch[1].trim() && names.add(arrayMatch[1]); + } + // 匹配对象键(如 { 'text-a': 1 }) + const objKeyRegex = /[{,]\s*['"](.*?)['"]\s*:/g; + let objKeyMatch; + while ((objKeyMatch = objKeyRegex.exec(value)) !== null) { + objKeyMatch[1].trim() && names.add(objKeyMatch[1]); + } + // 匹配三元表达式中的字符串(如 'dark' 和 'light') + const ternaryRegex = /(\?|:)\s*['"](.*?)['"]/g; + let ternaryMatch; + while ((ternaryMatch = ternaryRegex.exec(value)) !== null) { + ternaryMatch[2].trim() && names.add(ternaryMatch[2]); + } + return Array.from(names); }; /** - * Tailwind CSS 常用类名前缀集合 - * 按功能分类,便于维护和扩展 + * 获取类名 */ - const TAILWIND_CLASS_PREFIXES = [ - // 间距 - "p-", - "px-", - "py-", - "pt-", - "pr-", - "pb-", - "pl-", - "m-", - "mx-", - "my-", - "mt-", - "mr-", - "mb-", - "ml-", - "gap-", - "gap-x-", - "gap-y-", - "space-x-", - "space-y-", - "inset-", - "top-", - "right-", - "bottom-", - "left-", - // 尺寸 - "w-", - "h-", - "min-w-", - "min-h-", - "max-w-", - "max-h-", - // 排版 - "text-", - "font-", - "leading-", - "tracking-", - "indent-", - // 边框 - "border-", - "border-t-", - "border-r-", - "border-b-", - "border-l-", - "rounded-", - "rounded-t-", - "rounded-r-", - "rounded-b-", - "rounded-l-", - "rounded-tl-", - "rounded-tr-", - "rounded-br-", - "rounded-bl-", - // 效果 - "shadow-", - "blur-", - "brightness-", - "contrast-", - "drop-shadow-", - "grayscale-", - "hue-rotate-", - "invert-", - "saturate-", - "sepia-", - "backdrop-blur-", - "backdrop-brightness-", - "backdrop-contrast-", - "backdrop-grayscale-", - "backdrop-hue-rotate-", - "backdrop-invert-", - "backdrop-opacity-", - "backdrop-saturate-", - "backdrop-sepia-", - // 动画 - "transition-", - "duration-", - "delay-", - "animate-", - // 变换 - "translate-x-", - "translate-y-", - "rotate-", - "scale-", - "scale-x-", - "scale-y-", - "skew-x-", - "skew-y-", - "origin-", - // 布局 - "columns-", - "break-after-", - "break-before-", - "break-inside-", - // Flexbox 和 Grid - "basis-", - "grow-", - "shrink-", - "grid-cols-", - "grid-rows-", - "col-span-", - "row-span-", - "col-start-", - "col-end-", - "row-start-", - "row-end-", - // SVG - "stroke-", - "stroke-w-", - "fill-", - ]; + function getClassNames(html) { + const classRegex = /(?:class|:class)\s*=\s*(["'])([\s\S]*?)\1/gi; + const classNames = new Set(); + let match; + while ((match = classRegex.exec(html)) !== null) { + const isStaticClass = match[0].startsWith("class"); + const value = match[2].trim(); + if (isStaticClass) { + // 处理静态 class + value.split(/\s+/).forEach((name) => name && classNames.add(name)); + } + else { + // 处理动态 :class + getDynamicClassNames(value).forEach((name) => classNames.add(name)); + } + } + return Array.from(classNames); + } /** - * Tailwind CSS 颜色变量映射 - * 用于移除不需要的 CSS 变量声明 + * 获取 class 内容 */ - const TAILWIND_COLOR_VARS = { - "--tw-text-opacity": 1, - "--tw-bg-opacity": 1, + function getClassContent(html) { + const regex = /(?:class|:class)\s*=\s*(['"])([\s\S]*?)\1/g; + const texts = []; + let match; + while ((match = regex.exec(html)) !== null) { + texts.push(match[2]); + } + return texts; + } + /** + * 获取节点 + */ + function getNodes(code) { + const nodes = []; + const templateMatch = /