css2class 2.0.0

package/src/utils/Throttle.js

@@ -0,0 +1,172 @@
+class SmartThrottle {
+  constructor(eventBus) {
+    this.eventBus = eventBus;
+    this.timers = new Map();
+    this.pending = new Set();
+    this.priorities = new Map();
+    this.taskCount = 0;
+  }
+
+  throttle(key, fn, delay = 200, priority = 0) {
+    this.taskCount++;
+    const taskId = `${key}_${this.taskCount}`;
+
+    // 如果有更高优先级的任务，取消当前任务
+    if (this.pending.has(key)) {
+      const currentPriority = this.priorities.get(key) || 0;
+      if (priority <= currentPriority) {
+        this.eventBus.emit('throttle:task:ignored', { key, priority, currentPriority });
+        return; // 当前任务优先级不够高，忽略
+      } else {
+        // 取消当前较低优先级的任务
+        this.cancel(key);
+        this.eventBus.emit('throttle:task:cancelled', { key, reason: 'higher_priority' });
+      }
+    }
+
+    this.pending.add(key);
+    this.priorities.set(key, priority);
+
+    if (this.timers.has(key)) {
+      clearTimeout(this.timers.get(key));
+    }
+
+    const timer = setTimeout(() => {
+      this.pending.delete(key);
+      this.timers.delete(key);
+      this.priorities.delete(key);
+
+      try {
+        this.eventBus.emit('throttle:task:executing', { key, priority });
+        fn();
+        this.eventBus.emit('throttle:task:completed', { key, priority });
+      } catch (error) {
+        this.eventBus.emit('throttle:task:error', { key, error });
+      }
+    }, delay);
+
+    this.timers.set(key, timer);
+    this.eventBus.emit('throttle:task:scheduled', { key, delay, priority });
+  }
+
+  cancel(key) {
+    if (this.timers.has(key)) {
+      clearTimeout(this.timers.get(key));
+      this.timers.delete(key);
+      this.pending.delete(key);
+      this.priorities.delete(key);
+      this.eventBus.emit('throttle:task:cancelled', { key, reason: 'manual' });
+    }
+  }
+
+  cancelAll() {
+    const cancelledCount = this.timers.size;
+
+    this.timers.forEach((timer, key) => {
+      clearTimeout(timer);
+    });
+
+    this.timers.clear();
+    this.pending.clear();
+    this.priorities.clear();
+
+    this.eventBus.emit('throttle:all:cancelled', { cancelledCount });
+  }
+
+  // 批量节流处理
+  batchThrottle(tasks, delay = 200, priority = 0) {
+    const batchId = `batch_${Date.now()}`;
+    const results = [];
+
+    this.throttle(
+      batchId,
+      () => {
+        tasks.forEach((task, index) => {
+          try {
+            const result = task();
+            results[index] = { success: true, result };
+          } catch (error) {
+            results[index] = { success: false, error };
+          }
+        });
+
+        this.eventBus.emit('throttle:batch:completed', { batchId, results });
+      },
+      delay,
+      priority
+    );
+
+    return batchId;
+  }
+
+  // 优先级队列处理
+  addToPriorityQueue(key, fn, priority = 0) {
+    if (!this.priorityQueue) {
+      this.priorityQueue = [];
+    }
+
+    this.priorityQueue.push({ key, fn, priority });
+    this.priorityQueue.sort((a, b) => b.priority - a.priority); // 高优先级在前
+
+    this.eventBus.emit('throttle:queue:added', {
+      key,
+      priority,
+      queueSize: this.priorityQueue.length,
+    });
+  }
+
+  processPriorityQueue(delay = 100) {
+    if (!this.priorityQueue || this.priorityQueue.length === 0) {
+      return;
+    }
+
+    const task = this.priorityQueue.shift();
+    this.throttle(task.key, task.fn, delay, task.priority);
+
+    this.eventBus.emit('throttle:queue:processed', {
+      key: task.key,
+      priority: task.priority,
+      remainingTasks: this.priorityQueue.length,
+    });
+  }
+
+  // 状态查询
+  isPending(key) {
+    return this.pending.has(key);
+  }
+
+  getPendingCount() {
+    return this.pending.size;
+  }
+
+  getTimerCount() {
+    return this.timers.size;
+  }
+
+  getPriority(key) {
+    return this.priorities.get(key) || 0;
+  }
+
+  getStats() {
+    return {
+      pendingCount: this.pending.size,
+      timerCount: this.timers.size,
+      priorityQueueSize: this.priorityQueue ? this.priorityQueue.length : 0,
+      taskCount: this.taskCount,
+    };
+  }
+
+  // 清理过期任务
+  cleanup() {
+    const now = Date.now();
+    const cleanedCount = 0;
+
+    // 这里可以添加更复杂的清理逻辑
+    // 比如清理长时间未执行的任务
+
+    this.eventBus.emit('throttle:cleanup:completed', { cleanedCount });
+    return cleanedCount;
+  }
+}
+
+module.exports = SmartThrottle;

package/src/utils/UnitProcessor.js

@@ -0,0 +1,334 @@
+class UnitProcessor {
+  constructor(config) {
+    this.config = config;
+    this.baseUnit = config.system?.baseUnit || config.baseUnit || 'px';
+    this.unitConversion = parseFloat(config.system?.unitConversion || config.unitConversion || 1);
+
+    // 特殊属性映射（不需要单位的属性）
+    this.unitlessProperties = new Set([
+      'opacity',
+      'z-index',
+      'line-height',
+      'font-weight',
+      'flex',
+      'flex-grow',
+      'flex-shrink',
+      'order',
+    ]);
+
+    // 属性默认单位映射
+    this.propertyUnits = {
+      'font-size': this.baseUnit,
+      width: this.baseUnit,
+      height: this.baseUnit,
+      'max-width': this.baseUnit,
+      'max-height': this.baseUnit,
+      margin: this.baseUnit,
+      'margin-top': this.baseUnit,
+      'margin-right': this.baseUnit,
+      'margin-bottom': this.baseUnit,
+      'margin-left': this.baseUnit,
+      padding: this.baseUnit,
+      'padding-top': this.baseUnit,
+      'padding-right': this.baseUnit,
+      'padding-bottom': this.baseUnit,
+      'padding-left': this.baseUnit,
+      'border-width': this.baseUnit,
+      'border-top-width': this.baseUnit,
+      'border-right-width': this.baseUnit,
+      'border-bottom-width': this.baseUnit,
+      'border-left-width': this.baseUnit,
+      'border-radius': this.baseUnit,
+      top: this.baseUnit,
+      right: this.baseUnit,
+      bottom: this.baseUnit,
+      left: this.baseUnit,
+      gap: this.baseUnit,
+      'letter-spacing': this.baseUnit,
+      transition: 'ms',
+      opacity: '',
+      'z-index': '',
+      'line-height': '',
+      'font-weight': '',
+    };
+  }
+
+  // 智能解析数值和单位
+  parseValue(value, property, defaultUnit = null) {
+    if (typeof value !== 'string' && typeof value !== 'number') {
+      return value;
+    }
+
+    const valueStr = String(value).trim();
+
+    // 处理特殊值
+    if (this.isSpecialValue(valueStr)) {
+      return valueStr;
+    }
+
+    // 检测用户是否已指定单位
+    const hasUnit = this.detectUnit(valueStr);
+    if (hasUnit) {
+      return valueStr; // 保持用户指定的单位
+    }
+
+    // 提取数值部分
+    const numericValue = this.extractNumericValue(valueStr);
+    if (numericValue === null) {
+      return valueStr; // 无法解析，保持原值
+    }
+
+    // 处理特殊属性
+    if (this.isSpecialProperty(property, numericValue)) {
+      return this.processSpecialProperty(property, numericValue);
+    }
+
+    // 应用单位转换
+    const convertedValue = this.applyUnitConversion(numericValue, property, defaultUnit);
+
+    return convertedValue;
+  }
+
+  // 检测特殊值
+  isSpecialValue(value) {
+    const specialValues = [
+      'auto',
+      'none',
+      'inherit',
+      'initial',
+      'unset',
+      '100%',
+      '50%',
+      '25%',
+      '75%',
+      '100vw',
+      '100vh',
+      '50vw',
+      '50vh',
+      'full',
+      'screen',
+      'min',
+      'max',
+    ];
+
+    return (
+      specialValues.includes(value) ||
+      value.includes('%') ||
+      value.includes('vw') ||
+      value.includes('vh')
+    );
+  }
+
+  // 检测单位
+  detectUnit(value) {
+    const unitPattern = /[a-zA-Z%]+$/;
+    return unitPattern.test(value);
+  }
+
+  // 提取数值
+  extractNumericValue(value) {
+    const numericPattern = /^-?\d*\.?\d+/;
+    const match = value.match(numericPattern);
+    return match ? parseFloat(match[0]) : null;
+  }
+
+  // 检查特殊属性
+  isSpecialProperty(property, value) {
+    return (
+      this.unitlessProperties.has(property) || property === 'opacity' || property === 'line-height'
+    );
+  }
+
+  // 处理特殊属性
+  processSpecialProperty(property, value) {
+    switch (property) {
+      case 'opacity':
+        // 如果值大于1，假设是百分比，转换为0-1范围
+        return value > 1 ? value / 100 : value;
+
+      case 'line-height':
+        // 如果值大于10，假设是像素值，转换为无单位值
+        return value > 10 ? value / 16 : value; // 假设基准字体大小为16px
+
+      case 'z-index':
+      case 'font-weight':
+        return value; // 保持原值
+
+      default:
+        return value;
+    }
+  }
+
+  // 应用单位转换
+  applyUnitConversion(numericValue, property, defaultUnit = null) {
+    // 确定使用的单位
+    const unit = defaultUnit || this.getPropertyUnit(property);
+
+    // 如果属性不需要单位，直接返回数值
+    if (!unit) {
+      return numericValue;
+    }
+
+    // 应用转换比例
+    const convertedValue = numericValue * this.unitConversion;
+
+    // 格式化数值（避免过多小数位）
+    const formattedValue = this.formatNumericValue(convertedValue);
+
+    return `${formattedValue}${unit}`;
+  }
+
+  // 获取属性默认单位
+  getPropertyUnit(property) {
+    // 检查属性映射
+    if (this.propertyUnits[property]) {
+      return this.propertyUnits[property];
+    }
+
+    // 检查属性类型
+    if (property.includes('width') || property.includes('height')) {
+      return this.baseUnit;
+    }
+
+    if (property.includes('margin') || property.includes('padding')) {
+      return this.baseUnit;
+    }
+
+    if (property.includes('border')) {
+      return this.baseUnit;
+    }
+
+    if (property.includes('font-size')) {
+      return this.baseUnit;
+    }
+
+    if (
+      property.includes('top') ||
+      property.includes('right') ||
+      property.includes('bottom') ||
+      property.includes('left')
+    ) {
+      return this.baseUnit;
+    }
+
+    // 默认返回基础单位
+    return this.baseUnit;
+  }
+
+  // 格式化数值
+  formatNumericValue(value) {
+    // 如果是整数，返回整数
+    if (Number.isInteger(value)) {
+      return value;
+    }
+
+    // 如果是小数，保留最多3位小数
+    return parseFloat(value.toFixed(3));
+  }
+
+  // 批量处理值
+  processValues(values, property, defaultUnit = null) {
+    if (Array.isArray(values)) {
+      return values.map((value) => this.parseValue(value, property, defaultUnit));
+    }
+
+    return this.parseValue(values, property, defaultUnit);
+  }
+
+  // 处理规则配置
+  processRuleConfig(ruleConfig, value) {
+    const { properties, defaultUnit, value: fixedValue, skipConversion } = ruleConfig;
+
+    // 如果有固定值，直接返回
+    if (fixedValue !== undefined) {
+      return fixedValue;
+    }
+
+    // 如果跳过转换，直接拼接单位
+    if (skipConversion === true && defaultUnit) {
+      const numericValue = this.extractNumericValue(value);
+      if (numericValue !== null) {
+        // 处理小数点（保持与传统方式一致）
+        let processedValue = numericValue;
+        if (String(value).startsWith('0') && String(value).length > 1) {
+          processedValue = parseFloat('0.' + String(value).substring(1));
+        }
+        return `${processedValue}${defaultUnit}`;
+      }
+    }
+
+    // 处理多个属性
+    if (Array.isArray(properties)) {
+      return properties.map((property) => this.parseValue(value, property, defaultUnit));
+    }
+
+    // 处理单个属性
+    return this.parseValue(value, properties, defaultUnit);
+  }
+
+  // 验证单位一致性
+  validateUnitConsistency(property, value, expectedUnit) {
+    if (!expectedUnit) {
+      return true; // 无单位属性
+    }
+
+    const detectedUnit = this.extractUnit(value);
+    if (!detectedUnit) {
+      return true; // 无单位值，使用默认单位
+    }
+
+    return detectedUnit === expectedUnit;
+  }
+
+  // 提取单位
+  extractUnit(value) {
+    const unitPattern = /[a-zA-Z%]+$/;
+    const match = String(value).match(unitPattern);
+    return match ? match[0] : null;
+  }
+
+  // 获取配置信息
+  getConfig() {
+    return {
+      baseUnit: this.baseUnit,
+      unitConversion: this.unitConversion,
+      propertyUnits: this.propertyUnits,
+      unitlessProperties: Array.from(this.unitlessProperties),
+    };
+  }
+
+  // 更新配置
+  updateConfig(newConfig) {
+    if (newConfig.system?.baseUnit) {
+      this.baseUnit = newConfig.system.baseUnit;
+    }
+
+    if (newConfig.system?.unitConversion) {
+      this.unitConversion = parseFloat(newConfig.system.unitConversion);
+    }
+
+    // 更新属性单位映射
+    if (newConfig.system?.propertyUnits) {
+      this.propertyUnits = { ...this.propertyUnits, ...newConfig.system.propertyUnits };
+    }
+  }
+
+  // 创建CSS属性值
+  createCSSValue(property, value, unit = null) {
+    const processedValue = this.parseValue(value, property, unit);
+
+    // 如果是数组（多个属性），返回CSS字符串
+    if (Array.isArray(processedValue)) {
+      return processedValue
+        .map((val, index) => {
+          const prop = Array.isArray(property) ? property[index] : property;
+          return `${prop}: ${val};`;
+        })
+        .join('');
+    }
+
+    return `${property}: ${processedValue};`;
+  }
+}
+
+module.exports = UnitProcessor;

package/src/utils/WxssClassExtractor.js

@@ -0,0 +1,137 @@
+const fs = require('fs').promises;
+const path = require('path');
+
+/**
+ * 从 WXSS/CSS 文件中提取 class 选择器集合
+ * 主要用于从输出文件中解析已存在的 class，作为增量模式的基线
+ */
+class WxssClassExtractor {
+  constructor(eventBus) {
+    this.eventBus = eventBus;
+  }
+
+  /**
+   * 从 CSS/WXSS 文件中提取所有 class 选择器
+   * @param {string} filePath - CSS/WXSS 文件路径
+   * @returns {Promise<{classList: Set<string>, staticClassList: Set<string>}>}
+   */
+  async extractClassesFromFile(filePath) {
+    try {
+      const content = await fs.readFile(filePath, 'utf-8');
+      return this.extractClassesFromContent(content);
+    } catch (error) {
+      // 文件不存在或读取失败时返回空集合
+      if (error.code === 'ENOENT') {
+        this.eventBus?.emit('wxssExtractor:fileNotFound', { filePath });
+        return { classList: new Set(), staticClassList: new Set() };
+      }
+      this.eventBus?.emit('wxssExtractor:error', { filePath, error: error.message });
+      throw error;
+    }
+  }
+
+  /**
+   * 从 CSS 内容中提取 class 选择器
+   * @param {string} cssContent - CSS 内容
+   * @returns {{classList: Set<string>, staticClassList: Set<string>}}
+   */
+  extractClassesFromContent(cssContent) {
+    const classList = new Set();
+    const staticClassList = new Set();
+
+    if (!cssContent || typeof cssContent !== 'string') {
+      return { classList, staticClassList };
+    }
+
+    // 匹配 CSS 选择器中的 class
+    // 支持：
+    // - .className { ... }
+    // - .className1, .className2 { ... }
+    // - .className:hover { ... } (提取 .className)
+    // - .className1.className2 { ... } (提取两个 class)
+    // 不处理复杂选择器如 .a .b（后代选择器），只提取直接出现的 class
+    const selectorRegex = /\.([a-zA-Z0-9_-]+)(?::[a-zA-Z-]+|\[[^\]]+\])?(?:\.([a-zA-Z0-9_-]+))?(?=\s*[,\{])/g;
+
+    let match;
+    while ((match = selectorRegex.exec(cssContent)) !== null) {
+      // 提取第一个 class
+      const className1 = match[1];
+      if (className1 && this.isValidClassName(className1)) {
+        // 判断是否是静态类（通常是不带连字符的简单类名，或特定前缀）
+        // 这里使用简单启发式：如果包含连字符且符合动态类模式，认为是动态类
+        if (this.isDynamicClass(className1)) {
+          classList.add(className1);
+        } else {
+          staticClassList.add(className1);
+        }
+      }
+
+      // 提取第二个 class（如果有，如 .a.b）
+      const className2 = match[2];
+      if (className2 && this.isValidClassName(className2)) {
+        if (this.isDynamicClass(className2)) {
+          classList.add(className2);
+        } else {
+          staticClassList.add(className2);
+        }
+      }
+    }
+
+    // 处理逗号分隔的选择器列表
+    // 例如：.class1, .class2, .class3 { ... }
+    const commaSeparatedRegex = /\.([a-zA-Z0-9_-]+)(?=\s*[,{])/g;
+    let commaMatch;
+    while ((commaMatch = commaSeparatedRegex.exec(cssContent)) !== null) {
+      const className = commaMatch[1];
+      if (className && this.isValidClassName(className)) {
+        if (this.isDynamicClass(className)) {
+          classList.add(className);
+        } else {
+          staticClassList.add(className);
+        }
+      }
+    }
+
+    this.eventBus?.emit('wxssExtractor:extracted', {
+      classCount: classList.size,
+      staticClassCount: staticClassList.size,
+    });
+
+    return { classList, staticClassList };
+  }
+
+  /**
+   * 验证 class 名是否有效
+   * @param {string} className
+   * @returns {boolean}
+   */
+  isValidClassName(className) {
+    if (!className || typeof className !== 'string') {
+      return false;
+    }
+    // 基本验证：不能为空，不能以数字开头（CSS 规范）
+    return className.length > 0 && !/^\d/.test(className);
+  }
+
+  /**
+   * 判断是否是动态类（通常包含连字符，如 w-100, m-10）
+   * @param {string} className
+   * @returns {boolean}
+   */
+  isDynamicClass(className) {
+    // 简单启发式：包含连字符的类名通常是动态类
+    // 例如：w-100, m-10, text-16 等
+    return className.includes('-');
+  }
+
+  /**
+   * 从文件路径读取并提取（便捷方法）
+   * @param {string} filePath
+   * @returns {Promise<{classList: Set<string>, staticClassList: Set<string>}>}
+   */
+  async extractFromFile(filePath) {
+    return this.extractClassesFromFile(filePath);
+  }
+}
+
+module.exports = WxssClassExtractor;