chore: fix generate-css-vars

script/generate-css-vars.mjs

@@ -37,7 +37,7 @@ const getAllComponentName = async (dirPath) => {
 
 const generateCssVariables = async (componentName) => {
   const lessPath = [];
-
+  const parsedKeys = [];
   let cssVariableBodyContent = '';
 
   if (combine[componentName]) {
@@ -54,14 +54,20 @@ const generateCssVariables = async (componentName) => {
   const fileContents = await Promise.all(validPaths.map((item) => fs.promises.readFile(item, 'utf8')));
 
   fileContents.forEach((file) => {
-    const matchReg = /(?<=var)[\s\S]*?(?=;)/g;
+    const matchReg = /(?<=var)\([\s\S]*?(?=;)/g;
 
     const list = file.match(matchReg)?.sort();
 
-    list?.forEach((item, index) => {
-      cssVariableBodyContent += `${item.slice(1, item.indexOf(',')).trim()} | ${item
-        .slice(item.indexOf(',') + 2, item.length - 1)
-        .trim()} | -${index === list.length - 1 ? '' : ' \n'}`;
+    list?.forEach((item) => {
+      const key = item.slice(1, item.indexOf(',')).trim();
+      const value = item.slice(item.indexOf(',') + 2, item.length - 1).trim();
+      if (!key || !value) {
+        throw new Error('⚠️ 解析失败，请检查 less 文件');
+      }
+      if (!parsedKeys.includes(key)) {
+        parsedKeys.push(key);
+        cssVariableBodyContent += `${key} | ${value} | -${'\n'}`;
+      }
     });
   });
 

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

@@ -28,16 +28,16 @@ onSelected | Function |  | Typescript：`(selected: ActionSheetItem \| string, i
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
---td-action-sheet-border-color | @component-stroke | - 
---td-action-sheet-border-radius | @radius-extraLarge | - 
---td-action-sheet-cancel-height | 48px | - 
---td-action-sheet-color | @text-color-primary | - 
---td-action-sheet-description-color | @text-color-placeholder | - 
---td-action-sheet-dot-active-color | @brand-color | - 
---td-action-sheet-dot-color | @text-color-disabled | - 
---td-action-sheet-dot-size | 8px | - 
---td-action-sheet-gap-color | var(--td-bg-color-page, @component-stroke) | - 
---td-action-sheet-list-item-disabled-color | @text-color-disabled | - 
---td-action-sheet-list-item-height | 56px | - 
---td-action-sheet-text-align | center | - 
---td-action-sheet-text-weight | 400 | - 
+--td-action-sheet-border-color | @component-stroke | -
+--td-action-sheet-border-radius | @radius-extraLarge | -
+--td-action-sheet-cancel-height | 48px | -
+--td-action-sheet-color | @text-color-primary | -
+--td-action-sheet-description-color | @text-color-placeholder | -
+--td-action-sheet-dot-active-color | @brand-color | -
+--td-action-sheet-dot-color | @text-color-disabled | -
+--td-action-sheet-dot-size | 8px | -
+--td-action-sheet-gap-color | var(--td-bg-color-page, @component-stroke) | -
+--td-action-sheet-list-item-disabled-color | @text-color-disabled | -
+--td-action-sheet-list-item-height | 56px | -
+--td-action-sheet-text-align | center | -
+--td-action-sheet-text-weight | 400 | -

src/action-sheet/action-sheet.md

@@ -28,16 +28,16 @@ onSelected | Function |  | TS 类型：`(selected: ActionSheetItem \| string, in
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
---td-action-sheet-border-color | @component-stroke | - 
---td-action-sheet-border-radius | @radius-extraLarge | - 
---td-action-sheet-cancel-height | 48px | - 
---td-action-sheet-color | @text-color-primary | - 
---td-action-sheet-description-color | @text-color-placeholder | - 
---td-action-sheet-dot-active-color | @brand-color | - 
---td-action-sheet-dot-color | @text-color-disabled | - 
---td-action-sheet-dot-size | 8px | - 
---td-action-sheet-gap-color | var(--td-bg-color-page, @component-stroke) | - 
---td-action-sheet-list-item-disabled-color | @text-color-disabled | - 
---td-action-sheet-list-item-height | 56px | - 
---td-action-sheet-text-align | center | - 
---td-action-sheet-text-weight | 400 | - 
+--td-action-sheet-border-color | @component-stroke | -
+--td-action-sheet-border-radius | @radius-extraLarge | -
+--td-action-sheet-cancel-height | 48px | -
+--td-action-sheet-color | @text-color-primary | -
+--td-action-sheet-description-color | @text-color-placeholder | -
+--td-action-sheet-dot-active-color | @brand-color | -
+--td-action-sheet-dot-color | @text-color-disabled | -
+--td-action-sheet-dot-size | 8px | -
+--td-action-sheet-gap-color | var(--td-bg-color-page, @component-stroke) | -
+--td-action-sheet-list-item-disabled-color | @text-color-disabled | -
+--td-action-sheet-list-item-height | 56px | -
+--td-action-sheet-text-align | center | -
+--td-action-sheet-text-weight | 400 | -

src/avatar/avatar.en-US.md

@@ -38,25 +38,25 @@ onCollapsedItemClick | Function |  | Typescript：`(context: { e: MouseEvent })
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
---td-avatar-bg-color | @brand-color-light-active | - 
---td-avatar-border-color | @bg-color-container | - 
---td-avatar-border-width-large | 3px | - 
---td-avatar-border-width-medium | 2px | - 
---td-avatar-border-width-small | 1px | - 
---td-avatar-circle-border-radius | @radius-circle | - 
---td-avatar-content-color | @brand-color | - 
---td-avatar-group-line-spacing | 2px | - 
---td-avatar-group-margin-left-large | -8px | - 
---td-avatar-group-margin-left-medium | -8px | - 
---td-avatar-group-margin-left-small | -8px | - 
---td-avatar-icon-large-font-size | 32px | - 
---td-avatar-icon-medium-font-size | 24px | - 
---td-avatar-icon-small-font-size | 20px | - 
---td-avatar-large-width | 64px | - 
---td-avatar-margin-left | 0 | - 
---td-avatar-medium-width | 48px | - 
---td-avatar-round-border-radius | @radius-default | - 
---td-avatar-small-width | 40px | - 
---td-avatar-text-large-font-size | @font-size-xl | - 
---td-avatar-text-medium-font-size | @font-size-m | - 
---td-avatar-text-small-font-size | @font-size-base | - 
+--td-avatar-bg-color | @brand-color-light-active | -
+--td-avatar-border-color | @bg-color-container | -
+--td-avatar-border-width-large | 3px | -
+--td-avatar-border-width-medium | 2px | -
+--td-avatar-border-width-small | 1px | -
+--td-avatar-circle-border-radius | @radius-circle | -
+--td-avatar-content-color | @brand-color | -
+--td-avatar-group-line-spacing | 2px | -
+--td-avatar-group-margin-left-large | -8px | -
+--td-avatar-group-margin-left-medium | -8px | -
+--td-avatar-group-margin-left-small | -8px | -
+--td-avatar-icon-large-font-size | 32px | -
+--td-avatar-icon-medium-font-size | 24px | -
+--td-avatar-icon-small-font-size | 20px | -
+--td-avatar-large-width | 64px | -
+--td-avatar-margin-left | 0 | -
+--td-avatar-medium-width | 48px | -
+--td-avatar-round-border-radius | @radius-default | -
+--td-avatar-small-width | 40px | -
+--td-avatar-text-large-font-size | @font-size-xl | -
+--td-avatar-text-medium-font-size | @font-size-m | -
+--td-avatar-text-small-font-size | @font-size-base | -

src/avatar/avatar.md

@@ -38,25 +38,25 @@ onCollapsedItemClick | Function |  | TS 类型：`(context: { e: MouseEvent }) =
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
---td-avatar-bg-color | @brand-color-light-active | - 
---td-avatar-border-color | @bg-color-container | - 
---td-avatar-border-width-large | 3px | - 
---td-avatar-border-width-medium | 2px | - 
---td-avatar-border-width-small | 1px | - 
---td-avatar-circle-border-radius | @radius-circle | - 
---td-avatar-content-color | @brand-color | - 
---td-avatar-group-line-spacing | 2px | - 
---td-avatar-group-margin-left-large | -8px | - 
---td-avatar-group-margin-left-medium | -8px | - 
---td-avatar-group-margin-left-small | -8px | - 
---td-avatar-icon-large-font-size | 32px | - 
---td-avatar-icon-medium-font-size | 24px | - 
---td-avatar-icon-small-font-size | 20px | - 
---td-avatar-large-width | 64px | - 
---td-avatar-margin-left | 0 | - 
---td-avatar-medium-width | 48px | - 
---td-avatar-round-border-radius | @radius-default | - 
---td-avatar-small-width | 40px | - 
---td-avatar-text-large-font-size | @font-size-xl | - 
---td-avatar-text-medium-font-size | @font-size-m | - 
---td-avatar-text-small-font-size | @font-size-base | - 
+--td-avatar-bg-color | @brand-color-light-active | -
+--td-avatar-border-color | @bg-color-container | -
+--td-avatar-border-width-large | 3px | -
+--td-avatar-border-width-medium | 2px | -
+--td-avatar-border-width-small | 1px | -
+--td-avatar-circle-border-radius | @radius-circle | -
+--td-avatar-content-color | @brand-color | -
+--td-avatar-group-line-spacing | 2px | -
+--td-avatar-group-margin-left-large | -8px | -
+--td-avatar-group-margin-left-medium | -8px | -
+--td-avatar-group-margin-left-small | -8px | -
+--td-avatar-icon-large-font-size | 32px | -
+--td-avatar-icon-medium-font-size | 24px | -
+--td-avatar-icon-small-font-size | 20px | -
+--td-avatar-large-width | 64px | -
+--td-avatar-margin-left | 0 | -
+--td-avatar-medium-width | 48px | -
+--td-avatar-round-border-radius | @radius-default | -
+--td-avatar-small-width | 40px | -
+--td-avatar-text-large-font-size | @font-size-xl | -
+--td-avatar-text-medium-font-size | @font-size-m | -
+--td-avatar-text-small-font-size | @font-size-base | -

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

@@ -23,11 +23,10 @@ onToTop | Function |  | Typescript：`() => void`<br/> | N
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
---td-back-top-half-round-border-radius | @radius-round | - 
---td-back-top-round-bg-color | @font-white-1 | - 
---td-back-top-round-border-color | @component-border | - 
---td-back-top-round-border-color | @gray-color-9 | - 
---td-back-top-round-border-radius | @radius-circle | - 
---td-back-top-round-color | @font-gray-1 | - 
---td-back-top-round-dark-bg-color | @gray-color-14 | - 
---td-back-top-round-dark-color | @font-white-1 | - 
+--td-back-top-half-round-border-radius | @radius-round | -
+--td-back-top-round-bg-color | @font-white-1 | -
+--td-back-top-round-border-color | @component-border | -
+--td-back-top-round-border-radius | @radius-circle | -
+--td-back-top-round-color | @font-gray-1 | -
+--td-back-top-round-dark-bg-color | @gray-color-14 | -
+--td-back-top-round-dark-color | @font-white-1 | -

src/back-top/back-top.md

@@ -22,11 +22,10 @@ onToTop | Function |  | TS 类型：`() => void`<br/>点击触发 | N
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
---td-back-top-half-round-border-radius | @radius-round | - 
---td-back-top-round-bg-color | @font-white-1 | - 
---td-back-top-round-border-color | @component-border | - 
---td-back-top-round-border-color | @gray-color-9 | - 
---td-back-top-round-border-radius | @radius-circle | - 
---td-back-top-round-color | @font-gray-1 | - 
---td-back-top-round-dark-bg-color | @gray-color-14 | - 
---td-back-top-round-dark-color | @font-white-1 | - 
+--td-back-top-half-round-border-radius | @radius-round | -
+--td-back-top-round-bg-color | @font-white-1 | -
+--td-back-top-round-border-color | @component-border | -
+--td-back-top-round-border-radius | @radius-circle | -
+--td-back-top-round-color | @font-gray-1 | -
+--td-back-top-round-dark-bg-color | @gray-color-14 | -
+--td-back-top-round-dark-color | @font-white-1 | -

src/badge/badge.en-US.md

@@ -25,16 +25,16 @@ size | String | medium | options: medium/large | N
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
---td-badge-basic-height | 16px | - 
---td-badge-basic-padding | 4px | - 
---td-badge-basic-width | 16px | - 
---td-badge-bg-color | @error-color | - 
---td-badge-border-radius | 2px | - 
---td-badge-bubble-border-radius | 10px 10px 10px 1px | - 
---td-badge-dot-size | 8px | - 
---td-badge-font-size | @font-size-xs | - 
---td-badge-font-weight | 600 | - 
---td-badge-large-font-size | @font-size-s | - 
---td-badge-large-height | 20px | - 
---td-badge-large-padding | 5px | - 
---td-badge-text-color | @font-white-1 | - 
+--td-badge-basic-height | 16px | -
+--td-badge-basic-padding | 4px | -
+--td-badge-basic-width | 16px | -
+--td-badge-bg-color | @error-color | -
+--td-badge-border-radius | 2px | -
+--td-badge-bubble-border-radius | 10px 10px 10px 1px | -
+--td-badge-dot-size | 8px | -
+--td-badge-font-size | @font-size-xs | -
+--td-badge-font-weight | 600 | -
+--td-badge-large-font-size | @font-size-s | -
+--td-badge-large-height | 20px | -
+--td-badge-large-padding | 5px | -
+--td-badge-text-color | @font-white-1 | -

src/badge/badge.md

@@ -24,16 +24,16 @@ size | String | medium | 尺寸。可选项：medium/large | N
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
---td-badge-basic-height | 16px | - 
---td-badge-basic-padding | 4px | - 
---td-badge-basic-width | 16px | - 
---td-badge-bg-color | @error-color | - 
---td-badge-border-radius | 2px | - 
---td-badge-bubble-border-radius | 10px 10px 10px 1px | - 
---td-badge-dot-size | 8px | - 
---td-badge-font-size | @font-size-xs | - 
---td-badge-font-weight | 600 | - 
---td-badge-large-font-size | @font-size-s | - 
---td-badge-large-height | 20px | - 
---td-badge-large-padding | 5px | - 
---td-badge-text-color | @font-white-1 | - 
+--td-badge-basic-height | 16px | -
+--td-badge-basic-padding | 4px | -
+--td-badge-basic-width | 16px | -
+--td-badge-bg-color | @error-color | -
+--td-badge-border-radius | 2px | -
+--td-badge-bubble-border-radius | 10px 10px 10px 1px | -
+--td-badge-dot-size | 8px | -
+--td-badge-font-size | @font-size-xs | -
+--td-badge-font-weight | 600 | -
+--td-badge-large-font-size | @font-size-s | -
+--td-badge-large-height | 20px | -
+--td-badge-large-padding | 5px | -
+--td-badge-text-color | @font-white-1 | -