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

package/transforms/less-to-cssvar.js

@@ -0,0 +1,505 @@
+const path = require('path');
+const fs = require('fs');
+const postcss = require('postcss');
+const postcssLess = require('postcss-less');
+const isDirectory = require('is-directory');
+const { glob } = require('glob');
+const { shouldExcludePath } = require('./utils/path-utils');
+
+/**
+ * Get Less tokens from @oceanbase/design theme Less file
+ * This reads all @variableName definitions from the theme file
+ */
+function getLessTokensFromTheme() {
+  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 Less variable tokens dynamically from @oceanbase/design theme
+const LESS_TOKENS = getLessTokensFromTheme();
+
+/**
+ * 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 less files in the directory
+ * @param dir
+ * @returns
+ */
+const findAllLessFiles = dir => {
+  const lessFiles = [];
+  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;
+        }
+        lessFiles.push(...findAllLessFiles(filePath));
+      } else if (file.endsWith('.less')) {
+        lessFiles.push(filePath);
+      }
+    });
+  } else if (dir.endsWith('.less')) {
+    lessFiles.push(dir);
+  }
+  return lessFiles;
+};
+
+/**
+ * Transform Less variable to CSS variable
+ * @param {string} value - CSS value that may contain Less variables
+ * @param {string} prefix - CSS variable prefix (default: 'ant')
+ * @returns {string} - Transformed value with CSS variables
+ */
+function transformLessVarToCssVar(value, prefix = 'ant') {
+  if (!value || typeof value !== 'string') {
+    return value;
+  }
+
+  let result = value;
+
+  // Match Less variables like @colorPrimary, @fontSize, etc.
+  // Support both @tokenName and @{tokenName} syntax
+  const lessVarRegex = /@\{?([a-zA-Z][a-zA-Z0-9]*)\}?/g;
+
+  result = result.replace(lessVarRegex, (match, varName) => {
+    // Check if this is a known token
+    if (LESS_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 Less 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<string>} - 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: postcssLess,
+    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 Less variables
+      const newValue = transformLessVarToCssVar(node.value, prefix);
+      if (newValue !== node.value) {
+        node.value = newValue;
+        hasTransformations = true;
+      }
+    } else if (node.type === 'atrule') {
+      // Remove the theme import
+      if (node.name === 'import') {
+        if (
+          node.params?.includes("'~@oceanbase/design/es/theme/index.less'") ||
+          node.params?.includes('"~@oceanbase/design/es/theme/index.less"') ||
+          node.params?.includes("'~@alipay/ob-ui/es/theme/index.less'") ||
+          node.params?.includes('"~@alipay/ob-ui/es/theme/index.less"')
+        ) {
+          node.remove();
+          hasTransformations = true;
+        }
+      }
+      // Transform Less variables in at-rule params (e.g., media queries)
+      if (node.params) {
+        const newParams = transformLessVarToCssVar(node.params, prefix);
+        if (newParams !== node.params) {
+          node.params = newParams;
+          hasTransformations = true;
+        }
+      }
+    }
+  });
+
+  return {
+    content: ast.toString(postcssLess.stringify),
+    hasTransformations,
+  };
+}
+
+/**
+ * Convert Less single-line comments (//) to CSS block comments
+ * @param {string} content - File content
+ * @returns {string} - Content with converted comments
+ */
+function convertLessCommentsToCss(content) {
+  // Convert // comments to /* */ comments
+  // Match // at the start of a line or after whitespace, but not inside strings or existing block comments
+  const lines = content.split('\n');
+  const result = lines.map(line => {
+    // Skip if line is inside a block comment or contains a URL
+    if (line.includes('://')) {
+      // Handle URLs - only convert comments that are not part of URLs
+      return line.replace(/(?<!:)\/\/(.*)$/gm, (match, comment) => {
+        // Check if this is really a comment (not a URL protocol)
+        const beforeMatch = line.substring(0, line.lastIndexOf(match));
+        if (beforeMatch.match(/https?:$/) || beforeMatch.match(/url\([^)]*$/)) {
+          return match; // Keep as is for URLs
+        }
+        return `/* ${comment.trim()} */`;
+      });
+    }
+    // Convert standalone // comments
+    return line.replace(/^(\s*)\/\/(.*)$/, '$1/* $2 */').replace(/(\s)\/\/(.*)$/, '$1/* $2 */');
+  });
+  return result.join('\n');
+}
+
+/**
+ * Update import references in JS/TS files
+ * @param {string} baseDir - Base directory to search for JS/TS files
+ * @param {Array<{oldPath: string, newPath: string}>} renamedFiles - List of renamed files
+ */
+async function updateImportReferences(baseDir, renamedFiles) {
+  if (renamedFiles.length === 0) return;
+
+  // Find all JS/TS/JSX/TSX files
+  const jsFiles = await glob('**/*.{js,jsx,ts,tsx}', {
+    cwd: baseDir,
+    absolute: true,
+    ignore: ['**/node_modules/**', '**/.umi/**', '**/.umi-production/**'],
+  });
+
+  for (const jsFile of jsFiles) {
+    let content = fs.readFileSync(jsFile, 'utf-8');
+    let hasChanges = false;
+
+    for (const { oldPath, newPath } of renamedFiles) {
+      // Calculate relative paths from the JS file to the Less/CSS files
+      const jsFileDir = path.dirname(jsFile);
+
+      // Get the relative path from the JS file to the old Less file
+      let relativeOldPath = path.relative(jsFileDir, oldPath);
+      let relativeNewPath = path.relative(jsFileDir, newPath);
+
+      // Normalize path separators for the regex
+      relativeOldPath = relativeOldPath.replace(/\\/g, '/');
+      relativeNewPath = relativeNewPath.replace(/\\/g, '/');
+
+      // Add ./ prefix if needed
+      if (!relativeOldPath.startsWith('.') && !relativeOldPath.startsWith('/')) {
+        relativeOldPath = './' + relativeOldPath;
+      }
+      if (!relativeNewPath.startsWith('.') && !relativeNewPath.startsWith('/')) {
+        relativeNewPath = './' + relativeNewPath;
+      }
+
+      // Also handle the case without ./ prefix
+      const relativeOldPathNoDot = relativeOldPath.replace(/^\.\//, '');
+      const relativeNewPathNoDot = relativeNewPath.replace(/^\.\//, '');
+
+      // Create regex patterns to match import statements
+      // Match: import './style.less', import "./style.less", require('./style.less'), require("./style.less")
+      const patterns = [
+        // With ./ prefix
+        new RegExp(`(['"])${escapeRegExp(relativeOldPath)}\\1`, 'g'),
+        // Without ./ prefix (for some bundler configurations)
+        new RegExp(`(['"])${escapeRegExp(relativeOldPathNoDot)}\\1`, 'g'),
+      ];
+
+      for (const pattern of patterns) {
+        const newContent = content.replace(pattern, (match, quote) => {
+          return `${quote}${relativeNewPath}${quote}`;
+        });
+        if (newContent !== content) {
+          content = newContent;
+          hasChanges = true;
+        }
+      }
+    }
+
+    if (hasChanges) {
+      fs.writeFileSync(jsFile, content);
+      console.log(`  Updated imports: ${jsFile}`);
+    }
+  }
+}
+
+/**
+ * Escape special regex characters in a string
+ * @param {string} string - String to escape
+ * @returns {string} - Escaped string
+ */
+function escapeRegExp(string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+// Common global style file name patterns (case insensitive)
+const GLOBAL_STYLE_PATTERNS = [
+  /^global\.less$/i,
+  /^globals\.less$/i,
+  /^reset\.less$/i,
+  /^normalize\.less$/i,
+  /^base\.less$/i,
+  /^common\.less$/i,
+  /^app\.less$/i,
+  /^index\.less$/i,
+  /^main\.less$/i,
+  /^style\.less$/i,
+  /^styles\.less$/i,
+  /^variables\.less$/i,
+  /^mixins\.less$/i,
+  /^theme\.less$/i,
+];
+
+/**
+ * Check if a Less file is imported as a CSS Module in any JS/TS file
+ * CSS Module import: import styles from './xxx.less'
+ * Global import: import './xxx.less'
+ * @param {string} lessFilePath - Path to the Less file
+ * @param {string} baseDir - Base directory to search for JS/TS files
+ * @returns {Promise<boolean>} - True if imported as CSS Module, false if global or not found
+ */
+async function isImportedAsCssModule(lessFilePath, baseDir) {
+  const fileName = path.basename(lessFilePath);
+
+  // Check if file name matches common global style patterns
+  for (const pattern of GLOBAL_STYLE_PATTERNS) {
+    if (pattern.test(fileName)) {
+      return false;
+    }
+  }
+
+  // Check if file already has .module in the name
+  if (/\.module\.less$/.test(lessFilePath)) {
+    return true;
+  }
+
+  try {
+    // Find all JS/TS/JSX/TSX files
+    const jsFiles = await glob('**/*.{js,jsx,ts,tsx}', {
+      cwd: baseDir,
+      absolute: true,
+      ignore: ['**/node_modules/**', '**/.umi/**', '**/.umi-production/**'],
+    });
+
+    for (const jsFile of jsFiles) {
+      const content = fs.readFileSync(jsFile, 'utf-8');
+      const jsFileDir = path.dirname(jsFile);
+
+      // Calculate relative path from JS file to Less file
+      let relativePath = path.relative(jsFileDir, lessFilePath).replace(/\\/g, '/');
+      if (!relativePath.startsWith('.') && !relativePath.startsWith('/')) {
+        relativePath = './' + relativePath;
+      }
+      const relativePathNoDot = relativePath.replace(/^\.\//, '');
+
+      // Escape for regex
+      const escapedPath = escapeRegExp(relativePath);
+      const escapedPathNoDot = escapeRegExp(relativePathNoDot);
+
+      // Check for CSS Module import pattern: import xxx from './xxx.less'
+      // Match: import styles from './xxx.less', import * as styles from './xxx.less'
+      const cssModuleImportRegex = new RegExp(
+        `import\\s+(?:\\*\\s+as\\s+)?\\w+\\s+from\\s+(['"])(?:${escapedPath}|${escapedPathNoDot})\\1`,
+        'm'
+      );
+
+      // Check for global import pattern: import './xxx.less'
+      const globalImportRegex = new RegExp(
+        `import\\s+(['"])(?:${escapedPath}|${escapedPathNoDot})\\1`,
+        'm'
+      );
+
+      // Check for require with assignment: const styles = require('./xxx.less')
+      const cssModuleRequireRegex = new RegExp(
+        `(?:const|let|var)\\s+\\w+\\s*=\\s*require\\s*\\(\\s*(['"])(?:${escapedPath}|${escapedPathNoDot})\\1\\s*\\)`,
+        'm'
+      );
+
+      // Check for require without assignment: require('./xxx.less')
+      const globalRequireRegex = new RegExp(
+        `(?<!(?:const|let|var)\\s+\\w+\\s*=\\s*)require\\s*\\(\\s*(['"])(?:${escapedPath}|${escapedPathNoDot})\\1\\s*\\)`,
+        'm'
+      );
+
+      if (cssModuleImportRegex.test(content) || cssModuleRequireRegex.test(content)) {
+        return true;
+      }
+
+      if (globalImportRegex.test(content) || globalRequireRegex.test(content)) {
+        // Found as global import, but continue checking other files
+        // in case it's also imported as CSS Module elsewhere
+        continue;
+      }
+    }
+
+    // Default to false (treat as global) if not found or only found as global import
+    return false;
+  } catch (e) {
+    // If scanning fails, default to user's preference
+    return true;
+  }
+}
+
+/**
+ * Get the new file path when renaming from .less to .css or .scss
+ * @param {string} filePath - Original file path
+ * @param {boolean} shouldAddModule - Whether to add .module suffix
+ * @param {string} outputFormat - Output format: 'css' or 'scss' (default: 'css')
+ * @returns {string} - New file path
+ */
+function getNewCssPath(filePath, shouldAddModule, outputFormat = 'css') {
+  const extension = outputFormat === 'scss' ? '.scss' : '.css';
+  // Check if file already has .module in the name
+  const hasModule = /\.module\.less$/.test(filePath);
+
+  if (hasModule) {
+    // Already has .module, just change extension
+    return filePath.replace(/\.less$/, extension);
+  } else if (shouldAddModule) {
+    // Add .module before extension
+    return filePath.replace(/\.less$/, `.module${extension}`);
+  } else {
+    // Just change extension
+    return filePath.replace(/\.less$/, extension);
+  }
+}
+
+/**
+ * Run the less-to-cssvar transformation
+ * @param {string} file - File or directory path
+ * @param {object} options - Transform options
+ * @param {string} options.prefix - CSS variable prefix (default: 'ant')
+ * @param {string|boolean} options.renameTo - Target format: 'css', 'scss', or false to keep .less (default: 'css')
+ * @param {boolean} options.addModule - Whether to add .module suffix when renaming (default: true)
+ *   - true (default): Auto-detect based on import style (CSS Module import → .module.css/.scss, global import → .css/.scss)
+ *   - false: Skip detection, never add .module suffix
+ * @param {boolean} options._explicitAddModule - Internal flag: whether addModule was explicitly specified by user
+ */
+async function lessToCssvar(file, options = {}) {
+  let { prefix = 'ant', renameTo = 'css', addModule = true, _explicitAddModule = false } = options;
+  const allLessFiles = findAllLessFiles(file);
+  const renamedFiles = [];
+  const baseDir = isDirectory.sync(file) ? file : path.dirname(file);
+
+  // Determine output format
+  let outputFormat = 'css';
+  let shouldRename = true;
+  if (renameTo === false || renameTo === 'false') {
+    shouldRename = false;
+    // When not renaming, disable addModule by default (only if not explicitly specified)
+    // No point in adding .module to .less files, but respect user's explicit choice
+    if (!_explicitAddModule && addModule === true) {
+      addModule = false;
+    }
+  } else if (renameTo === 'scss' || renameTo === true) {
+    // Support both 'scss' string and true (for backward compatibility)
+    outputFormat = renameTo === 'scss' ? 'scss' : 'css';
+  } else if (typeof renameTo === 'string') {
+    outputFormat = renameTo.toLowerCase() === 'scss' ? 'scss' : 'css';
+  }
+
+  for await (const item of allLessFiles) {
+    let { content, hasTransformations } = await transform(item, { prefix });
+
+    // If renaming to CSS, convert Less comments
+    // Note: SCSS supports // comments, so only convert for CSS
+    if (shouldRename && outputFormat === 'css') {
+      const convertedContent = convertLessCommentsToCss(content);
+      if (convertedContent !== content) {
+        content = convertedContent;
+        hasTransformations = true;
+      }
+    }
+
+    fs.writeFileSync(item, content);
+
+    // Rename .less to .css/.scss if option is enabled
+    if (shouldRename && hasTransformations) {
+      // Determine whether to add .module suffix
+      let shouldAddModule;
+      if (addModule) {
+        // Auto-detect based on import style
+        shouldAddModule = await isImportedAsCssModule(item, baseDir);
+      } else {
+        // Skip detection, never add .module
+        shouldAddModule = false;
+      }
+
+      const newPath = getNewCssPath(item, shouldAddModule, outputFormat);
+      if (newPath !== item) {
+        fs.renameSync(item, newPath);
+        console.log(`  Renamed: ${item} -> ${newPath}`);
+        renamedFiles.push({ oldPath: item, newPath });
+      }
+    }
+  }
+
+  // Update import references in JS/TS files
+  if (shouldRename && renamedFiles.length > 0) {
+    console.log(`\n  Updating import references...`);
+    await updateImportReferences(baseDir, renamedFiles);
+  }
+}
+
+module.exports = {
+  transform,
+  lessToCssvar,
+  transformLessVarToCssVar,
+  convertLessCommentsToCss,
+  updateImportReferences,
+  getLessTokensFromTheme,
+  getNewCssPath,
+  camelToKebab,
+  LESS_TOKENS,
+};

package/transforms/less-to-token.js

@@ -4,9 +4,10 @@ const postcss = require('postcss');
 const postcssLess = require('postcss-less');
 const isDirectory = require('is-directory');
 const { tokenParse, propertyTokenParse } = require('./utils/token');
+const { shouldExcludePath } = require('./utils/path-utils');
 
 /**
- * 搜索目录下所有的less文件
+ * Find all less files in the directory
  * @param dir
  * @returns
  */
@@ -18,7 +19,7 @@ const findAllLessFiles = dir => {
     files.forEach(file => {
       const filePath = path.join(dir, file);
       if (isDirectory.sync(filePath)) {
-        if (filePath.includes('.umi') || filePath.includes('.umi-production')) {
+        if (shouldExcludePath(filePath)) {
           return;
         }
         lessFiles.push(...findAllLessFiles(filePath));
@@ -36,6 +37,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 +53,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/obui-to-oceanbase-design-and-ui.js

@@ -21,7 +21,6 @@ module.exports = (file, api, options) => {
           'DocDialog',
           'FullscreenBox',
           'Highlight',
-          'GraphToolbar',
           'IconFont',
           'Login',
           'Lottie',
@@ -29,7 +28,6 @@ module.exports = (file, api, options) => {
           'Password',
           'Ranger',
           'SideTip',
-          'TaskGraph',
           'TreeSearch',
           'Welcome',
           /* pro-components */
@@ -50,7 +48,6 @@ module.exports = (file, api, options) => {
           'DialogProps',
           'DocDialogProps',
           'FullscreenBoxProps',
-          'GraphToolbarProps',
           'HighlightProps',
           'IconFontProps',
           'LoginProps',
@@ -61,7 +58,6 @@ module.exports = (file, api, options) => {
           'RangerProps',
           'QuickPickerProps',
           'SideTipProps',
-          'TaskGraphProps',
           // TreeSearch
           'TreeSearchProps',
           'TreeSearchRef',