@oceanbase/codemod 1.0.0-alpha.1 → 1.0.0-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/codemod",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.3",
   "description": "Codemod for OceanBase Design upgrade",
   "keywords": [
     "oceanbase",
@@ -23,7 +23,7 @@
     "build": "father build"
   },
   "dependencies": {
-    "@oceanbase/design": "^1.0.0-alpha.1",
+    "@oceanbase/design": "^1.0.0-alpha.3",
     "chalk": "^3.0.0",
     "command-exists": "^1.2.9",
     "execa": "^5.1.1",
@@ -37,7 +37,7 @@
     "postcss-less": "^6.0.0",
     "prettier": "^3.6.2",
     "read-pkg-up": "^10.1.0",
-    "semver": "^7.7.2",
+    "semver": "^7.7.3",
     "update-check": "^1.5.4",
     "yargs-parser": "^21.1.1"
   },
@@ -47,5 +47,5 @@
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2"
   },
-  "gitHead": "47b1ebfa75581585b83252085dddd33fc2c072a5"
+  "gitHead": "62c3cf2b25248d70e4f1826e69c019a38e03753e"
 }

package/transforms/__testfixtures__/less-to-token/antd-v4-less-to-token.input.less

@@ -5,6 +5,8 @@
   border-color: #ff4d4f;
   scrollbar-color: #ffffff;
   font-size: 14px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03),
+    0 1px 6px -1px @colorFillQuaternary, 0 2px 4px 0 rgba(0, 0, 0, 0.02);
   .content {
     color: rgba(0, 0, 0, 0.85);
     background: rgba(0, 0, 0,0.65);

package/transforms/__testfixtures__/less-to-token/antd-v4-less-to-token.output.less

@@ -6,6 +6,8 @@
   border-color: @colorError;
   scrollbar-color: @colorBgContainer;
   font-size: @fontSize;
+  box-shadow: 0 1px 2px 0 @colorFillQuaternary,
+    0 1px 6px -1px @colorFillQuaternary, 0 2px 4px 0 @colorFillQuaternary;
   .content {
     color: @colorText;
     background: @colorTextSecondary;

package/transforms/__testfixtures__/less-to-token/exist-import-url.input.less

@@ -0,0 +1,10 @@
+@import url('~@oceanbase/design/es/theme/index.less');
+
+.container {
+  color: rgba(0, 0, 0, 0.85);
+  background: rgba(0, 0, 0,0.65);
+  background-color: rgba(0,0,0,0.45);
+  border-color: rgb(0 0 0 / 45%);
+  border: 1px solid #d9d9d9;
+  font-size: 14px;
+}

package/transforms/__testfixtures__/less-to-token/exist-import-url.output.less

@@ -0,0 +1,10 @@
+@import url('~@oceanbase/design/es/theme/index.less');
+
+.container {
+  color: @colorText;
+  background: @colorTextSecondary;
+  background-color: @colorTextTertiary;
+  border-color: @colorTextTertiary;
+  border: 1px solid @colorBorder;
+  font-size: @fontSize;
+}

package/transforms/__testfixtures__/less-to-token/exist-import.input.less

@@ -0,0 +1,10 @@
+@import '~@oceanbase/design/es/theme/index.less';
+
+.container {
+  color: rgba(0, 0, 0, 0.85);
+  background: rgba(0, 0, 0,0.65);
+  background-color: rgba(0,0,0,0.45);
+  border-color: rgb(0 0 0 / 45%);
+  border: 1px solid #d9d9d9;
+  font-size: 14px;
+}

package/transforms/__testfixtures__/less-to-token/exist-import.output.less

@@ -0,0 +1,10 @@
+@import '~@oceanbase/design/es/theme/index.less';
+
+.container {
+  color: @colorText;
+  background: @colorTextSecondary;
+  background-color: @colorTextTertiary;
+  border-color: @colorTextTertiary;
+  border: 1px solid @colorBorder;
+  font-size: @fontSize;
+}

package/transforms/__testfixtures__/style-to-token/antd-style.input.js

@@ -5,6 +5,7 @@ const useStyle1 = createStyles(() => {
     main: {
       background: '#1890ff',
       fontSize: 14,
+      boxShadow: `0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px ${token.colorFillQuaternary}, 0 2px 4px 0 rgba(0, 0, 0, 0.02)`,
     },
   };
 });

package/transforms/__testfixtures__/style-to-token/antd-style.output.js

@@ -9,6 +9,7 @@ const useStyle1 = createStyles((
     main: {
       background: token.colorInfo,
       fontSize: token.fontSize,
+      boxShadow: `0 1px 2px 0 ${token.colorFillQuaternary}, 0 1px 6px -1px ${token.colorFillQuaternary}, 0 2px 4px 0 ${token.colorFillQuaternary}`,
     },
   };
 });

package/transforms/__testfixtures__/style-to-token/nested-object.input.js

@@ -0,0 +1,12 @@
+export const DefaultLineConfig = {
+  annotations: [
+    {
+      text: {
+        style: {
+          fill: '#1890ff',
+          fontSize: 11,
+        },
+      },
+    },
+  ],
+};

package/transforms/__testfixtures__/style-to-token/nested-object.output.js

@@ -0,0 +1,13 @@
+import { token } from '@oceanbase/design';
+export const DefaultLineConfig = {
+  annotations: [
+    {
+      text: {
+        style: {
+          fill: token.colorInfo,
+          fontSize: token.fontSizeSM,
+        },
+      },
+    },
+  ],
+};

package/transforms/__tests__/less-to-token.test.ts

@@ -9,6 +9,8 @@ const tests = [
   'case-insensitive',
   'mixin',
   'obui-less-token-to-token',
+  'exist-import',
+  'exist-import-url',
 ];
 
 describe(testUnit, () => {

package/transforms/__tests__/style-to-token.test.ts

@@ -12,6 +12,7 @@ const tests = [
   'nested-block-statement',
   'existed-useToken',
   'top-identifier',
+  'nested-object',
   'case-insensitive',
   'antd-style',
 ];

package/transforms/less-to-token.js

@@ -6,7 +6,7 @@ const isDirectory = require('is-directory');
 const { tokenParse, propertyTokenParse } = require('./utils/token');
 
 /**
- * 搜索目录下所有的less文件
+ * Find all less files in the directory
  * @param dir
  * @returns
  */
@@ -36,6 +36,7 @@ async function transform(file) {
   const content = fs.readFileSync(file, 'utf-8');
   const { root: ast } = await postcss([]).process(content, {
     syntax: postcssLess,
+    from: file, // 添加 from 选项以避免警告
   });
   let hasToken = false;
   let tokenLessImported = false;
@@ -51,18 +52,56 @@ async function transform(file) {
         hasToken = true;
       } else {
         // 然后尝试基于值的 token 转换
-        const { key, token, formattedValue } = tokenParse(node.value);
-        if (token) {
-          node.value = formattedValue.replace(key, `@${token}`);
+        let newValue = node.value;
+        let valueHasToken = false;
+
+        // 检查是否为复合值（包含多个值或颜色值）
+        const isCompositeValue =
+          node.value.includes(',') ||
+          /rgba?\([^)]+\)|#[0-9a-fA-F]{3,8}|rgb\([^)]+\)|hsl\([^)]+\)|hsla?\([^)]+\)/.test(
+            node.value
+          );
+
+        if (isCompositeValue) {
+          // 对于复合值，只替换其中的颜色值
+          const colorRegex =
+            /rgba?\([^)]+\)|#[0-9a-fA-F]{3,8}|rgb\([^)]+\)|hsl\([^)]+\)|hsla?\([^)]+\)/g;
+          const colorMatches = node.value.match(colorRegex);
+          if (colorMatches) {
+            colorMatches.forEach(match => {
+              const colorResult = tokenParse(match);
+              if (colorResult.token) {
+                newValue = newValue.replace(match, `@${colorResult.token}`);
+                valueHasToken = true;
+              }
+            });
+          }
+        } else {
+          // 对于简单值，尝试完整的 token 转换
+          const { key, token, formattedValue } = tokenParse(node.value);
+          if (token) {
+            newValue = formattedValue.replace(key, `@${token}`);
+            valueHasToken = true;
+          }
+        }
+
+        if (valueHasToken) {
+          node.value = newValue;
           hasToken = true;
         } else if (node.value?.includes('@')) {
           hasToken = true;
         }
       }
     } else if (node.type === 'atrule' && node.name === 'import') {
-      if (node.params === "'~@oceanbase/design/es/theme/index.less'") {
+      if (
+        node.params?.includes("'~@oceanbase/design/es/theme/index.less'") ||
+        node.params?.includes('"~@oceanbase/design/es/theme/index.less"')
+      ) {
         tokenLessImported = true;
-      } else if (node.params === "'~@alipay/ob-ui/es/theme/index.less'") {
+      } else if (
+        node.params?.includes("'~@alipay/ob-ui/es/theme/index.less'") ||
+        node.params?.includes('"~@alipay/ob-ui/es/theme/index.less"')
+      ) {
         node.remove();
       }
     }

package/transforms/style-to-token.js

@@ -65,8 +65,8 @@ function isReactComponentOrHook(functionName, path) {
 // 检查 BlockStatement 中是否包含 token 使用
 function hasTokenUsage(j, path) {
   return (
-    j(path).find(j.Identifier, {
-      name: name => name?.includes('token.'),
+    j(path).find(j.MemberExpression, {
+      object: { name: 'token' },
     }).length > 0
   );
 }
@@ -261,12 +261,71 @@ function processStringLiterals(j, root) {
   return hasChanged;
 }
 
+// 处理模板字符串中的颜色值
+function processTemplateLiterals(j, root) {
+  let hasChanged = false;
+
+  const templateList = root.find(j.TemplateLiteral);
+
+  if (templateList.length > 0) {
+    templateList.forEach(path => {
+      const templateLiteral = path.value;
+      const quasis = templateLiteral.quasis;
+
+      // 检查每个模板字符串片段是否包含需要转换的颜色值
+      for (let i = 0; i < quasis.length; i++) {
+        const quasi = quasis[i];
+        let value = quasi.value.raw;
+        let newValue = value;
+        let valueChanged = false;
+
+        // 查找需要转换的颜色值
+        const colorMatch = newValue.match(
+          /rgba?\([^)]+\)|#[0-9a-fA-F]{3,8}|rgb\([^)]+\)|hsl\([^)]+\)|hsla?\([^)]+\)/g
+        );
+        if (colorMatch) {
+          hasChanged = true;
+          valueChanged = true;
+
+          colorMatch.forEach(match => {
+            const { token } = tokenParse(match);
+            if (token) {
+              newValue = newValue.replace(match, `\${token.${token}}`);
+            }
+          });
+        }
+
+        // 如果值发生了变化，更新模板字符串片段
+        if (valueChanged) {
+          quasi.value.raw = newValue;
+          quasi.value.cooked = newValue;
+        }
+      }
+    });
+
+    // 为包含 token 使用的顶级 BlockStatement 添加导入
+    root
+      .find(j.BlockStatement)
+      .filter(path => isTopBlockStatement(path))
+      .forEach(path => {
+        if (hasTokenUsage(j, path) && !hasUseTokenStatement(j, path)) {
+          addTokenImportToBlockStatement(j, root, path);
+        }
+      });
+  }
+
+  return hasChanged;
+}
+
 function importComponent(j, root, options) {
   let hasChanged = false;
 
   // 处理字符串字面量
   hasChanged = processStringLiterals(j, root) || hasChanged;
 
+  // 处理模板字符串中的颜色值
+  hasChanged = processTemplateLiterals(j, root) || hasChanged;
+
   // 处理对象属性值（如 fontSize: 14）
   const objectPropertyChanged = processObjectProperties(j, root);
   hasChanged = objectPropertyChanged || hasChanged;
@@ -293,8 +352,11 @@ function processObjectProperties(j, root) {
       if (tokenResult) {
         hasChanged = true;
         const isJSXAttribute = path.parentPath.value.type === 'JSXAttribute';
-        const stringValue = wrapJSXValue(`token.${tokenResult.token}`, isJSXAttribute);
-        return j.objectProperty(j.identifier(propertyName), j.identifier(stringValue));
+        const memberExpression = j.memberExpression(
+          j.identifier('token'),
+          j.identifier(tokenResult.token)
+        );
+        return j.objectProperty(j.identifier(propertyName), memberExpression);
       }
       return path.value;
     });
@@ -315,23 +377,22 @@ function processObjectProperties(j, root) {
       if (tokenResult) {
         hasChanged = true;
         const isJSXAttribute = path.parentPath.value.type === 'JSXAttribute';
-        const stringValue = wrapJSXValue(`token.${tokenResult.token}`, isJSXAttribute);
-        return j.objectProperty(j.identifier(propertyName), j.identifier(stringValue));
+        const memberExpression = j.memberExpression(
+          j.identifier('token'),
+          j.identifier(tokenResult.token)
+        );
+        return j.objectProperty(j.identifier(propertyName), memberExpression);
       }
       return path.value;
     });
   }
 
-  // 如果发生了替换，需要添加 token 导入
-  if (hasChanged) {
-    addTokenImportsForObjectProperties(j, root);
-  }
-
   return hasChanged;
 }
 
 // 为对象属性添加 token 导入
 function addTokenImportsForObjectProperties(j, root) {
+  // 处理 BlockStatement 中的 token 使用
   root
     .find(j.BlockStatement)
     .filter(path => isTopBlockStatement(path))
@@ -344,6 +405,31 @@ function addTokenImportsForObjectProperties(j, root) {
         }
       }
     });
+
+  // 处理顶层导出语句中的 token 使用
+  const hasTokenUsageInRoot =
+    root.find(j.MemberExpression, {
+      object: { name: 'token' },
+    }).length > 0;
+
+  if (hasTokenUsageInRoot) {
+    // 检查是否应该添加顶层 token 导入
+    if (shouldAddTopLevelTokenImport(j, root)) {
+      // 检查是否有 @oceanbase/design 的导入
+      const hasOceanbaseImport =
+        root.find(j.ImportDeclaration, {
+          source: { value: '@oceanbase/design' },
+        }).length > 0;
+
+      if (hasOceanbaseImport) {
+        // 如果有 @oceanbase/design 导入，添加到现有导入
+        addTokenToExistingImport(j, root);
+      } else {
+        // 如果没有 @oceanbase/design 导入，添加顶层 token 导入
+        addTopLevelTokenImport(j, root);
+      }
+    }
+  }
 }
 
 // 检查是否应该添加顶层 token 导入
@@ -425,6 +511,33 @@ module.exports = (file, api, options) => {
     processCreateStylesParams(j, root);
   }
 
+  // 为对象属性添加 token 导入（只在没有其他 token 导入逻辑时调用）
+  if (hasChanged) {
+    // 检查是否已经有其他 token 导入逻辑在处理
+    const hasOtherTokenLogic =
+      root.find(j.CallExpression, {
+        callee: { name: 'createStyles' },
+      }).length > 0 ||
+      root.find(j.CallExpression, {
+        callee: {
+          type: 'MemberExpression',
+          object: { name: 'theme' },
+          property: { name: 'useToken' },
+        },
+      }).length > 0 ||
+      root
+        .find(j.ImportDeclaration, {
+          source: { value: '@oceanbase/design' },
+        })
+        .find(j.ImportSpecifier, {
+          imported: { name: 'theme' },
+        }).length > 0;
+
+    if (!hasOtherTokenLogic) {
+      addTokenImportsForObjectProperties(j, root);
+    }
+  }
+
   // 如果有变化，检查是否需要添加 token 导入
   if (hasChanged) {
     // 检查是否有 token 使用

package/transforms/utils/token.js

@@ -47,6 +47,7 @@ const TOKEN_MAP = {
   '#ff4d4f': 'colorError',
   '#f5222d': 'colorError',
   '#f8636b': 'colorError',
+  '#f93939': 'colorError',
   '#d9d9d9': 'colorBorder',
   '#bfbfbf': 'colorBorder',
   '#e8e8e8': 'colorBorder',
@@ -97,6 +98,7 @@ const TOKEN_MAP = {
   'rgba(0,0,0,0.06)': 'colorFillSecondary',
   'rgba(0,0,0,0.04)': 'colorFillTertiary',
   'rgba(0,0,0,0.02)': 'colorFillQuaternary',
+  'rgba(0,0,0,0.03)': 'colorFillQuaternary',
   '#f5f6fa': 'colorBgLayout',
   '#edeff2': 'colorBgLayout',
   // obui legacy style => token
@@ -122,12 +124,12 @@ const TOKEN_MAP = {
   '#cdd5e4': 'colorBorder',
   '#f5f8fe': 'colorBgLayout',
   '#f5f7fa': 'colorBgLayout',
+  '#f8fafe': 'colorBgLayout',
   'rgba(140,140,140,0.1)': 'colorBgLayout',
   'rgb(240,242,245)': 'colorBgLayout',
   '#132039': 'colorText',
   '#364563': 'colorTextSecondary',
   '#8592ad': 'colorTextTertiary',
-  '#f8fafe': 'colorFillQuaternary',
 };
 
 const TOKEN_MAP_KEYS = Object.keys(TOKEN_MAP).map(key => formatValue(key));