styimat 1.3.0 → 1.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "styimat",
-  "version": "1.3.0",
-  "description": "A powerful CSS variable preprocessor with nested selectors, Lab/LCH color spaces conversion and modern color features.",
+  "version": "1.4.0",
+  "description": "一个高效的CSS变量预处理库，支持Lab/LCH颜色空间自动转换、嵌套选择器和Display P3广色域，让现代CSS开发更简洁强大。",
   "keywords": [
     "css",
     "preprocessor",

package/styimat.js

@@ -4,6 +4,7 @@
  * 支持 Lab 和 LCH 颜色空间转换为 RGB（CSS标准格式）
  * 支持 lab# 和 lch# 十六进制语法
  * 支持 Display P3 广色域显示器
+ * 增强 math() 函数，支持复杂数学计算
  */
 (function(root, factory) {
   if (typeof define === 'function' && define.amd) {
@@ -26,9 +27,11 @@
     enableNesting: true,
     autoProcessStyleTags: true,
     styleTagAttribute: 'e',
-    convertLabToRGB: true,  // 是否将lab颜色转换为rgb
-    convertLchToRGB: true,   // 是否将lch颜色转换为rgb
-    enableP3: true,          // 是否启用P3广色域支持
+    convertLabToRGB: true,
+    convertLchToRGB: true,
+    enableP3: true,
+    enableMath: true, // 启用math()函数增强
+    mathPrecision: 6, // 数学计算精度
   };
 
   // 全局P3支持检测结果
@@ -181,6 +184,252 @@
     return -1;
   }
 
+  /**
+   * 增强的数学表达式解析和计算
+   * @param {string} expression - 数学表达式
+   * @param {Object} config - 配置对象
+   * @returns {string} 计算结果
+   */
+  function evaluateMathExpression(expression, config) {
+    // 如果禁用math()增强，则返回原始表达式
+    if (!config.enableMath) {
+      return `math(${expression})`;
+    }
+    
+    try {
+      // 清理表达式：移除空白字符
+      let cleanExpr = expression.replace(/\s+/g, '');
+      
+      // 解析数学表达式
+      const result = parseMathExpression(cleanExpr, config);
+      
+      // 如果结果包含单位，保留原始格式
+      if (hasUnits(cleanExpr)) {
+        // 处理带单位的表达式
+        return processUnitExpression(cleanExpr, result);
+      } else {
+        // 纯数字表达式，直接计算结果
+        return roundNumber(result, config.mathPrecision);
+      }
+    } catch (error) {
+      console.warn('math()表达式解析失败:', expression, error);
+      return `math(${expression})`;
+    }
+  }
+
+  /**
+   * 解析数学表达式
+   * @param {string} expr - 清理后的表达式
+   * @param {Object} config - 配置对象
+   * @returns {number} 计算结果
+   */
+  function parseMathExpression(expr, config) {
+    // 处理括号
+    while (expr.includes('(') && expr.includes(')')) {
+      const start = expr.lastIndexOf('(');
+      const end = expr.indexOf(')', start);
+      
+      if (end === -1) break;
+      
+      const inner = expr.substring(start + 1, end);
+      const innerResult = parseMathExpression(inner, config);
+      
+      expr = expr.substring(0, start) + innerResult + expr.substring(end + 1);
+    }
+    
+    // 现在expr应该没有括号了
+    return evaluateSimpleExpression(expr, config);
+  }
+
+  /**
+   * 评估简单表达式（无括号）
+   * @param {string} expr - 简单表达式
+   * @param {Object} config - 配置对象
+   * @returns {number} 计算结果
+   */
+  function evaluateSimpleExpression(expr, config) {
+    // 处理操作符优先级：乘除优先于加减
+    const operators = [
+      { regex: /([\d.]+(?:[a-zA-Z%]+)?)\*([\d.]+(?:[a-zA-Z%]+)?)/, handler: multiply },
+      { regex: /([\d.]+(?:[a-zA-Z%]+)?)\/([\d.]+(?:[a-zA-Z%]+)?)/, handler: divide },
+      { regex: /([\d.]+(?:[a-zA-Z%]+)?)\+([\d.]+(?:[a-zA-Z%]+)?)/, handler: add },
+      { regex: /([\d.]+(?:[a-zA-Z%]+)?)-([\d.]+(?:[a-zA-Z%]+)?)/, handler: subtract }
+    ];
+    
+    let lastExpr = expr;
+    
+    // 按照优先级处理操作符
+    for (const op of operators) {
+      let match;
+      while ((match = expr.match(op.regex)) !== null) {
+        const left = parseValueWithUnit(match[1]);
+        const right = parseValueWithUnit(match[2]);
+        const result = op.handler(left, right);
+        
+        // 替换匹配的部分
+        expr = expr.substring(0, match.index) + 
+               result.value + 
+               expr.substring(match.index + match[0].length);
+      }
+    }
+    
+    // 如果表达式无法进一步简化，尝试解析为数字
+    if (expr !== lastExpr) {
+      return evaluateSimpleExpression(expr, config);
+    }
+    
+    // 解析最终结果
+    const parsed = parseValueWithUnit(expr);
+    return parsed.value;
+  }
+
+  /**
+   * 解析带单位的数值
+   * @param {string} str - 字符串值
+   * @returns {Object} {value: number, unit: string}
+   */
+  function parseValueWithUnit(str) {
+    // 匹配数值和单位
+    const match = str.match(/^([\d.]+)([a-zA-Z%]*)$/);
+    
+    if (!match) {
+      throw new Error(`无法解析值: ${str}`);
+    }
+    
+    const value = parseFloat(match[1]);
+    const unit = match[2] || '';
+    
+    return { value, unit };
+  }
+
+  /**
+   * 检查表达式是否包含单位
+   * @param {string} expr - 表达式
+   * @returns {boolean} 是否包含单位
+   */
+  function hasUnits(expr) {
+    return /[a-zA-Z%]/.test(expr);
+  }
+
+  /**
+   * 处理带单位的表达式
+   * @param {string} originalExpr - 原始表达式
+   * @param {number} result - 计算结果
+   * @returns {string} 处理后的表达式
+   */
+  function processUnitExpression(originalExpr, result) {
+    // 提取原始表达式中的单位
+    const unitMatch = originalExpr.match(/([a-zA-Z%]+)(?!.*[a-zA-Z%])/);
+    
+    if (unitMatch) {
+      return result + unitMatch[1];
+    }
+    
+    // 如果没有明确单位，检查是否为百分比
+    if (originalExpr.includes('%')) {
+      return result + '%';
+    }
+    
+    // 默认为像素
+    return result + 'px';
+  }
+
+  // 数学运算函数
+  function multiply(a, b) {
+    if (a.unit === b.unit || (!a.unit && !b.unit)) {
+      return { value: a.value * b.value, unit: a.unit || b.unit };
+    }
+    
+    // 单位不匹配，返回原始表达式
+    return { value: `${a.value}${a.unit}*${b.value}${b.unit}`, unit: '' };
+  }
+
+  function divide(a, b) {
+    if (b.value === 0) {
+      throw new Error('除以零');
+    }
+    
+    if (a.unit && !b.unit) {
+      // 如 100px / 2
+      return { value: a.value / b.value, unit: a.unit };
+    } else if (a.unit === b.unit) {
+      // 如 100px / 2px
+      return { value: a.value / b.value, unit: '' };
+    }
+    
+    // 单位不匹配，返回原始表达式
+    return { value: `${a.value}${a.unit}/${b.value}${b.unit}`, unit: '' };
+  }
+
+  function add(a, b) {
+    if (a.unit === b.unit) {
+      return { value: a.value + b.value, unit: a.unit };
+    }
+    
+    // 单位不匹配，返回原始表达式
+    return { value: `${a.value}${a.unit}+${b.value}${b.unit}`, unit: '' };
+  }
+
+  function subtract(a, b) {
+    if (a.unit === b.unit) {
+      return { value: a.value - b.value, unit: a.unit };
+    }
+    
+    // 单位不匹配，返回原始表达式
+    return { value: `${a.value}${a.unit}-${b.value}${b.unit}`, unit: '' };
+  }
+
+  /**
+   * 四舍五入到指定精度
+   * @param {number} num - 要四舍五入的数字
+   * @param {number} precision - 精度
+   * @returns {string} 四舍五入后的数字字符串
+   */
+  function roundNumber(num, precision = 6) {
+    const factor = Math.pow(10, precision);
+    const rounded = Math.round(num * factor) / factor;
+    
+    // 移除不必要的尾随零
+    const str = rounded.toString();
+    if (str.includes('.')) {
+      return str.replace(/(\.\d*?)0+$/, '$1').replace(/\.$/, '');
+    }
+    return str;
+  }
+
+  /**
+   * 处理所有的math()函数
+   * @param {string} cssValue - CSS属性值
+   * @param {Object} config - 配置对象
+   * @returns {string} 转换后的CSS值
+   */
+  function processMathFunctions(cssValue, config) {
+    if (!config.enableMath) {
+      return cssValue;
+    }
+    
+    let result = cssValue;
+    
+    // 匹配math()函数
+    const mathRegex = /math\(([^)]+)\)/gi;
+    
+    // 递归处理嵌套的math()函数
+    const processMath = (str) => {
+      return str.replace(mathRegex, (match, expression) => {
+        return evaluateMathExpression(expression, config);
+      });
+    };
+    
+    // 递归处理，直到没有更多math()函数
+    let lastResult;
+    do {
+      lastResult = result;
+      result = processMath(result);
+    } while (result !== lastResult && result.includes('math('));
+    
+    return result;
+  }
+
   /**
    * 解析并转换所有的 Lab 和 LCH 颜色（全局一次性处理）
    * @param {string} cssValue - CSS属性值
@@ -616,21 +865,32 @@
   }
 
   /**
-   * 处理CSS值，根据配置转换LAB和LCH颜色
+   * 处理CSS值，根据配置转换LAB、LCH颜色和math()函数
    * @param {string} value - CSS属性值
    * @param {Object} config - 配置对象
    * @returns {string} 处理后的值
    */
   function processCSSValue(value, config) {
-    // 直接调用全局转换函数
-    return convertAllLabLchColors(value, config);
+    let result = value;
+    
+    // 1. 首先处理math()函数
+    if (config.enableMath) {
+      result = processMathFunctions(result, config);
+    }
+    
+    // 2. 然后处理LAB和LCH颜色
+    if (config.convertLabToRGB || config.convertLchToRGB) {
+      result = convertAllLabLchColors(result, config);
+    }
+    
+    return result;
   }
 
   // 私有方法：提取变量定义并移除（支持嵌套作用域）
   function extractVariablesAndCSS(cssText, config) {
     const lines = cssText.split('\n');
     const globalVariables = {};
-    const selectorVariables = new Map(); // 选择器 -> 变量映射
+    const selectorVariables = new Map();
     let cssWithoutVars = '';
     let currentSelector = null;
     let inSelectorBlock = false;
@@ -644,8 +904,8 @@
       
       if (varMatch) {
         const [, varName, varValue] = varMatch;
-        // 处理变量值中的LAB/LCH颜色转换
-        const processedValue = convertAllLabLchColors(
+        // 处理变量值中的数学表达式和颜色转换
+        const processedValue = processCSSValue(
           replaceVariableUsesInValue(varValue.trim(), {
             ...globalVariables,
             ...(currentSelector ? selectorVariables.get(currentSelector) || {} : {})
@@ -764,11 +1024,11 @@
       if (!trimmed.includes('{') && !trimmed.includes('}') && trimmed.includes(':')) {
         if (stack.length > 0) {
           const currentRule = stack[stack.length - 1];
-          // 处理属性值中的LAB/LCH颜色
+          // 处理属性值中的math()函数和颜色转换
           const parsed = parseSingleLineCSS(trimmed);
           parsed.forEach(obj => {
             const key = Object.keys(obj)[0];
-            const value = convertAllLabLchColors(obj[key], config);
+            const value = processCSSValue(obj[key], config);
             currentRule.properties.push(`${key}: ${value}`);
           });
         }
@@ -821,11 +1081,11 @@
       if (rule.properties.length > 0) {
         result += (isAt ? "" : fullSelector) + ' {\n';
         for (const prop of rule.properties) {
-          // 再次处理属性值（确保LAB/LCH颜色被转换）
+          // 再次处理属性值（确保math()函数和颜色被转换）
           const parsed = parseSingleLineCSS(prop);
           parsed.forEach(obj => {
             const key = Object.keys(obj)[0];
-            const value = convertAllLabLchColors(obj[key], config);
+            const value = processCSSValue(obj[key], config);
             result += (isParentAt ? '  ' : '') + `  ${key}: ${value};\n`;
           });
         }
@@ -870,10 +1130,8 @@
       return `var(--${varName})`;
     });
     
-    // 最后处理所有的LAB和LCH颜色（一次性全局处理）
-    if (config.convertLabToRGB || config.convertLchToRGB) {
-      result = convertAllLabLchColors(result, config);
-    }
+    // 最后处理所有的LAB、LCH颜色和math()函数
+    result = processCSSValue(result, config);
     
     return result;
   }
@@ -886,7 +1144,7 @@
     
     const declarations = Object.entries(variables)
       .map(([name, value]) => {
-        const processedValue = convertAllLabLchColors(
+        const processedValue = processCSSValue(
           replaceVariableUsesInValue(value, variables),
           config
         );
@@ -922,12 +1180,8 @@
         currentSelector = null;
       }
       
-      // 使用全局转换函数处理所有颜色
-      if (config.convertLabToRGB || config.convertLchToRGB) {
-        result += convertAllLabLchColors(line, config) + '\n';
-      } else {
-        result += line + '\n';
-      }
+      // 使用全局处理函数处理所有math()和颜色
+      result += processCSSValue(line, config) + '\n';
     }
     
     return result.trim();
@@ -1024,7 +1278,7 @@
     convert,
     apply,
     config,
-    version: '1.8.0',
+    version: '1.9.0',
     
     // 检测P3支持
     supportsP3: detectP3Support(),
@@ -1032,6 +1286,58 @@
     // 重新检测P3支持（如果配置变化）
     detectP3Support: detectP3Support,
     
+    // 数学计算工具方法
+    math: {
+      /**
+       * 计算数学表达式
+       * @param {string} expression - 数学表达式
+       * @returns {string} 计算结果
+       */
+      evaluate: function(expression) {
+        return evaluateMathExpression(expression, defaultConfig);
+      },
+      
+      /**
+       * 解析带单位的数值
+       * @param {string} value - 带单位的字符串
+       * @returns {Object} {value: number, unit: string}
+       */
+      parseUnit: parseValueWithUnit,
+      
+      /**
+       * 四舍五入数字
+       * @param {number} num - 要四舍五入的数字
+       * @param {number} precision - 精度
+       * @returns {string} 四舍五入后的数字字符串
+       */
+      round: roundNumber,
+      
+      /**
+       * 测试数学表达式
+       * @param {string} expression - 要测试的表达式
+       * @param {Object} testConfig - 测试配置
+       * @returns {Object} 测试结果
+       */
+      test: function(expression, testConfig = {}) {
+        const config = { ...defaultConfig, ...testConfig };
+        try {
+          const result = evaluateMathExpression(expression, config);
+          return {
+            success: true,
+            expression,
+            result,
+            parsed: parseValueWithUnit(result.replace(/^calc\(|\)$/g, ''))
+          };
+        } catch (error) {
+          return {
+            success: false,
+            expression,
+            error: error.message
+          };
+        }
+      }
+    },
+    
     // 颜色转换工具方法
     colorUtils: {
       labToRGB: preciseLabToRGB,
@@ -1152,12 +1458,12 @@
         const element = this;
         return new Proxy({}, {
           get(target, prop) {
-            const varName = prop.startsWith('$') ? prop.slice(1) : prop;
+            const varName = prop.startsWith('--') ? prop : `--${prop}`;
             return element.style.getPropertyValue(varName);
           },
           
           set(target, prop, value) {
-            const varName = prop.startsWith('$') ? prop.slice(1) : prop;
+            const varName = prop.startsWith('--') ? prop : `--${prop}`;
             element.style.setProperty(varName, value);
             return true;
           }

package/styimat.min.js

@@ -4,6 +4,7 @@
  * 支持 Lab 和 LCH 颜色空间转换为 RGB（CSS标准格式）
  * 支持 lab# 和 lch# 十六进制语法
  * 支持 Display P3 广色域显示器
+ * 增强 math() 函数，支持复杂数学计算
  */
 (function(root,factory){if(typeof define==="function"&&define.amd){
 // AMD 支持 (RequireJS)
@@ -13,9 +14,8 @@ module.exports=factory()}else{
 // 浏览器全局变量
 root.styimat=factory()}})(typeof self!=="undefined"?self:this,function(){
 // 默认配置
-let defaultConfig={rootSelector:":root",variablePrefix:"--",preserveOriginal:false,indentSize:2,enableNesting:true,autoProcessStyleTags:true,styleTagAttribute:"e",convertLabToRGB:true,// 是否将lab颜色转换为rgb
-convertLchToRGB:true,// 是否将lch颜色转换为rgb
-enableP3:true};
+let defaultConfig={rootSelector:":root",variablePrefix:"--",preserveOriginal:false,indentSize:2,enableNesting:true,autoProcessStyleTags:true,styleTagAttribute:"e",convertLabToRGB:true,convertLchToRGB:true,enableP3:true,enableMath:true,// 启用math()函数增强
+mathPrecision:6};
 // 全局P3支持检测结果
 let p3Supported=null;
 /**
@@ -68,6 +68,108 @@ result.push({[property]:value})}return result}
 if((char==='"'||char==="'")&&!inQuotes){inQuotes=true;quoteChar=char}else if(char===quoteChar&&inQuotes){inQuotes=false;quoteChar=""}
 // 如果找到冒号且不在引号内，返回位置
 if(char===":"&&!inQuotes){return i}}return-1}
+/**
+   * 增强的数学表达式解析和计算
+   * @param {string} expression - 数学表达式
+   * @param {Object} config - 配置对象
+   * @returns {string} 计算结果
+   */function evaluateMathExpression(expression,config){
+// 如果禁用math()增强，则返回原始表达式
+if(!config.enableMath){return`math(${expression})`}try{
+// 清理表达式：移除空白字符
+let cleanExpr=expression.replace(/\s+/g,"");
+// 解析数学表达式
+const result=parseMathExpression(cleanExpr,config);
+// 如果结果包含单位，保留原始格式
+if(hasUnits(cleanExpr)){
+// 处理带单位的表达式
+return processUnitExpression(cleanExpr,result)}else{
+// 纯数字表达式，直接计算结果
+return roundNumber(result,config.mathPrecision)}}catch(error){console.warn("math()表达式解析失败:",expression,error);return`math(${expression})`}}
+/**
+   * 解析数学表达式
+   * @param {string} expr - 清理后的表达式
+   * @param {Object} config - 配置对象
+   * @returns {number} 计算结果
+   */function parseMathExpression(expr,config){
+// 处理括号
+while(expr.includes("(")&&expr.includes(")")){const start=expr.lastIndexOf("(");const end=expr.indexOf(")",start);if(end===-1)break;const inner=expr.substring(start+1,end);const innerResult=parseMathExpression(inner,config);expr=expr.substring(0,start)+innerResult+expr.substring(end+1)}
+// 现在expr应该没有括号了
+return evaluateSimpleExpression(expr,config)}
+/**
+   * 评估简单表达式（无括号）
+   * @param {string} expr - 简单表达式
+   * @param {Object} config - 配置对象
+   * @returns {number} 计算结果
+   */function evaluateSimpleExpression(expr,config){
+// 处理操作符优先级：乘除优先于加减
+const operators=[{regex:/([\d.]+(?:[a-zA-Z%]+)?)\*([\d.]+(?:[a-zA-Z%]+)?)/,handler:multiply},{regex:/([\d.]+(?:[a-zA-Z%]+)?)\/([\d.]+(?:[a-zA-Z%]+)?)/,handler:divide},{regex:/([\d.]+(?:[a-zA-Z%]+)?)\+([\d.]+(?:[a-zA-Z%]+)?)/,handler:add},{regex:/([\d.]+(?:[a-zA-Z%]+)?)-([\d.]+(?:[a-zA-Z%]+)?)/,handler:subtract}];let lastExpr=expr;
+// 按照优先级处理操作符
+for(const op of operators){let match;while((match=expr.match(op.regex))!==null){const left=parseValueWithUnit(match[1]);const right=parseValueWithUnit(match[2]);const result=op.handler(left,right);
+// 替换匹配的部分
+expr=expr.substring(0,match.index)+result.value+expr.substring(match.index+match[0].length)}}
+// 如果表达式无法进一步简化，尝试解析为数字
+if(expr!==lastExpr){return evaluateSimpleExpression(expr,config)}
+// 解析最终结果
+const parsed=parseValueWithUnit(expr);return parsed.value}
+/**
+   * 解析带单位的数值
+   * @param {string} str - 字符串值
+   * @returns {Object} {value: number, unit: string}
+   */function parseValueWithUnit(str){
+// 匹配数值和单位
+const match=str.match(/^([\d.]+)([a-zA-Z%]*)$/);if(!match){throw new Error(`无法解析值: ${str}`)}const value=parseFloat(match[1]);const unit=match[2]||"";return{value:value,unit:unit}}
+/**
+   * 检查表达式是否包含单位
+   * @param {string} expr - 表达式
+   * @returns {boolean} 是否包含单位
+   */function hasUnits(expr){return/[a-zA-Z%]/.test(expr)}
+/**
+   * 处理带单位的表达式
+   * @param {string} originalExpr - 原始表达式
+   * @param {number} result - 计算结果
+   * @returns {string} 处理后的表达式
+   */function processUnitExpression(originalExpr,result){
+// 提取原始表达式中的单位
+const unitMatch=originalExpr.match(/([a-zA-Z%]+)(?!.*[a-zA-Z%])/);if(unitMatch){return result+unitMatch[1]}
+// 如果没有明确单位，检查是否为百分比
+if(originalExpr.includes("%")){return result+"%"}
+// 默认为像素
+return result+"px"}
+// 数学运算函数
+function multiply(a,b){if(a.unit===b.unit||!a.unit&&!b.unit){return{value:a.value*b.value,unit:a.unit||b.unit}}
+// 单位不匹配，返回原始表达式
+return{value:`${a.value}${a.unit}*${b.value}${b.unit}`,unit:""}}function divide(a,b){if(b.value===0){throw new Error("除以零")}if(a.unit&&!b.unit){
+// 如 100px / 2
+return{value:a.value/b.value,unit:a.unit}}else if(a.unit===b.unit){
+// 如 100px / 2px
+return{value:a.value/b.value,unit:""}}
+// 单位不匹配，返回原始表达式
+return{value:`${a.value}${a.unit}/${b.value}${b.unit}`,unit:""}}function add(a,b){if(a.unit===b.unit){return{value:a.value+b.value,unit:a.unit}}
+// 单位不匹配，返回原始表达式
+return{value:`${a.value}${a.unit}+${b.value}${b.unit}`,unit:""}}function subtract(a,b){if(a.unit===b.unit){return{value:a.value-b.value,unit:a.unit}}
+// 单位不匹配，返回原始表达式
+return{value:`${a.value}${a.unit}-${b.value}${b.unit}`,unit:""}}
+/**
+   * 四舍五入到指定精度
+   * @param {number} num - 要四舍五入的数字
+   * @param {number} precision - 精度
+   * @returns {string} 四舍五入后的数字字符串
+   */function roundNumber(num,precision=6){const factor=Math.pow(10,precision);const rounded=Math.round(num*factor)/factor;
+// 移除不必要的尾随零
+const str=rounded.toString();if(str.includes(".")){return str.replace(/(\.\d*?)0+$/,"$1").replace(/\.$/,"")}return str}
+/**
+   * 处理所有的math()函数
+   * @param {string} cssValue - CSS属性值
+   * @param {Object} config - 配置对象
+   * @returns {string} 转换后的CSS值
+   */function processMathFunctions(cssValue,config){if(!config.enableMath){return cssValue}let result=cssValue;
+// 匹配math()函数
+const mathRegex=/math\(([^)]+)\)/gi;
+// 递归处理嵌套的math()函数
+const processMath=str=>str.replace(mathRegex,(match,expression)=>evaluateMathExpression(expression,config));
+// 递归处理，直到没有更多math()函数
+let lastResult;do{lastResult=result;result=processMath(result)}while(result!==lastResult&&result.includes("math("));return result}
 /**
    * 解析并转换所有的 Lab 和 LCH 颜色（全局一次性处理）
    * @param {string} cssValue - CSS属性值
@@ -218,20 +320,21 @@ const rgb=preciseLabToRGB(L,a,b);if(alpha!==null){return`rgba(${rgb.r}, ${rgb.g}
 // 使用P3
 const p3=labToP3(L,a,b);if(alpha!==null){return`color(display-p3 ${p3.r.toFixed(4)} ${p3.g.toFixed(4)} ${p3.b.toFixed(4)} / ${alpha})`}return`color(display-p3 ${p3.r.toFixed(4)} ${p3.g.toFixed(4)} ${p3.b.toFixed(4)})`}}
 /**
-   * 处理CSS值，根据配置转换LAB和LCH颜色
+   * 处理CSS值，根据配置转换LAB、LCH颜色和math()函数
    * @param {string} value - CSS属性值
    * @param {Object} config - 配置对象
    * @returns {string} 处理后的值
-   */function processCSSValue(value,config){
-// 直接调用全局转换函数
-return convertAllLabLchColors(value,config)}
+   */function processCSSValue(value,config){let result=value;
+// 1. 首先处理math()函数
+if(config.enableMath){result=processMathFunctions(result,config)}
+// 2. 然后处理LAB和LCH颜色
+if(config.convertLabToRGB||config.convertLchToRGB){result=convertAllLabLchColors(result,config)}return result}
 // 私有方法：提取变量定义并移除（支持嵌套作用域）
-function extractVariablesAndCSS(cssText,config){const lines=cssText.split("\n");const globalVariables={};const selectorVariables=new Map;// 选择器 -> 变量映射
-let cssWithoutVars="";let currentSelector=null;let inSelectorBlock=false;let currentIndent=0;for(let line of lines){const trimmed=line.trim();
+function extractVariablesAndCSS(cssText,config){const lines=cssText.split("\n");const globalVariables={};const selectorVariables=new Map;let cssWithoutVars="";let currentSelector=null;let inSelectorBlock=false;let currentIndent=0;for(let line of lines){const trimmed=line.trim();
 // 检查是否是变量定义
 const varMatch=trimmed.match(/^\$([a-zA-Z0-9_-]+)\s*:\s*(.+?);?$/);if(varMatch){const[,varName,varValue]=varMatch;
-// 处理变量值中的LAB/LCH颜色转换
-const processedValue=convertAllLabLchColors(replaceVariableUsesInValue(varValue.trim(),{...globalVariables,...currentSelector?selectorVariables.get(currentSelector)||{}:{}}),config);if(currentSelector){
+// 处理变量值中的数学表达式和颜色转换
+const processedValue=processCSSValue(replaceVariableUsesInValue(varValue.trim(),{...globalVariables,...currentSelector?selectorVariables.get(currentSelector)||{}:{}}),config);if(currentSelector){
 // 选择器内部的变量
 if(!selectorVariables.has(currentSelector)){selectorVariables.set(currentSelector,{})}selectorVariables.get(currentSelector)[varName]=processedValue}else{
 // 全局变量（:root 中）
@@ -263,8 +366,8 @@ const rule={selector:selector,properties:[],children:[],indentLevel:indentLevel}
 stack.push(rule);continue}
 // 处理属性行（不包含 { 或 } 的行）
 if(!trimmed.includes("{")&&!trimmed.includes("}")&&trimmed.includes(":")){if(stack.length>0){const currentRule=stack[stack.length-1];
-// 处理属性值中的LAB/LCH颜色
-const parsed=parseSingleLineCSS(trimmed);parsed.forEach(obj=>{const key=Object.keys(obj)[0];const value=convertAllLabLchColors(obj[key],config);currentRule.properties.push(`${key}: ${value}`)})}continue}}
+// 处理属性值中的math()函数和颜色转换
+const parsed=parseSingleLineCSS(trimmed);parsed.forEach(obj=>{const key=Object.keys(obj)[0];const value=processCSSValue(obj[key],config);currentRule.properties.push(`${key}: ${value}`)})}continue}}
 // 处理栈中剩余规则
 while(stack.length>0){const rule=stack.pop();if(stack.length===0){rootRules.push(rule)}else{const parent=stack[stack.length-1];if(!parent.children)parent.children=[];parent.children.push(rule)}}
 // 将规则树转换为CSS字符串
@@ -277,8 +380,8 @@ const isAt=rule.selector.startsWith("@");let fullSelector=(isParentAt?"  ":"")+r
 if(fullSelector.includes("&")){fullSelector=fullSelector.replace(/&/g,parentSelector)}else if(fullSelector.trim().startsWith(":")){fullSelector=parentSelector+fullSelector}else{fullSelector=parentSelector+(isParentAt?"":" ")+fullSelector}}
 // 如果有属性，生成规则块
 if(rule.properties.length>0){result+=(isAt?"":fullSelector)+" {\n";for(const prop of rule.properties){
-// 再次处理属性值（确保LAB/LCH颜色被转换）
-const parsed=parseSingleLineCSS(prop);parsed.forEach(obj=>{const key=Object.keys(obj)[0];const value=convertAllLabLchColors(obj[key],config);result+=(isParentAt?"  ":"")+`  ${key}: ${value};\n`})}result+=isParentAt?"  }\n":"}\n\n"}
+// 再次处理属性值（确保math()函数和颜色被转换）
+const parsed=parseSingleLineCSS(prop);parsed.forEach(obj=>{const key=Object.keys(obj)[0];const value=processCSSValue(obj[key],config);result+=(isParentAt?"  ":"")+`  ${key}: ${value};\n`})}result+=isParentAt?"  }\n":"}\n\n"}
 // 递归处理子规则
 if(rule.children&&rule.children.length>0){result+=convertRulesToCSS(rule.children,config,fullSelector)}if(isParentAt){result+="}\n\n"}}return result.trim()+(isParentAt?"\n\n":"")}
 // 替换变量值中的变量引用
@@ -289,16 +392,16 @@ function replaceVariableUses(cssText,globalVariables,selectorVariables,config){l
 for(const[varName,varValue]of Object.entries(globalVariables)){const varRegex=new RegExp(`\\$${varName}(?![a-zA-Z0-9_-])`,"g");result=result.replace(varRegex,`var(--${varName})`)}
 // 然后处理选择器特定的变量
 result=result.replace(/\$([a-zA-Z0-9_-]+)/g,(match,varName)=>`var(--${varName})`);
-// 最后处理所有的LAB和LCH颜色（一次性全局处理）
-if(config.convertLabToRGB||config.convertLchToRGB){result=convertAllLabLchColors(result,config)}return result}
+// 最后处理所有的LAB、LCH颜色和math()函数
+result=processCSSValue(result,config);return result}
 // 生成根规则
-function generateRootRule(variables,config){if(Object.keys(variables).length===0){return""}const declarations=Object.entries(variables).map(([name,value])=>{const processedValue=convertAllLabLchColors(replaceVariableUsesInValue(value,variables),config);return`  --${name}: ${processedValue};`}).join("\n");return`${config.rootSelector} {\n${declarations}\n}\n\n`}
+function generateRootRule(variables,config){if(Object.keys(variables).length===0){return""}const declarations=Object.entries(variables).map(([name,value])=>{const processedValue=processCSSValue(replaceVariableUsesInValue(value,variables),config);return`  --${name}: ${processedValue};`}).join("\n");return`${config.rootSelector} {\n${declarations}\n}\n\n`}
 // 处理选择器内部的变量
 function injectSelectorVariables(cssText,selectorVariables,config){let result="";const lines=cssText.split("\n");let currentSelector=null;for(let line of lines){const trimmed=line.trim();if(trimmed.endsWith("{")){currentSelector=trimmed.slice(0,-1).trim()}if(trimmed==="}"&&currentSelector){
 // 在选择器结束前插入变量声明
 if(selectorVariables.has(currentSelector)){const vars=selectorVariables.get(currentSelector);const indent=line.match(/^(\s*)/)[0];for(const[varName,varValue]of Object.entries(vars)){result+=indent+"  --"+varName+": "+varValue+";\n"}}currentSelector=null}
-// 使用全局转换函数处理所有颜色
-if(config.convertLabToRGB||config.convertLchToRGB){result+=convertAllLabLchColors(line,config)+"\n"}else{result+=line+"\n"}}return result.trim()}
+// 使用全局处理函数处理所有math()和颜色
+result+=processCSSValue(line,config)+"\n"}return result.trim()}
 // 主转换函数
 function convert(cssText,customConfig={}){const config={...defaultConfig,...customConfig};
 // 1. 提取变量定义（区分全局和选择器局部）
@@ -324,11 +427,39 @@ if(!config.preserveOriginal){styleTag.remove()}else{styleTag.style.display="none
 // 初始化自动处理
 function apply(cssText,customConfig={}){const config={...defaultConfig,...customConfig};if(cssText){const converted=convert(cssText,config);const styleEl=document.createElement("style");styleEl.textContent=converted;document.head.appendChild(styleEl);return styleEl}else{if(document.readyState==="loading"){document.addEventListener("DOMContentLoaded",()=>{autoProcessStyleTags(config)})}else{autoProcessStyleTags(config)}}}
 // 返回公共 API
-const api={convert:convert,apply:apply,config:config,version:"1.8.0",
+const api={convert:convert,apply:apply,config:config,version:"1.9.0",
 // 检测P3支持
 supportsP3:detectP3Support(),
 // 重新检测P3支持（如果配置变化）
 detectP3Support:detectP3Support,
+// 数学计算工具方法
+math:{
+/**
+       * 计算数学表达式
+       * @param {string} expression - 数学表达式
+       * @returns {string} 计算结果
+       */
+evaluate:function(expression){return evaluateMathExpression(expression,defaultConfig)},
+/**
+       * 解析带单位的数值
+       * @param {string} value - 带单位的字符串
+       * @returns {Object} {value: number, unit: string}
+       */
+parseUnit:parseValueWithUnit,
+/**
+       * 四舍五入数字
+       * @param {number} num - 要四舍五入的数字
+       * @param {number} precision - 精度
+       * @returns {string} 四舍五入后的数字字符串
+       */
+round:roundNumber,
+/**
+       * 测试数学表达式
+       * @param {string} expression - 要测试的表达式
+       * @param {Object} testConfig - 测试配置
+       * @returns {Object} 测试结果
+       */
+test:function(expression,testConfig={}){const config={...defaultConfig,...testConfig};try{const result=evaluateMathExpression(expression,config);return{success:true,expression:expression,result:result,parsed:parseValueWithUnit(result.replace(/^calc\(|\)$/g,""))}}catch(error){return{success:false,expression:expression,error:error.message}}}},
 // 颜色转换工具方法
 colorUtils:{labToRGB:preciseLabToRGB,lchToLab:lchToLab,lchToRGB:function(L,C,H){const lab=lchToLab(L,C,H);return preciseLabToRGB(lab.L,lab.a,lab.b)},labToP3:labToP3,lchToP3:function(L,C,H){const lab=lchToLab(L,C,H);return labToP3(lab.L,lab.a,lab.b)},parseHexLab:function(hexString){const match=hexString.match(/lab#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i);if(!match)return null;const L_hex=match[1];const A_hex=match[2];const B_hex=match[3];const L=parseInt(L_hex,16)/255*100;const A=(parseInt(A_hex,16)-128)*1.5;const B=(parseInt(B_hex,16)-128)*1.5;return preciseLabToRGB(L,A,B)},parseHexLch:function(hexString){const match=hexString.match(/lch#([0-9a-f]{2})([0-9a-f]{2})(\d{1,3})/i);if(!match)return null;const L_hex=match[1];const C_hex=match[2];const H_dec=match[3];const L=parseInt(L_hex,16)/255*100;const C=parseInt(C_hex,16)/255*150;const H=parseInt(H_dec)/100*360;const lab=lchToLab(L,C,H);return preciseLabToRGB(lab.L,lab.a,lab.b)},
 /**
@@ -352,4 +483,4 @@ const labMatch=colorString.match(/lab\(\s*([\d.]+)(%?)\s+([\d.-]+)\s+([\d.-]+)(?
 // 尝试解析lch()函数格式
 const lchMatch=colorString.match(/lch\(\s*([\d.]+)(%?)\s+([\d.]+)\s+([\d.]+)(deg)?(?:\s*\/\s*([\d.%]+))?\s*\)/i);if(lchMatch){let L=parseFloat(lchMatch[1]);const C=parseFloat(lchMatch[3]);let H=parseFloat(lchMatch[4]);const alpha=lchMatch[6]?lchMatch[6].includes("%")?parseFloat(lchMatch[6])/100:parseFloat(lchMatch[6]):null;const lab=lchToLab(L,C,H);const colorStr=generateColorString(lab.L,lab.a,lab.b,defaultConfig,alpha);return{L:L,C:C,H:H,alpha:alpha,lab:lab,rgb:preciseLabToRGB(lab.L,lab.a,lab.b),p3:labToP3(lab.L,lab.a,lab.b),colorString:colorStr}}return null}catch(error){console.warn("无法解析颜色:",colorString,error);return null}}}};
 // 自动初始化
-if(typeof window!=="undefined"){apply();Object.defineProperty(window.HTMLElement.prototype,"cssVar",{get(){const element=this;return new Proxy({},{get(target,prop){const varName=prop.startsWith("$")?prop.slice(1):prop;return element.style.getPropertyValue(varName)},set(target,prop,value){const varName=prop.startsWith("$")?prop.slice(1):prop;element.style.setProperty(varName,value);return true}})}})}return api});
+if(typeof window!=="undefined"){apply();Object.defineProperty(window.HTMLElement.prototype,"cssVar",{get(){const element=this;return new Proxy({},{get(target,prop){const varName=prop.startsWith("--")?prop:`--${prop}`;return element.style.getPropertyValue(varName)},set(target,prop,value){const varName=prop.startsWith("--")?prop:`--${prop}`;element.style.setProperty(varName,value);return true}})}})}return api});