mirror of
https://github.com/cool-team-official/cool-admin-vue.git
synced 2025-12-11 21:12:50 +00:00
1
This commit is contained in:
icssoa
parent
11ce54a70a
commit
457dc4d117
16
packages/vite-plugin/dist/index.js
vendored
16
packages/vite-plugin/dist/index.js
vendored
@ -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") {
|
||||
node.value = remToRpx(unit.number);
|
||||
hasChanges = true;
|
||||
if (typeof unit != "boolean") {
|
||||
if (unit?.unit === "rem") {
|
||||
node.value = remToRpx(unit.number);
|
||||
hasChanges = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 处理 CSS 变量
|
||||
|
||||
1
packages/vite-plugin/dist/test.d.ts
vendored
Normal file
1
packages/vite-plugin/dist/test.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
export declare function test(): void;
|
||||
@ -1,4 +1,8 @@
|
||||
import type { Plugin } from "vite";
|
||||
/**
|
||||
* 转换类名中的特殊字符为安全字符
|
||||
*/
|
||||
export declare function toSafeClass(className: string): string;
|
||||
/**
|
||||
* Tailwind 类名转换插件
|
||||
*/
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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",
|
||||
|
||||
90
packages/vite-plugin/src/test.ts
Normal file
90
packages/vite-plugin/src/test.ts
Normal file
@ -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
|
||||
@ -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);
|
||||
hasChanges = true;
|
||||
|
||||
if (typeof unit != "boolean") {
|
||||
if (unit?.unit === "rem") {
|
||||
node.value = remToRpx(unit.number);
|
||||
hasChanges = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user