@oceanbase/codemod 0.4.16 → 1.0.0-alpha.1

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

@@ -5,13 +5,13 @@ const Demo = () => {
   const { token } = theme.useToken();
   const columns = [{
     render: () => {
-      return <Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />;
+      return <Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} style={{ fontSize: token.fontSize }} />;
     },
   }];
   return (
     <div>
-      <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
-      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
+      <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}`, fontSize: token.fontSize }} />
+      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, fontSize: token.fontSizeSM }}></Button>
     </div>
   );
 };

package/transforms/__testfixtures__/style-to-token/single-function.input.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+function getComponent() {
+  return <div style={{ fontSize: 16 }} />;
+}

package/transforms/__testfixtures__/style-to-token/single-function.output.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { token } from '@oceanbase/design';
+
+function getComponent() {
+  return <div style={{ fontSize: token.fontSizeLG }} />;
+}

package/transforms/__testfixtures__/style-to-token/top-identifier.input.js

@@ -7,4 +7,5 @@ const colorMap = {
   warning: '#faad14',
   error: '#ff4d4f',
   border: '1px solid #d9d9d9',
+  fontSize: 14,
 };

package/transforms/__testfixtures__/style-to-token/top-identifier.output.js

@@ -8,4 +8,5 @@ const colorMap = {
   warning: token.colorWarning,
   error: token.colorError,
   border: `1px solid ${token.colorBorder}`,
+  fontSize: token.fontSize,
 };

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

@@ -3,7 +3,9 @@ import { defineTest } from 'jscodeshift/src/testUtils';
 const testUnit = 'style-to-token';
 const tests = [
   'function-component',
+  'anonymous-function',
   'function',
+  'single-function',
   'hooks',
   'class-component',
   'block-statement',

package/transforms/less-to-token.js

@@ -3,7 +3,7 @@ const fs = require('fs');
 const postcss = require('postcss');
 const postcssLess = require('postcss-less');
 const isDirectory = require('is-directory');
-const { tokenParse } = require('./utils/token');
+const { tokenParse, propertyTokenParse } = require('./utils/token');
 
 /**
  * 搜索目录下所有的less文件
@@ -42,12 +42,22 @@ async function transform(file) {
   // 遍历 AST
   ast.walk(node => {
     if (node.type === 'decl') {
-      const { key, token, formattedValue } = tokenParse(node.value);
-      if (token) {
-        node.value = formattedValue.replace(key, `@${token}`);
-        hasToken = true;
-      } else if (node.value?.includes('@')) {
+      // 首先尝试基于属性的 token 转换
+      // 将 CSS 属性名转换为小驼峰写法（如 font-size -> fontSize）
+      const camelCaseProp = node.prop.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
+      const propertyResult = propertyTokenParse(camelCaseProp, node.value);
+      if (propertyResult) {
+        node.value = `@${propertyResult.token}`;
         hasToken = true;
+      } else {
+        // 然后尝试基于值的 token 转换
+        const { key, token, formattedValue } = tokenParse(node.value);
+        if (token) {
+          node.value = formattedValue.replace(key, `@${token}`);
+          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'") {

package/transforms/style-to-token.js

@@ -1,28 +1,17 @@
 const { upperFirst } = require('lodash');
 const { addSubmoduleImport } = require('./utils');
-const { tokenParse } = require('./utils/token');
+const { tokenParse, propertyTokenParse } = require('./utils/token');
 const { printOptions } = require('./utils/config');
 
+// 判断当前 path 是否为顶层 BlockStatement
 function isTopBlockStatement(path) {
+  // 判断当前节点类型是否为 BlockStatement
   const isBlockStatement = path.value.type === 'BlockStatement';
   let isTop = isBlockStatement && true;
   path = path.parentPath;
+  // 向上遍历父节点，直到遇到 Program 节点
   while (isTop && path.value.type !== 'Program') {
-    // isTopBlockStatement => not wrapped by BlockStatement
-    if (path.value.type === 'BlockStatement') {
-      isTop = false;
-      break;
-    }
-    path = path.parentPath;
-  }
-  return isTop;
-}
-
-function isTopIdentifier(path) {
-  let isTop = true;
-  path = path.parentPath;
-  while (isTop && path.value.type !== 'Program') {
-    // isTopIdentifier => not wrapped by BlockStatement
+    // 如果父节点也是 BlockStatement，则当前不是顶层 BlockStatement
     if (path.value.type === 'BlockStatement') {
       isTop = false;
       break;
@@ -32,6 +21,7 @@ function isTopIdentifier(path) {
   return isTop;
 }
 
+// 判断字符串首字母是否为大写
 function isFirstUpperCase(str) {
   return upperFirst(str) === str;
 }
@@ -42,7 +32,188 @@ function shorthandProperty(property) {
   return property;
 }
 
-function importComponent(j, root, options) {
+// 包装 JSX 属性值
+function wrapJSXValue(value, isJSXAttribute) {
+  return isJSXAttribute ? `{${value}}` : value;
+}
+
+// 检查是否为 React 组件或 Hook
+function isReactComponentOrHook(functionName, path) {
+  // 如果有函数名，检查是否以大写字母开头或以 use 开头
+  if (functionName) {
+    return isFirstUpperCase(functionName) || functionName.startsWith('use');
+  }
+
+  // 对于匿名函数，检查是否是 export default function () {} 的形式
+  // 而不是 export default () => {} 的形式
+  if (path) {
+    const parentType = path.parentPath.value?.type;
+    if (parentType === 'FunctionDeclaration') {
+      // export default function () {} - 认为是 React 组件
+      return true;
+    }
+    if (parentType === 'ArrowFunctionExpression') {
+      // export default () => {} - 不认为是 React 组件
+      return false;
+    }
+  }
+
+  // 其他情况，默认不认为是 React 组件
+  return false;
+}
+
+// 检查 BlockStatement 中是否包含 token 使用
+function hasTokenUsage(j, path) {
+  return (
+    j(path).find(j.Identifier, {
+      name: name => name?.includes('token.'),
+    }).length > 0
+  );
+}
+
+// 检查 BlockStatement 中是否包含 useToken 语句
+function hasUseTokenStatement(j, path) {
+  return (
+    j(path).find(j.Identifier, {
+      name: name => name.includes('useToken'),
+    }).length > 0
+  );
+}
+
+// 获取函数名称
+function getFunctionName(path) {
+  const parentType = path.parentPath.value?.type;
+  if (parentType === 'FunctionDeclaration') {
+    return path.parentPath.value?.id?.name;
+  }
+  if (parentType === 'ArrowFunctionExpression') {
+    return path.parentPath.parentPath?.value?.id?.name;
+  }
+  return undefined;
+}
+
+// 创建 token 对象模式
+function createTokenObjectPattern(j) {
+  return j.objectPattern([
+    shorthandProperty(j.property('init', j.identifier('token'), j.identifier('token'))),
+  ]);
+}
+
+// 检查对象模式中是否包含 token 属性
+function hasTokenInObjectPattern(param) {
+  return param.properties.some(p => p.type === 'ObjectProperty' && p.key && p.key.name === 'token');
+}
+
+function processCreateStylesParams(j, root) {
+  const processedCreateStyles = new Set();
+
+  root
+    .find(j.CallExpression, {
+      callee: { name: 'createStyles' },
+    })
+    .forEach(path => {
+      const arrowFunc = path.value.arguments[0];
+      if (arrowFunc && arrowFunc.type === 'ArrowFunctionExpression') {
+        processedCreateStyles.add(path);
+
+        if (arrowFunc.params.length > 0) {
+          const param = arrowFunc.params[0];
+          if (param.type === 'ObjectPattern' && !hasTokenInObjectPattern(param)) {
+            // 如果参数对象中没有 token 属性，则插入 token 属性
+            param.properties.push(
+              shorthandProperty(j.property('init', j.identifier('token'), j.identifier('token')))
+            );
+          } else if (param.type !== 'ObjectPattern') {
+            // 如果参数不是对象结构，则替换为 { token }
+            arrowFunc.params[0] = createTokenObjectPattern(j);
+          }
+        } else {
+          // 如果没有参数，则插入 { token }
+          arrowFunc.params = [createTokenObjectPattern(j)];
+        }
+      }
+    });
+
+  return processedCreateStyles;
+}
+
+// 添加 token 导入到 BlockStatement
+function addTokenImportToBlockStatement(j, root, path) {
+  const includeJSXElement = j(path).find(j.JSXElement).length > 0;
+  const functionName = getFunctionName(path);
+
+  if (includeJSXElement && isReactComponentOrHook(functionName, path)) {
+    const insertString = 'const { token } = theme.useToken()';
+    path.get('body').value.unshift(j.expressionStatement(j.identifier(insertString)));
+    addSubmoduleImport(j, root, {
+      moduleName: '@oceanbase/design',
+      importedName: 'theme',
+      importKind: 'value',
+    });
+  } else if (includeJSXElement) {
+    // 对于非 React 组件的函数，直接导入 token
+    addSubmoduleImport(j, root, {
+      moduleName: '@oceanbase/design',
+      importedName: 'token',
+      importKind: 'value',
+      after: 'react',
+    });
+  }
+}
+
+// 为函数组件和类组件添加 token 到现有导入
+function addTokenToExistingImport(j, root) {
+  // 检查是否已经导入了 useToken 或 theme
+  const hasUseTokenImport =
+    root
+      .find(j.ImportDeclaration, {
+        source: { value: '@oceanbase/design' },
+      })
+      .find(j.ImportSpecifier, {
+        imported: { name: 'useToken' },
+      }).length > 0;
+
+  const hasThemeImport =
+    root
+      .find(j.ImportDeclaration, {
+        source: { value: '@oceanbase/design' },
+      })
+      .find(j.ImportSpecifier, {
+        imported: { name: 'theme' },
+      }).length > 0;
+
+  // 如果已经有 useToken 或 theme 导入，不需要添加 token 导入
+  if (hasUseTokenImport || hasThemeImport) {
+    return;
+  }
+
+  // 查找所有从 @oceanbase/design 的导入
+  const importDeclarations = root.find(j.ImportDeclaration, {
+    source: { value: '@oceanbase/design' },
+  });
+
+  if (importDeclarations.length === 0) {
+    return;
+  }
+
+  importDeclarations.forEach(importPath => {
+    const specifiers = importPath.value.specifiers;
+
+    // 检查是否已经有 token 导入
+    const hasTokenImport = specifiers.some(
+      spec => spec.type === 'ImportSpecifier' && spec.imported.name === 'token'
+    );
+
+    if (!hasTokenImport) {
+      // 添加 token 导入
+      const tokenSpecifier = j.importSpecifier(j.identifier('token'));
+      specifiers.push(tokenSpecifier);
+    }
+  });
+}
+
+// 处理字符串字面量的 token 替换
+function processStringLiterals(j, root) {
   let hasChanged = false;
 
   const stringList = root.find(j.StringLiteral, {
@@ -51,130 +222,197 @@ function importComponent(j, root, options) {
       return !!token;
     },
   });
+
   if (stringList.length > 0) {
-    // replace fixed style to token
     stringList.replaceWith(path => {
       hasChanged = true;
       const { key, token, formattedValue } = tokenParse(path.value.value);
       const isJSXAttribute = path.parentPath.value.type === 'JSXAttribute';
-      let stringValue = `token.${token}`;
-      let templateStringValue = `\`${formattedValue.replace(key, `\${token.${token}}`)}\``;
-      // add {} wrapper for JSXAttribute
-      if (isJSXAttribute) {
-        stringValue = `{${stringValue}}`;
-        templateStringValue = `{${templateStringValue}}`;
+
+      if (formattedValue === key) {
+        // 完全匹配的情况，直接返回 token.xxx
+        const memberExpression = j.memberExpression(j.identifier('token'), j.identifier(token));
+        return isJSXAttribute ? j.jsxExpressionContainer(memberExpression) : memberExpression;
+      } else {
+        // 部分匹配的情况，返回模板字符串
+        const beforeToken = formattedValue.replace(key, '');
+        const templateString = j.templateLiteral(
+          [
+            j.templateElement({ raw: beforeToken, cooked: beforeToken }, false),
+            j.templateElement({ raw: '', cooked: '' }, true),
+          ],
+          [j.memberExpression(j.identifier('token'), j.identifier(token))]
+        );
+        return isJSXAttribute ? j.jsxExpressionContainer(templateString) : templateString;
       }
-      return formattedValue === key ? j.identifier(stringValue) : j.identifier(templateStringValue);
     });
 
+    // 为包含 token 使用的顶级 BlockStatement 添加导入
     root
       .find(j.BlockStatement)
-      // avoid duplicate insert for nested block statement
       .filter(path => isTopBlockStatement(path))
       .forEach(path => {
-        const includeToken =
-          j(path).find(j.Identifier, {
-            name: name => name?.includes('token.'),
-          }).length > 0;
-        if (includeToken) {
-          const includeJSXElement = j(path).find(j.JSXElement).length > 0;
-          const includeUseTokenStatement =
-            j(path).find(j.Identifier, {
-              name: name => name.includes('useToken'),
-            }).length > 0;
-          const parentType = path.parentPath.value?.type;
-          const functionName =
-            parentType === 'FunctionDeclaration'
-              ? path.parentPath.value?.id?.name
-              : parentType === 'ArrowFunctionExpression'
-                ? path.parentPath.parentPath?.value?.id?.name
-                : undefined;
-          const calleeName = path.parentPath.parentPath?.parentPath?.value?.callee?.name;
-          if (
-            includeJSXElement &&
-            functionName &&
-            // React function component or React hooks
-            (isFirstUpperCase(functionName) || functionName.startsWith('use'))
-          ) {
-            // avoid duplicate insert when it's existed
-            if (!includeUseTokenStatement) {
-              const insertString = 'const { token } = theme.useToken()';
-              // insert `const { token } = theme.useToken()`
-              path.get('body').value.unshift(j.expressionStatement(j.identifier(insertString)));
-              // import `theme` from @oceanbase/design
-              addSubmoduleImport(j, root, {
-                moduleName: '@oceanbase/design',
-                importedName: 'theme',
-                importKind: 'value',
-              });
-            }
-          }
-          // antd-style createStyles
-          else if (parentType === 'ArrowFunctionExpression' && calleeName === 'createStyles') {
-            const arrowFunc = path.parentPath?.parentPath?.value?.[0];
-            if (arrowFunc && arrowFunc.type === 'ArrowFunctionExpression') {
-              let hasToken = false;
-              if (arrowFunc.params.length > 0) {
-                const param = arrowFunc.params[0];
-                if (param.type === 'ObjectPattern') {
-                  hasToken = param.properties.some(
-                    p => p.type === 'ObjectProperty' && p.key && p.key.name === 'token'
-                  );
-                  // 如果参数对象中没有 token 属性，则插入 token 属性
-                  if (!hasToken) {
-                    param.properties.push(
-                      shorthandProperty(
-                        j.property('init', j.identifier('token'), j.identifier('token'))
-                      )
-                    );
-                  }
-                } else {
-                  // 如果参数不是对象结构，则替换为 { token }
-                  arrowFunc.params[0] = j.objectPattern([
-                    shorthandProperty(
-                      j.property('init', j.identifier('token'), j.identifier('token'))
-                    ),
-                  ]);
-                }
-              } else {
-                // 如果没有参数，则插入 { token }
-                arrowFunc.params = [
-                  j.objectPattern([
-                    shorthandProperty(
-                      j.property('init', j.identifier('token'), j.identifier('token'))
-                    ),
-                  ]),
-                ];
-              }
-            }
-          } else {
-            // React class component and static file (not react component)
-            // import `token` from @oceanbase/design
-            addSubmoduleImport(j, root, {
-              moduleName: '@oceanbase/design',
-              importedName: 'token',
-              importKind: 'value',
-            });
-          }
+        if (hasTokenUsage(j, path) && !hasUseTokenStatement(j, path)) {
+          addTokenImportToBlockStatement(j, root, path);
         }
       });
+  }
 
-    root
-      .find(j.Identifier)
-      .filter(path => isTopIdentifier(path) && path.value.name?.includes('token.'))
-      .forEach(() => {
-        // import `token` from @oceanbase/design
-        addSubmoduleImport(j, root, {
-          moduleName: '@oceanbase/design',
-          importedName: 'token',
-          importKind: 'value',
-        });
-      });
+  return hasChanged;
+}
+
+function importComponent(j, root, options) {
+  let hasChanged = false;
+
+  // 处理字符串字面量
+  hasChanged = processStringLiterals(j, root) || hasChanged;
+
+  // 处理对象属性值（如 fontSize: 14）
+  const objectPropertyChanged = processObjectProperties(j, root);
+  hasChanged = objectPropertyChanged || hasChanged;
+
+  return hasChanged;
+}
+
+// 处理对象属性
+function processObjectProperties(j, root) {
+  let hasChanged = false;
+
+  // 处理数字字面量
+  const numericPropertyList = root.find(j.ObjectProperty, {
+    key: { type: 'Identifier' },
+    value: { type: 'NumericLiteral' },
+  });
+
+  if (numericPropertyList.length > 0) {
+    numericPropertyList.replaceWith(path => {
+      const propertyName = path.value.key.name;
+      const propertyValue = path.value.value.value;
+
+      const tokenResult = propertyTokenParse(propertyName, propertyValue);
+      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));
+      }
+      return path.value;
+    });
+  }
+
+  // 处理字符串字面量（如 fontSize: '14px'）
+  const stringPropertyList = root.find(j.ObjectProperty, {
+    key: { type: 'Identifier' },
+    value: { type: 'StringLiteral' },
+  });
+
+  if (stringPropertyList.length > 0) {
+    stringPropertyList.replaceWith(path => {
+      const propertyName = path.value.key.name;
+      const propertyValue = path.value.value.value;
+
+      const tokenResult = propertyTokenParse(propertyName, propertyValue);
+      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));
+      }
+      return path.value;
+    });
+  }
+
+  // 如果发生了替换，需要添加 token 导入
+  if (hasChanged) {
+    addTokenImportsForObjectProperties(j, root);
   }
 
   return hasChanged;
 }
 
+// 为对象属性添加 token 导入
+function addTokenImportsForObjectProperties(j, root) {
+  root
+    .find(j.BlockStatement)
+    .filter(path => isTopBlockStatement(path))
+    .forEach(path => {
+      if (hasTokenUsage(j, path) && !hasUseTokenStatement(j, path)) {
+        const calleeName = path.parentPath.parentPath?.parentPath?.value?.callee?.name;
+        // 跳过 createStyles 的情况，因为已经在上面处理了
+        if (calleeName !== 'createStyles') {
+          addTokenImportToBlockStatement(j, root, path);
+        }
+      }
+    });
+}
+
+// 检查是否应该添加顶层 token 导入
+function shouldAddTopLevelTokenImport(j, root) {
+  // 检查是否有 createStyles 调用
+  const hasCreateStyles =
+    root.find(j.CallExpression, {
+      callee: { name: 'createStyles' },
+    }).length > 0;
+
+  // 检查是否使用了 theme.useToken()
+  const hasThemeUseToken =
+    root.find(j.CallExpression, {
+      callee: {
+        type: 'MemberExpression',
+        object: { name: 'theme' },
+        property: { name: 'useToken' },
+      },
+    }).length > 0;
+
+  // 检查是否导入了 theme
+  const hasThemeImport =
+    root
+      .find(j.ImportDeclaration, {
+        source: { value: '@oceanbase/design' },
+      })
+      .find(j.ImportSpecifier, {
+        imported: { name: 'theme' },
+      }).length > 0;
+
+  // 检查是否已经导入了 token
+  const hasTokenImport =
+    root
+      .find(j.ImportDeclaration, {
+        source: { value: '@oceanbase/design' },
+      })
+      .find(j.ImportSpecifier, {
+        imported: { name: 'token' },
+      }).length > 0;
+
+  // 检查是否有 token.xxx 的使用
+  const hasTokenUsage =
+    root.find(j.MemberExpression, {
+      object: { name: 'token' },
+    }).length > 0;
+
+  // 如果已经有 token 导入，不需要添加
+  if (hasTokenImport) {
+    return false;
+  }
+
+  // 如果有 createStyles 或 theme.useToken() 或 theme 导入，不需要添加顶层 token 导入
+  if (hasCreateStyles || hasThemeUseToken || hasThemeImport) {
+    return false;
+  }
+
+  // 如果有 token.xxx 的使用，需要添加导入
+  return hasTokenUsage;
+}
+
+// 添加顶层 token 导入
+function addTopLevelTokenImport(j, root) {
+  addSubmoduleImport(j, root, {
+    moduleName: '@oceanbase/design',
+    importedName: 'token',
+    importKind: 'value',
+  });
+}
+
 module.exports = (file, api, options) => {
   const j = api.jscodeshift;
   const root = j(file.source);
@@ -182,5 +420,38 @@ module.exports = (file, api, options) => {
   let hasChanged = false;
   hasChanged = importComponent(j, root, options) || hasChanged;
 
+  // 处理 createStyles 函数的参数
+  if (hasChanged) {
+    processCreateStylesParams(j, root);
+  }
+
+  // 如果有变化，检查是否需要添加 token 导入
+  if (hasChanged) {
+    // 检查是否有 token 使用
+    const hasTokenUsage =
+      root.find(j.MemberExpression, {
+        object: { name: 'token' },
+      }).length > 0;
+
+    if (hasTokenUsage) {
+      // 使用 shouldAddTopLevelTokenImport 函数来判断是否需要添加 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);
+        }
+      }
+    }
+  }
+
   return hasChanged ? root.toSource(options.printOptions || printOptions) : null;
 };

package/transforms/utils/index.js

@@ -136,6 +136,14 @@ function addModuleImport(j, root, { pkgName, importSpecifier, importKind, before
             return 1;
           }
 
+          // 特殊处理：token 总是放在最后
+          if (a.imported && a.imported.name === 'token') {
+            return 1;
+          }
+          if (b.imported && b.imported.name === 'token') {
+            return -1;
+          }
+
           return a.imported.name.localeCompare(b.imported.name);
         });
         const importStatement = j.importDeclaration(mergedImportSpecifiers, j.literal(pkgName));