1

packages/vite-plugin/dist/index.js

@@ -657,7 +657,7 @@
             "disabled:",
             "group-hover:",
         ];
-        const statePrefixes = ["dark:", "light:", "sm:", "md:", "lg:", "xl:", "2xl:"];
+        const statePrefixes = ["dark:", "dark:!", "light:", "sm:", "md:", "lg:", "xl:", "2xl:"];
         if (className.startsWith("!") && !className.includes("!=")) {
             return true;
         }
@@ -687,8 +687,6 @@
             return `type ${name}${extendsStr} = {${content}}`;
         });
     }
-    // test();
-    // npx tsx src/uniapp-x/utils.ts
 
     // 全局 service 对象，用于存储服务结构
     const service = {};
@@ -1934,6 +1932,10 @@ if (typeof window !== 'undefined') {
                                                         decl.value = "1";
                                                     }
                                                 }
+                                                // 处理 vertical-align 属性
+                                                if (decl.prop == "vertical-align") {
+                                                    decl.remove();
+                                                }
                                                 // 处理 visibility 属性
                                                 if (decl.prop == "visibility") {
                                                     decl.remove();
@@ -1953,9 +1955,11 @@ if (typeof window !== 'undefined') {
                                                     // 处理单位转换(rem -> rpx)
                                                     if (node.type === "word") {
                                                         const unit = valueParser.unit(node.value);
-                                                        if (unit?.unit === "rem") {
+                                                        if (typeof unit != "boolean") {
-                                                            node.value = remToRpx(unit.number);
+                                                            if (unit?.unit === "rem") {
-                                                            hasChanges = true;
+                                                                node.value = remToRpx(unit.number);
+                                                                hasChanges = true;
+                                                            }
                                                         }
                                                     }
                                                     // 处理 CSS 变量

packages/vite-plugin/dist/test.d.ts

@@ -0,0 +1 @@
+export declare function test(): void;

packages/vite-plugin/dist/uniapp-x/tailwind.d.ts

@@ -1,4 +1,8 @@
 import type { Plugin } from "vite";
+/**
+ * 转换类名中的特殊字符为安全字符
+ */
+export declare function toSafeClass(className: string): string;
 /**
  * Tailwind 类名转换插件
  */

packages/vite-plugin/dist/uniapp-x/utils.d.ts

@@ -26,4 +26,3 @@ export declare function isTailwindClass(className: string): boolean;
  * 将 interface 转换为 type
  */
 export declare function interfaceToType(code: string): string;
-export declare function test(): void;

packages/vite-plugin/package.json

@@ -23,6 +23,7 @@
 		"@typescript-eslint/eslint-plugin": "^7.7.1",
 		"@typescript-eslint/parser": "^7.7.1",
 		"eslint": "^9.1.1",
+		"postcss-value-parser": "^4.2.0",
 		"rollup": "^4.16.2",
 		"tslib": "^2.6.2",
 		"typescript": "^5.4.5",

packages/vite-plugin/src/test.ts

@@ -0,0 +1,90 @@
+import { toSafeClass } from "./uniapp-x/tailwind";
+import { getClassContent, getClassNames, getNodes, isTailwindClass } from "./uniapp-x/utils";
+
+export function test() {
+	const html = `
+	<template>
+		1<text :class="parseClass({'!bg-red-50': hoverable})"></text>
+		2<text :class="a ? 'text-red-100' : 'text-red-200'"></text>
+		3<text :class="\`text-red-300 \${true ? 'text-red-310' : 'text-red-320'}\`"></text>
+		4<text class="text-red-330"></text>
+		5<text :class="{
+			'text-red-400': a,
+			'text-red-500': b,
+		}"></text>
+		6<text :class="[
+			'text-red-600',
+			'text-red-700',
+			{
+				'text-red-800': c,
+			}
+		]"></text>
+		7<text :class="\`text-red-900\` text-red-1000"></text>
+		8<text :pt="{
+			className: '!text-green-50'
+		}"></text>
+		9<text :pt="{
+			className: parseClass({
+				'!text-green-100': hoverable,
+			}),
+			item: {
+				className: '!text-green-200'
+			},
+			title: {
+				className: '!text-green-300'
+			}
+		}"></text>
+		10<text :pt="{
+			className: \`text-green-300 \${true ? 'text-red-310' : 'text-red-320'}\`
+		}"></text>
+		11<text hover-class="text-green-400"></text>
+		12<text :hover-class="\`text-green-400\`"></text>
+		13<text :hover-class="parseClass({'!text-green-450': hoverable})"></text>
+		14<text :hover-class="a ? 'text-green-500' : 'text-green-600'"></text>
+		15<text :hover-class="\`text-green-700 \${true ? 'text-red-310' : 'text-red-320'}\`"></text>
+		16<cl-timeline-item
+			icon="checkbox-circle-fill"
+			:pt="{
+				title: {
+					className: '!text-primary-500'
+				},
+				icon: {
+					className: '!text-primary-400'
+				}
+			}"
+			title="更快速"
+			date="2025-06-28 10:00:00"
+			content="通过集成 cool-admin 的用户登录、版本管理、消息通知以及订单管理等基础模块。有效降低了开发成本，进而增强了市场竞争力。"
+		>
+		</cl-timeline-item>
+		17<text class="title dark:!text-surface-50"></text>
+	</template>
+`;
+
+	const nodes = getNodes(html);
+
+	console.log("所有节点:");
+	nodes.forEach((node, index) => {
+		console.log(`第${index + 1}个节点:`, node);
+	});
+
+	console.log("\n详细分析:");
+	nodes.forEach((node, index) => {
+		const classContents = getClassContent(node);
+		const classNames = getClassNames(node);
+		console.log(`第${index + 1}个节点:`);
+		console.log("classContents", classContents);
+		console.log("classNames", classNames);
+
+		classNames.forEach((className) => {
+			console.log("safeClass", toSafeClass(className));
+		});
+		console.log("---");
+	});
+
+	console.log(isTailwindClass("dark:!text-surface-50"));
+}
+
+test();
+
+// npx tsx src/test.ts

packages/vite-plugin/src/uniapp-x/tailwind.ts

@@ -29,7 +29,7 @@ const TW_DEFAULT_VALUES: Record<string, string | number> = {
 /**
  * 转换类名中的特殊字符为安全字符
  */
-function toSafeClass(className: string): string {
+export function toSafeClass(className: string): string {
 	if (className.includes(":host")) {
 		return className;
 	}
@@ -179,6 +179,11 @@ function postcssPlugin(): Plugin {
 												}
 											}
 
+											// 处理 vertical-align 属性
+											if (decl.prop == "vertical-align") {
+												decl.remove();
+											}
+
 											// 处理 visibility 属性
 											if (decl.prop == "visibility") {
 												decl.remove();
@@ -203,9 +208,12 @@ function postcssPlugin(): Plugin {
 												// 处理单位转换(rem -> rpx)
 												if (node.type === "word") {
 													const unit = valueParser.unit(node.value);
-													if (unit?.unit === "rem") {
+
-														node.value = remToRpx(unit.number);
+													if (typeof unit != "boolean") {
-														hasChanges = true;
+														if (unit?.unit === "rem") {
+															node.value = remToRpx(unit.number);
+															hasChanges = true;
+														}
 													}
 												}
 

packages/vite-plugin/src/uniapp-x/utils.ts

@@ -485,7 +485,7 @@ export function isTailwindClass(className: string): boolean {
 		"group-hover:",
 	];
 
-	const statePrefixes = ["dark:", "light:", "sm:", "md:", "lg:", "xl:", "2xl:"];
+	const statePrefixes = ["dark:", "dark:!", "light:", "sm:", "md:", "lg:", "xl:", "2xl:"];
 
 	if (className.startsWith("!") && !className.includes("!=")) {
 		return true;
@@ -522,84 +522,3 @@ export function interfaceToType(code: string) {
 		return `type ${name}${extendsStr} = {${content}}`;
 	});
 }
-
-export function test() {
-	const html = `
-	<template>
-		1<text :class="parseClass({'!bg-red-50': hoverable})"></text>
-		2<text :class="a ? 'text-red-100' : 'text-red-200'"></text>
-		3<text :class="\`text-red-300 \${true ? 'text-red-310' : 'text-red-320'}\`"></text>
-		4<text class="text-red-330"></text>
-		5<text :class="{
-			'text-red-400': a,
-			'text-red-500': b,
-		}"></text>
-		6<text :class="[
-			'text-red-600',
-			'text-red-700',
-			{
-				'text-red-800': c,
-			}
-		]"></text>
-		7<text :class="\`text-red-900\` text-red-1000"></text>
-		8<text :pt="{
-			className: '!text-green-50'
-		}"></text>
-		9<text :pt="{
-			className: parseClass({
-				'!text-green-100': hoverable,
-			}),
-			item: {
-				className: '!text-green-200'
-			},
-			title: {
-				className: '!text-green-300'
-			}
-		}"></text>
-		10<text :pt="{
-			className: \`text-green-300 \${true ? 'text-red-310' : 'text-red-320'}\`
-		}"></text>
-		11<text hover-class="text-green-400"></text>
-		12<text :hover-class="\`text-green-400\`"></text>
-		13<text :hover-class="parseClass({'!text-green-450': hoverable})"></text>
-		14<text :hover-class="a ? 'text-green-500' : 'text-green-600'"></text>
-		15<text :hover-class="\`text-green-700 \${true ? 'text-red-310' : 'text-red-320'}\`"></text>
-		16<cl-timeline-item
-			icon="checkbox-circle-fill"
-			:pt="{
-				title: {
-					className: '!text-primary-500'
-				},
-				icon: {
-					className: '!text-primary-400'
-				}
-			}"
-			title="更快速"
-			date="2025-06-28 10:00:00"
-			content="通过集成 cool-admin 的用户登录、版本管理、消息通知以及订单管理等基础模块。有效降低了开发成本，进而增强了市场竞争力。"
-		>
-		</cl-timeline-item>
-	</template>
-`;
-
-	const nodes = getNodes(html);
-
-	console.log("所有节点:");
-	nodes.forEach((node, index) => {
-		console.log(`第${index + 1}个节点:`, node);
-	});
-
-	console.log("\n详细分析:");
-	nodes.forEach((node, index) => {
-		const classContents = getClassContent(node);
-		const classNames = getClassNames(node);
-		console.log(`第${index + 1}个节点:`);
-		console.log("classContents", classContents);
-		console.log("classNames", classNames);
-		console.log("---");
-	});
-}
-
-// test();
-
-// npx tsx src/uniapp-x/utils.ts

packages/vite-plugin/yarn.lock

@@ -1479,6 +1479,11 @@ picomatch@^4.0.2:
   resolved "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.2.tgz#77c742931e8f3b8820946c76cd0c1f13730d1dab"
   integrity sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==
 
+postcss-value-parser@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmmirror.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
 postcss@^8.4.43, postcss@^8.5.3:
   version "8.5.3"
   resolved "https://registry.npmmirror.com/postcss/-/postcss-8.5.3.tgz#1463b6f1c7fb16fe258736cba29a2de35237eafb"