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

package/transforms/sass-to-cssvar.js

@@ -0,0 +1,194 @@
+const path = require('path');
+const fs = require('fs');
+const postcss = require('postcss');
+const postcssScss = require('postcss-scss');
+const isDirectory = require('is-directory');
+const { shouldExcludePath } = require('./utils/path-utils');
+
+/**
+ * Get SASS/SCSS tokens from @oceanbase/design theme Less file
+ * Since we're converting SASS variables to CSS variables based on the same design tokens,
+ * we can reuse the Less token list
+ */
+function getSassTokensFromTheme() {
+  try {
+    // Try to find the Less theme file from @oceanbase/design
+    const themeLessPath = require.resolve('@oceanbase/design/es/theme/style/default.less');
+    const content = fs.readFileSync(themeLessPath, 'utf-8');
+
+    // Extract all @variableName: definitions
+    const tokenRegex = /@([a-zA-Z][a-zA-Z0-9]*):/g;
+    const tokens = new Set();
+    let match;
+    while ((match = tokenRegex.exec(content)) !== null) {
+      tokens.add(match[1]);
+    }
+    return Array.from(tokens);
+  } catch (e) {
+    // Fallback: try lib path
+    try {
+      const themeLessPath = require.resolve('@oceanbase/design/lib/theme/style/default.less');
+      const content = fs.readFileSync(themeLessPath, 'utf-8');
+
+      const tokenRegex = /@([a-zA-Z][a-zA-Z0-9]*):/g;
+      const tokens = new Set();
+      let match;
+      while ((match = tokenRegex.exec(content)) !== null) {
+        tokens.add(match[1]);
+      }
+      return Array.from(tokens);
+    } catch (e2) {
+      // Final fallback: use theme token object
+      try {
+        const { default: defaultTheme } = require('@oceanbase/design/lib/theme/default');
+        return Object.keys(defaultTheme.token || {});
+      } catch (e3) {
+        console.warn('Warning: Could not load tokens from @oceanbase/design, using empty list');
+        return [];
+      }
+    }
+  }
+}
+
+// Get SASS variable tokens dynamically from @oceanbase/design theme
+const SASS_TOKENS = getSassTokensFromTheme();
+
+/**
+ * Convert camelCase to kebab-case
+ * @param {string} str - camelCase string
+ * @returns {string} - kebab-case string
+ */
+function camelToKebab(str) {
+  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
+
+/**
+ * Find all sass/scss files in the directory
+ * @param {string} dir - Directory or file path
+ * @returns {string[]} - Array of file paths
+ */
+const findAllSassFiles = dir => {
+  const sassFiles = [];
+  const isDir = isDirectory.sync(dir);
+  if (isDir) {
+    const files = fs.readdirSync(dir);
+    files.forEach(file => {
+      const filePath = path.join(dir, file);
+      if (isDirectory.sync(filePath)) {
+        if (shouldExcludePath(filePath)) {
+          return;
+        }
+        sassFiles.push(...findAllSassFiles(filePath));
+      } else if (file.endsWith('.sass') || file.endsWith('.scss')) {
+        sassFiles.push(filePath);
+      }
+    });
+  } else if (dir.endsWith('.sass') || dir.endsWith('.scss')) {
+    sassFiles.push(dir);
+  }
+  return sassFiles;
+};
+
+/**
+ * Transform SASS variable to CSS variable
+ * @param {string} value - CSS value that may contain SASS variables
+ * @param {string} prefix - CSS variable prefix (default: 'ant')
+ * @returns {string} - Transformed value with CSS variables
+ */
+function transformSassVarToCssVar(value, prefix = 'ant') {
+  if (!value || typeof value !== 'string') {
+    return value;
+  }
+
+  let result = value;
+
+  // Match SASS variables like $colorPrimary, $fontSize, etc.
+  // Support both $tokenName and #{tokenName} syntax
+  const sassVarRegex = /\$([a-zA-Z][a-zA-Z0-9]*)/g;
+
+  result = result.replace(sassVarRegex, (match, varName) => {
+    // Check if this is a known token
+    if (SASS_TOKENS.includes(varName)) {
+      const kebabName = camelToKebab(varName);
+      return `var(--${prefix}-${kebabName})`;
+    }
+    // Return original if not a known token
+    return match;
+  });
+
+  return result;
+}
+
+/**
+ * Transform a single SASS/SCSS file to use CSS variables
+ * @param {string} file - File path
+ * @param {object} options - Transform options
+ * @param {string} options.prefix - CSS variable prefix (default: 'ant')
+ * @returns {Promise<{content: string, hasTransformations: boolean}>} - Transformed content
+ */
+async function transform(file, options = {}) {
+  const { prefix = 'ant' } = options;
+  const content = fs.readFileSync(file, 'utf-8');
+  const { root: ast } = await postcss([]).process(content, {
+    syntax: postcssScss,
+    from: file,
+  });
+
+  // Track whether any transformations were made
+  let hasTransformations = false;
+
+  // Traverse AST
+  ast.walk(node => {
+    if (node.type === 'decl') {
+      // Transform property values that contain SASS variables
+      const newValue = transformSassVarToCssVar(node.value, prefix);
+      if (newValue !== node.value) {
+        node.value = newValue;
+        hasTransformations = true;
+      }
+    } else if (node.type === 'atrule') {
+      // Transform SASS variables in at-rule params (e.g., media queries)
+      if (node.params) {
+        const newParams = transformSassVarToCssVar(node.params, prefix);
+        if (newParams !== node.params) {
+          node.params = newParams;
+          hasTransformations = true;
+        }
+      }
+    }
+  });
+
+  return {
+    content: ast.toString(postcssScss.stringify),
+    hasTransformations,
+  };
+}
+
+/**
+ * Run the sass-to-cssvar transformation
+ * @param {string} file - File or directory path
+ * @param {object} options - Transform options
+ * @param {string} options.prefix - CSS variable prefix (default: 'ant')
+ */
+async function sassToCssvar(file, options = {}) {
+  const { prefix = 'ant' } = options;
+  const allSassFiles = findAllSassFiles(file);
+
+  for (const item of allSassFiles) {
+    const { content, hasTransformations } = await transform(item, { prefix });
+
+    if (hasTransformations) {
+      fs.writeFileSync(item, content);
+      console.log(`  Transformed: ${item}`);
+    }
+  }
+}
+
+module.exports = {
+  transform,
+  sassToCssvar,
+  transformSassVarToCssVar,
+  getSassTokensFromTheme,
+  camelToKebab,
+  SASS_TOKENS,
+};

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
   );
 }
@@ -156,7 +156,6 @@ function addTokenImportToBlockStatement(j, root, path) {
       moduleName: '@oceanbase/design',
       importedName: 'token',
       importKind: 'value',
-      after: 'react',
     });
   }
 }
@@ -261,12 +260,130 @@ 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;
+      const expressions = templateLiteral.expressions || [];
+
+      // 检查每个模板字符串片段是否包含需要转换的颜色值
+      let needsReconstruction = false;
+      const newQuasis = [];
+      const newExpressions = [];
+
+      for (let i = 0; i < quasis.length; i++) {
+        const quasi = quasis[i];
+        let value = quasi.value.raw;
+
+        // 查找需要转换的颜色值
+        const colorMatch = value.match(
+          /rgba?\([^)]+\)|#[0-9a-fA-F]{3,8}|rgb\([^)]+\)|hsl\([^)]+\)|hsla?\([^)]+\)/g
+        );
+        if (colorMatch) {
+          hasChanged = true;
+          needsReconstruction = true;
+
+          // 收集所有需要替换的匹配项及其 token
+          const replacements = [];
+          colorMatch.forEach(match => {
+            const { token } = tokenParse(match);
+            if (token) {
+              const index = value.indexOf(match);
+              replacements.push({ index, match, token });
+            }
+          });
+
+          // 按位置排序，从后往前处理以避免位置偏移
+          replacements.sort((a, b) => b.index - a.index);
+
+          let processedValue = value;
+          replacements.forEach(({ index, match, token }) => {
+            const before = processedValue.substring(0, index);
+            const after = processedValue.substring(index + match.length);
+
+            // 如果前面有内容，创建一个 quasi
+            if (before) {
+              newQuasis.push(j.templateElement({ raw: before, cooked: before }, false));
+            }
+
+            // 创建 token 表达式
+            newExpressions.push(j.memberExpression(j.identifier('token'), j.identifier(token)));
+
+            // 剩余部分继续处理
+            processedValue = after;
+          });
+
+          // 如果有剩余部分，添加到 quasis
+          if (processedValue || newQuasis.length === 0) {
+            const isTail = i === quasis.length - 1 && expressions.length === 0;
+            newQuasis.push(
+              j.templateElement({ raw: processedValue || '', cooked: processedValue || '' }, isTail)
+            );
+          } else if (newQuasis.length > 0) {
+            // 确保最后一个 quasi 标记为 tail（如果这是最后一个 quasi 且没有更多表达式）
+            const isTail = i === quasis.length - 1 && expressions.length === 0;
+            if (isTail) {
+              const lastQuasi = newQuasis[newQuasis.length - 1];
+              lastQuasi.tail = true;
+            }
+          }
+        } else {
+          // 如果没有颜色值需要转换，保持原样
+          newQuasis.push(quasi);
+          if (i < expressions.length) {
+            newExpressions.push(expressions[i]);
+          }
+        }
+      }
+
+      // 如果需要重构，替换整个模板字符串
+      if (needsReconstruction) {
+        // 确保最后一个 quasi 标记为 tail
+        if (newQuasis.length > 0) {
+          const lastQuasi = newQuasis[newQuasis.length - 1];
+          lastQuasi.tail = true;
+        }
+
+        // 合并原有的表达式（如果有）
+        const allExpressions = [...newExpressions];
+        // 添加原有的表达式（在 quasis 之后）
+        for (let i = 0; i < expressions.length; i++) {
+          allExpressions.push(expressions[i]);
+        }
+
+        path.replace(j.templateLiteral(newQuasis, allExpressions));
+      }
+    });
+
+    // 为包含 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 +410,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 +435,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 +463,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 +569,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/path-utils.js

@@ -0,0 +1,40 @@
+/**
+ * Common directories to exclude when traversing files
+ * These are typically build outputs, caches, dependencies, and temporary directories
+ */
+const EXCLUDED_DIRS = [
+  'node_modules',
+  '.umi',
+  '.umi-production',
+  '.git',
+  'dist',
+  'build',
+  'coverage',
+  '.cache',
+  '.next',
+  '.turbo',
+  '.vite',
+  '.nuxt',
+  '.output',
+  '.temp',
+  '.tmp',
+  'temp',
+  'tmp',
+];
+
+/**
+ * Check if a path should be excluded
+ * @param {string} filePath - File path to check
+ * @returns {boolean} - True if should be excluded
+ */
+function shouldExcludePath(filePath) {
+  const normalizedPath = filePath.replace(/\\/g, '/');
+  return EXCLUDED_DIRS.some(
+    dir => normalizedPath.includes(`/${dir}/`) || normalizedPath.endsWith(`/${dir}`)
+  );
+}
+
+module.exports = {
+  EXCLUDED_DIRS,
+  shouldExcludePath,
+};

package/transforms/utils/token.js

@@ -36,17 +36,24 @@ const TOKEN_MAP = {
   '#1890ff': 'colorInfo',
   '#40a9ff': 'colorInfo',
   '#006aff': 'colorInfo',
+  '#1843ff': 'colorInfo',
+  '#597ef7': 'colorInfo',
   '#f7f9fb': 'colorInfoBg',
+  '#91a9f8': 'colorInfoBg',
   '#e6f7ff': 'colorInfoBgHover',
   '#f3f9ff': 'colorInfoBgHover',
   '#e6f7ff': 'colorInfoBgHover',
   '#73d13d': 'colorSuccess',
   '#52c41a': 'colorSuccess',
   '#faad14': 'colorWarning',
+  '#ffa940': 'colorWarning',
   '#fef6e7': 'colorWarningBg',
+  '#fed59c': 'colorWarningBg',
   '#ff4d4f': 'colorError',
   '#f5222d': 'colorError',
   '#f8636b': 'colorError',
+  '#f93939': 'colorError',
+  '#eb4444': 'colorError',
   '#d9d9d9': 'colorBorder',
   '#bfbfbf': 'colorBorder',
   '#e8e8e8': 'colorBorder',
@@ -67,7 +74,9 @@ const TOKEN_MAP = {
   'rgba(0,0,0,0.85)': 'colorText',
   'rgba(0,0,0,0.65)': 'colorTextSecondary',
   'rgba(0,0,0,0.45)': 'colorTextTertiary',
-  '#5c6b8a': 'colorTextTertiary',
+  '#5c6b8a': 'colorTextSecondary',
+  '#5C6B8A': 'colorTextSecondary',
+  '#ced5e3': '@colorTextPlaceholder',
   'rgba(0,0,0,0.25)': 'colorTextQuaternary',
   'rgba(0,0,0,.85)': 'colorText',
   'rgba(0,0,0,.65)': 'colorTextSecondary',
@@ -97,6 +106,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 +132,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));
@@ -170,6 +180,18 @@ const PROPERTY_TOKEN_MAP = {
     15: 'fontSizeLG',
     16: 'fontSizeLG',
   },
+  fontWeight: {
+    300: 'fontWeightWeak',
+    400: 'fontWeight',
+    500: 'fontWeightStrong',
+    600: 'fontWeightStrong',
+  },
+  borderRadius: {
+    2: 'borderRadiusSM',
+    4: 'borderRadius',
+    6: 'borderRadiusMD',
+    8: 'borderRadiusLG',
+  },
 };
 
 function propertyTokenParse(propertyName, value) {