Skip to content

Commit 7375f17

Browse files
anlyyaoanlyyao
authored
chore: optimizing generate-css-vars.js (#3789)
* chore: optimizing generate-css-vars.js * docs: regenerate css vars document
1 parent ff95170 commit 7375f17

File tree

94 files changed

+696
-397
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

94 files changed

+696
-397
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"build:example": "gulp --gulpfile script/gulpfile.example.js --cwd ./",
2424
"build:assets": "cross-env NODE_ENV=production gulp assets:build --gulpfile script/gulpfile.dist.js --cwd ./",
2525
"update:icons": "node script/update-icons.js",
26+
"update:css": "node script/generate-css-vars.js",
2627
"lintfix": "eslint '{src,example}/**/*.{js,ts}' --fix",
2728
"lint": "eslint '{src,example}/**/*.{js,ts}'",
2829
"format": "prettier {src,example,script}/**/*.{js,ts,wxss,less,wxml,html,json,md,wxs} --write",

‎script/generate-css-vars.js‎

Lines changed: 100 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
const fs = require('fs');
22
const path = require('path');
33

4+
const COMPONENT_NAME = process.argv[process.argv.indexOf('--NAME') + 1]; // 在 --NAME 后面
5+
46
const combine = {
57
avatar: ['avatar-group', 'avatar'],
68
cell: ['cell-group', 'cell'],
@@ -17,52 +19,110 @@ const combine = {
1719
tabs: ['tabs', 'tab-panel'],
1820
'tab-bar': ['tab-bar', 'tab-bar-item'],
1921
grid: ['grid', 'grid-item'],
22+
layout: ['row', 'col'],
23+
form: ['form', 'form-item'],
2024
};
2125

22-
function resolveCwd(...args) {
26+
const resolveCwd = (...args) => {
2327
args.unshift(process.cwd());
2428
return path.join(...args);
25-
}
29+
};
2630

27-
const COMPONENT_NAME = process.argv[process.argv.indexOf('--NAME') + 1]; // 在 --NAME 后面
31+
const findFilePath = (componentName) => resolveCwd(`src/${componentName}/${componentName}.less`);
2832

29-
const matchReg = /(?<=var).*?(?=;)/g;
33+
const getAllComponentName = async (dirPath) => {
34+
const items = await fs.promises.readdir(dirPath, { withFileTypes: true });
35+
return items.filter((item) => item.isDirectory()).map((item) => item.name);
36+
};
3037

31-
// 使用 v2 文件夹下 _var.less 文件
32-
const lessPath = [];
33-
if (combine[COMPONENT_NAME]) {
34-
combine[COMPONENT_NAME].forEach((item) => {
35-
lessPath.push(resolveCwd(`src/${item}/${item}.less`));
36-
});
37-
} else {
38-
lessPath.push(resolveCwd(`src/${COMPONENT_NAME}/${COMPONENT_NAME}.less`));
39-
}
40-
41-
// 追加到文件
42-
const cssVariableHeadContent = `\n\n### CSS Variables\n\n组件提供了下列 CSS 变量，可用于自定义样式。\n名称 | 默认值 | 描述 \n-- | -- | --\n`;
43-
const cssVariableHeadContentEn = `\n\n### CSS Variables\n\nThe component provides the following CSS variables, which can be used to customize styles.\nName | Default Value | Description \n-- | -- | --\n`;
44-
45-
fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/README.md`), cssVariableHeadContent);
46-
fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/README.en-US.md`), cssVariableHeadContentEn);
47-
48-
// 读取 less 文件内容
49-
lessPath.forEach((item) => {
50-
if (fs.existsSync(item)) {
51-
fs.readFile(item, 'utf8', (err, file) => {
52-
if (err) {
53-
console.log('please execute npm run update:css first!', err);
54-
return;
55-
}
56-
const list = file.match(matchReg)?.sort();
57-
let cssVariableBodyContent = '';
58-
list?.forEach((item) => {
59-
cssVariableBodyContent += `${item.slice(1, item.indexOf(','))} | ${item.slice(
60-
item.indexOf(',') + 2,
61-
item.length - 1,
62-
)} | - \n`;
63-
});
64-
fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/README.md`), cssVariableBodyContent);
65-
fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/README.en-US.md`), cssVariableBodyContent);
38+
const generateCssVariables = async (componentName) => {
39+
const lessPath = [];
40+
41+
let cssVariableBodyContent = '';
42+
43+
if (combine[componentName]) {
44+
combine[componentName].forEach((item) => {
45+
lessPath.push(findFilePath(item));
6646
});
47+
} else {
48+
lessPath.push(findFilePath(componentName));
6749
}
68-
});
50+
51+
const validPaths = lessPath.filter((item) => fs.existsSync(item));
52+
53+
// 使用 fs.promises.readFile 并行读取文件
54+
const fileContents = await Promise.all(validPaths.map((item) => fs.promises.readFile(item, 'utf8')));
55+
56+
fileContents.forEach((file) => {
57+
const matchReg = /(?<=var)[\s\S]*?(?=;)/g;
58+
59+
const list = file.match(matchReg)?.sort();
60+
61+
list?.forEach((item) => {
62+
cssVariableBodyContent += `${item.slice(1, item.indexOf(',')).trim()} | ${item
63+
.slice(item.indexOf(',') + 2, item.length - 1)
64+
.trim()} | - \n`;
65+
});
66+
});
67+
68+
return cssVariableBodyContent;
69+
};
70+
71+
/**
72+
* 替换文档中的 CSS 变量部分
73+
* @param {string} filePath - 文档路径
74+
* @param {string} headContent - 变量表头部内容
75+
* @param {string} variables - 生成的变量内容
76+
*/
77+
const updateDocVariables = (filePath, headContent, variables) => {
78+
const path = resolveCwd(filePath);
79+
80+
if (!fs.existsSync(path)) return;
81+
82+
const content = fs.readFileSync(path, 'utf8');
83+
const cssVariablesSection = `\n${headContent}${variables}`;
84+
85+
// 检查是否存在 ### CSS Variables 部分
86+
if (content.includes('### CSS Variables')) {
87+
// 替换现有部分
88+
const newContent = content.replace(/(^|\n+)### CSS Variables[\s\S]*?(?=###|$)/, cssVariablesSection);
89+
fs.writeFileSync(path, newContent, 'utf8');
90+
} else {
91+
// 追加到文件末尾
92+
const trimmedContent = content.trimEnd();
93+
const newContent = `${trimmedContent}\n${cssVariablesSection}`;
94+
fs.writeFileSync(path, newContent, 'utf8');
95+
}
96+
};
97+
98+
// 批量处理所有组件
99+
const processAllComponents = async () => {
100+
const cssVariableHeadContent = `\n### CSS Variables\n\n组件提供了下列 CSS 变量，可用于自定义样式。\n名称 | 默认值 | 描述 \n-- | -- | --\n`;
101+
const cssVariableHeadContentEn = `\n### CSS Variables\n\nThe component provides the following CSS variables, which can be used to customize styles.\nName | Default Value | Description \n-- | -- | --\n`;
102+
103+
let COMPONENT_NAMES = [];
104+
if (COMPONENT_NAME === 'all') {
105+
COMPONENT_NAMES = await getAllComponentName(resolveCwd('src'));
106+
} else {
107+
COMPONENT_NAMES = [COMPONENT_NAME];
108+
}
109+
110+
// 并行处理所有组件
111+
await Promise.all(
112+
COMPONENT_NAMES.map(async (name) => {
113+
const variables = await generateCssVariables(name);
114+
if (variables) {
115+
updateDocVariables(`src/${name}/README.md`, cssVariableHeadContent, variables);
116+
updateDocVariables(`src/${name}/README.en-US.md`, cssVariableHeadContentEn, variables);
117+
console.log(`✅ 组件 "${name}" 文档更新完成`);
118+
} else {
119+
console.log(`${name}" 没有找到 CSS 变量`);
120+
}
121+
}),
122+
);
123+
};
124+
125+
// 执行入口
126+
processAllComponents().catch((err) =>
127+
console.error(`${COMPONENT_NAME === 'all' ? '❌ 批量处理失败:' : `${COMPONENT_NAME}处理失败`}`, err),
128+
);

‎src/action-sheet/README.en-US.md‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,12 +42,13 @@ t-class-content | \-
4242
The component provides the following CSS variables, which can be used to customize styles.
4343
Name | Default Value | Description
4444
-- | -- | --
45-
--td-action-sheet-border-color | @gray-color-1 | -
45+
--td-action-sheet-border-color | @border-level-1-color | -
4646
--td-action-sheet-border-radius | @radius-extra-large | -
47-
--td-action-sheet-cancel-color | @font-gray-1 | -
47+
--td-action-sheet-cancel-color | @text-color-primary | -
4848
--td-action-sheet-cancel-height | 96rpx | -
49-
--td-action-sheet-color | @font-gray-1 | -
50-
--td-action-sheet-description-color | @font-gray-3 | -
51-
--td-action-sheet-list-item-disabled-color | @font-gray-4 | -
49+
--td-action-sheet-color | @text-color-primary | -
50+
--td-action-sheet-description-color | @text-color-placeholder | -
51+
--td-action-sheet-gap-color | @bg-color-page | -
52+
--td-action-sheet-list-item-disabled-color | @text-color-disabled | -
5253
--td-action-sheet-list-item-height | 112rpx | -
53-
--td-action-sheet-text-align | center | -
54+
--td-action-sheet-text-align | center | -

‎src/action-sheet/README.md‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -130,12 +130,13 @@ t-class-content | 内容样式类
130130
组件提供了下列 CSS 变量，可用于自定义样式。
131131
名称 | 默认值 | 描述
132132
-- | -- | --
133-
--td-action-sheet-border-color | @gray-color-1 | -
133+
--td-action-sheet-border-color | @border-level-1-color | -
134134
--td-action-sheet-border-radius | @radius-extra-large | -
135-
--td-action-sheet-cancel-color | @font-gray-1 | -
135+
--td-action-sheet-cancel-color | @text-color-primary | -
136136
--td-action-sheet-cancel-height | 96rpx | -
137-
--td-action-sheet-color | @font-gray-1 | -
138-
--td-action-sheet-description-color | @font-gray-3 | -
139-
--td-action-sheet-list-item-disabled-color | @font-gray-4 | -
137+
--td-action-sheet-color | @text-color-primary | -
138+
--td-action-sheet-description-color | @text-color-placeholder | -
139+
--td-action-sheet-gap-color | @bg-color-page | -
140+
--td-action-sheet-list-item-disabled-color | @text-color-disabled | -
140141
--td-action-sheet-list-item-height | 112rpx | -
141-
--td-action-sheet-text-align | center | -
142+
--td-action-sheet-text-align | center | -

‎src/avatar/README.en-US.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,4 +88,4 @@ Name | Default Value | Description
8888
--td-avatar-small-width | 80rpx | -
8989
--td-avatar-text-large-font-size | @font-size-xl | -
9090
--td-avatar-text-medium-font-size | @font-size-m | -
91-
--td-avatar-text-small-font-size | @font-size-base | -
91+
--td-avatar-text-small-font-size | @font-size-base | -

‎src/avatar/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,4 +148,4 @@ t-class-image | 图片样式类
148148
--td-avatar-small-width | 80rpx | -
149149
--td-avatar-text-large-font-size | @font-size-xl | -
150150
--td-avatar-text-medium-font-size | @font-size-m | -
151-
--td-avatar-text-small-font-size | @font-size-base | -
151+
--td-avatar-text-small-font-size | @font-size-base | -

‎src/back-top/README.en-US.md‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,10 @@ t-class-text | \-
3333
The component provides the following CSS variables, which can be used to customize styles.
3434
Name | Default Value | Description
3535
-- | -- | --
36-
--td-back-top-round-bg-color | @font-white-1 | -
36+
--td-back-top-half-round-border-radius | @radius-round | -
37+
--td-back-top-round-bg-color | @bg-color-container | -
3738
--td-back-top-round-border-color | @component-border | -
3839
--td-back-top-round-border-radius | @radius-circle | -
39-
--td-back-top-round-color | @font-gray-1 | -
40-
--td-back-top-round-dark-bg-color | @gray-color-14 | -
41-
--td-back-top-round-dark-color | @font-white-1 | -
40+
--td-back-top-round-color | @text-color-primary | -
41+
--td-back-top-round-dark-bg-color | @gray-color-13 | -
42+
--td-back-top-round-dark-color | @text-color-anti | -

‎src/back-top/README.md‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,10 @@ t-class-text | 文本样式类
6464
组件提供了下列 CSS 变量，可用于自定义样式。
6565
名称 | 默认值 | 描述
6666
-- | -- | --
67-
--td-back-top-round-bg-color | @font-white-1 | -
67+
--td-back-top-half-round-border-radius | @radius-round | -
68+
--td-back-top-round-bg-color | @bg-color-container | -
6869
--td-back-top-round-border-color | @component-border | -
6970
--td-back-top-round-border-radius | @radius-circle | -
70-
--td-back-top-round-color | @font-gray-1 | -
71-
--td-back-top-round-dark-bg-color | @gray-color-14 | -
72-
--td-back-top-round-dark-color | @font-white-1 | -
71+
--td-back-top-round-color | @text-color-primary | -
72+
--td-back-top-round-dark-bg-color | @gray-color-13 | -
73+
--td-back-top-round-dark-color | @text-color-anti | -

‎src/badge/README.en-US.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,11 @@ Name | Default Value | Description
3636
--td-badge-bg-color | @error-color | -
3737
--td-badge-border-radius | 4rpx | -
3838
--td-badge-bubble-border-radius | 20rpx 20rpx 20rpx 1px | -
39+
--td-badge-content-text-color | @text-color-primary | -
3940
--td-badge-dot-size | 16rpx | -
4041
--td-badge-font-size | @font-size-xs | -
4142
--td-badge-font-weight | 600 | -
4243
--td-badge-large-font-size | @font-size-s | -
4344
--td-badge-large-height | 40rpx | -
4445
--td-badge-large-padding | 10rpx | -
45-
--td-badge-text-color | @font-white-1 | -
46+
--td-badge-text-color | @text-color-anti | -

‎src/badge/README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,10 +77,11 @@ t-class-count | 计数样式类
7777
--td-badge-bg-color | @error-color | -
7878
--td-badge-border-radius | 4rpx | -
7979
--td-badge-bubble-border-radius | 20rpx 20rpx 20rpx 1px | -
80+
--td-badge-content-text-color | @text-color-primary | -
8081
--td-badge-dot-size | 16rpx | -
8182
--td-badge-font-size | @font-size-xs | -
8283
--td-badge-font-weight | 600 | -
8384
--td-badge-large-font-size | @font-size-s | -
8485
--td-badge-large-height | 40rpx | -
8586
--td-badge-large-padding | 10rpx | -
86-
--td-badge-text-color | @font-white-1 | -
87+
--td-badge-text-color | @text-color-anti | -

0 commit comments

Comments
 (0)