styimat 1.5.0 → 1.6.1

package/styimat.js

@@ -11,1530 +11,1537 @@
  * 增强 math() 函数，支持复杂数学计算
  */
 (function(root, factory) {
-  if (typeof define === 'function' && define.amd) {
-    // AMD 支持 (RequireJS)
-    define([], factory);
-  } else if (typeof module === 'object' && module.exports) {
-    // CommonJS 支持 (Node.js, Browserify, Webpack)
-    module.exports = factory();
-  } else {
-    // 浏览器全局变量
-    root.styimat = factory();
-  }
+    if (typeof define === 'function' && define.amd) {
+        // AMD 支持 (RequireJS)
+        define([], factory);
+    } else if (typeof module === 'object' && module.exports) {
+        // CommonJS 支持 (Node.js, Browserify, Webpack)
+        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,
-    convertLchToRGB: true,
-    enableP3: true,
-    enableMath: true, // 启用math()函数增强
-    mathPrecision: 6, // 数学计算精度
-  };
+    // 默认配置
+    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;
+    // 全局P3支持检测结果
+    let p3Supported = null;
 
-  /**
-   * 检测浏览器是否支持 Display P3
-   * @returns {boolean} 是否支持P3
-   */
-  function detectP3Support() {
-    if (p3Supported !== null) return p3Supported;
-    
-    if (typeof window === 'undefined' || !window.CSS) {
-      p3Supported = false;
-      return false;
-    }
-    
-    try {
-      p3Supported = CSS.supports('color', 'color(display-p3 1 0 0)');
-    } catch (error) {
-      console.warn('P3支持检测失败:', error);
-      p3Supported = false;
+    /**
+     * 检测浏览器是否支持 Display P3
+     * @returns {boolean} 是否支持P3
+     */
+    function detectP3Support() {
+        if (p3Supported !== null) return p3Supported;
+        
+        if (typeof window === 'undefined' || !window.CSS) {
+            p3Supported = false;
+            return false;
+        }
+        
+        try {
+            p3Supported = CSS.supports('color', 'color(display-p3 1 0 0)');
+        } catch (error) {
+            console.warn('P3支持检测失败:', error);
+            p3Supported = false;
+        }
+        
+        return p3Supported;
     }
-    
-    return p3Supported;
-  }
 
-  /**
-   * 解析一行CSS（可能多个语句在同一行，可能最后一个语句没有分号）
-   * 返回格式：[{属性名:值}, {属性名:值}, ...]
-   * @param {string} cssString - 要解析的CSS字符串
-   * @returns {Array} 包含属性名值对象的数组
-   */
-  function parseSingleLineCSS(cssString) {
-    // 移除首尾空白字符
-    let str = cssString.trim();
-    
-    // 如果以分号结尾，移除最后一个分号
-    if (str.endsWith(';')) {
-      str = str.slice(0, -1);
-    }
-    
-    // 如果字符串为空，返回空数组
-    if (!str) {
-      return [];
-    }
-    
-    // 分割多个CSS声明（以分号分隔）
-    const declarations = [];
-    let currentDeclaration = '';
-    let inParens = 0; // 记录括号嵌套层数，用于处理函数内的分号
-    let inQuotes = false; // 是否在引号内
-    let quoteChar = ''; // 当前引号字符
-    
-    for (let i = 0; i < str.length; i++) {
-      const char = str[i];
-      
-      // 处理引号
-      if ((char === '"' || char === "'") && !inQuotes) {
-        inQuotes = true;
-        quoteChar = char;
-      } else if (char === quoteChar && inQuotes) {
-        inQuotes = false;
-        quoteChar = '';
-      }
-      
-      // 处理括号（不在引号内时）
-      if (!inQuotes) {
-        if (char === '(') {
-          inParens++;
-        } else if (char === ')') {
-          inParens--;
+    /**
+     * 解析一行CSS（可能多个语句在同一行，可能最后一个语句没有分号）
+     * 返回格式：[{属性名:值}, {属性名:值}, ...]
+     * @param {string} cssString - 要解析的CSS字符串
+     * @returns {Array} 包含属性名值对象的数组
+     */
+    function parseSingleLineCSS(cssString) {
+        // 移除首尾空白字符
+        let str = cssString.trim();
+        
+        // 如果以分号结尾，移除最后一个分号
+        if (str.endsWith(';')) {
+            str = str.slice(0, -1);
+        }
+        
+        // 如果字符串为空，返回空数组
+        if (!str) {
+            return [];
+        }
+        
+        // 分割多个CSS声明（以分号分隔）
+        const declarations = [];
+        let currentDeclaration = '';
+        let inParens = 0; // 记录括号嵌套层数，用于处理函数内的分号
+        let inQuotes = false; // 是否在引号内
+        let quoteChar = ''; // 当前引号字符
+        
+        for (let i = 0; i < str.length; i++) {
+            const char = str[i];
+            
+            // 处理引号
+            if ((char === '"' || char === "'") && !inQuotes) {
+                inQuotes = true;
+                quoteChar = char;
+            } else if (char === quoteChar && inQuotes) {
+                inQuotes = false;
+                quoteChar = '';
+            }
+            
+            // 处理括号（不在引号内时）
+            if (!inQuotes) {
+                if (char === '(') {
+                    inParens++;
+                } else if (char === ')') {
+                    inParens--;
+                }
+            }
+            
+            // 如果遇到分号且不在括号和引号内，则分割声明
+            if (char === ';' && !inQuotes && inParens === 0) {
+                if (currentDeclaration.trim()) {
+                    declarations.push(currentDeclaration.trim());
+                    currentDeclaration = '';
+                }
+            } else {
+                currentDeclaration += char;
+            }
         }
-      }
-      
-      // 如果遇到分号且不在括号和引号内，则分割声明
-      if (char === ';' && !inQuotes && inParens === 0) {
+        
+        // 添加最后一个声明（如果没有分号结尾）
         if (currentDeclaration.trim()) {
-          declarations.push(currentDeclaration.trim());
-          currentDeclaration = '';
+            declarations.push(currentDeclaration.trim());
         }
-      } else {
-        currentDeclaration += char;
-      }
-    }
-    
-    // 添加最后一个声明（如果没有分号结尾）
-    if (currentDeclaration.trim()) {
-      declarations.push(currentDeclaration.trim());
-    }
-    
-    // 解析每个声明为对象
-    const result = [];
-    
-    for (const declaration of declarations) {
-      // 跳过空声明
-      if (!declaration.trim()) continue;
-      
-      // 查找第一个冒号的位置
-      const colonIndex = findFirstColonOutsideQuotes(declaration);
-      
-      if (colonIndex === -1) {
-        console.warn(`无效的CSS声明: "${declaration}"`);
-        continue;
-      }
-      
-      // 分割属性名和值
-      const property = declaration.substring(0, colonIndex).trim();
-      let value = declaration.substring(colonIndex + 1).trim();
-      
-      // 如果值以分号结尾，移除它（理论上不应该有，但处理一下）
-      if (value.endsWith(';')) {
-        value = value.slice(0, -1).trim();
-      }
-      
-      // 添加到结果数组
-      result.push({ [property]: value });
+        
+        // 解析每个声明为对象
+        const result = [];
+        
+        for (const declaration of declarations) {
+            // 跳过空声明
+            if (!declaration.trim()) continue;
+            
+            // 查找第一个冒号的位置
+            const colonIndex = findFirstColonOutsideQuotes(declaration);
+            
+            if (colonIndex === -1) {
+                console.warn(`无效的CSS声明: "${declaration}"`);
+                continue;
+            }
+            
+            // 分割属性名和值
+            const property = declaration.substring(0, colonIndex).trim();
+            let value = declaration.substring(colonIndex + 1).trim();
+            
+            // 如果值以分号结尾，移除它（理论上不应该有，但处理一下）
+            if (value.endsWith(';')) {
+                value = value.slice(0, -1).trim();
+            }
+            
+            // 添加到结果数组
+            result.push({ [property]: value });
+        }
+        
+        return result;
     }
-    
-    return result;
-  }
 
-  /**
-   * 查找不在引号内的第一个冒号位置
-   * @param {string} str 
-   * @returns {number}
-   */
-  function findFirstColonOutsideQuotes(str) {
-    let inQuotes = false;
-    let quoteChar = '';
-    
-    for (let i = 0; i < str.length; i++) {
-      const char = str[i];
-      
-      // 处理引号
-      if ((char === '"' || char === "'") && !inQuotes) {
-        inQuotes = true;
-        quoteChar = char;
-      } else if (char === quoteChar && inQuotes) {
-        inQuotes = false;
-        quoteChar = '';
-      }
-      
-      // 如果找到冒号且不在引号内，返回位置
-      if (char === ':' && !inQuotes) {
-        return i;
-      }
+    /**
+     * 查找不在引号内的第一个冒号位置
+     * @param {string} str 
+     * @returns {number}
+     */
+    function findFirstColonOutsideQuotes(str) {
+        let inQuotes = false;
+        let quoteChar = '';
+        
+        for (let i = 0; i < str.length; i++) {
+            const char = str[i];
+            
+            // 处理引号
+            if ((char === '"' || char === "'") && !inQuotes) {
+                inQuotes = true;
+                quoteChar = char;
+            } else if (char === quoteChar && inQuotes) {
+                inQuotes = false;
+                quoteChar = '';
+            }
+            
+            // 如果找到冒号且不在引号内，返回位置
+            if (char === ':' && !inQuotes) {
+                return i;
+            }
+        }
+        
+        return -1;
     }
-    
-    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} 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);
+    /**
+     * 解析数学表达式
+     * @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);
     }
-    
-    // 现在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);
+    /**
+     * 评估简单表达式（无括号）
+     * @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;
     }
-    
-    // 解析最终结果
-    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}`);
+    /**
+     * 解析带单位的数值
+     * @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 };
     }
-    
-    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 + '%';
+    /**
+     * 检查表达式是否包含单位
+     * @param {string} expr - 表达式
+     * @returns {boolean} 是否包含单位
+     */
+    function hasUnits(expr) {
+        return /[a-zA-Z%]/.test(expr);
     }
-    
-    // 默认为像素
-    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 };
+    /**
+     * 处理带单位的表达式
+     * @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';
     }
-    
-    // 单位不匹配，返回原始表达式
-    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: '' };
+    // 数学运算函数
+    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: '' };
     }
-    
-    // 单位不匹配，返回原始表达式
-    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 };
+    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: '' };
     }
-    
-    // 单位不匹配，返回原始表达式
-    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 };
+    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: '' };
     }
-    
-    // 单位不匹配，返回原始表达式
-    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(/\.$/, '');
+    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: '' };
     }
-    return str;
-  }
 
-  /**
-   * 处理所有的math()函数
-   * @param {string} cssValue - CSS属性值
-   * @param {Object} config - 配置对象
-   * @returns {string} 转换后的CSS值
-   */
-  function processMathFunctions(cssValue, config) {
-    if (!config.enableMath) {
-      return cssValue;
+    /**
+     * 四舍五入到指定精度
+     * @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;
     }
-    
-    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属性值
-   * @param {Object} config - 配置对象
-   * @returns {string} 转换后的CSS值
-   */
-  function convertAllLabLchColors(cssValue, config) {
-    if (!config.convertLabToRGB && !config.convertLchToRGB) {
-      return cssValue;
-    }
-    
-    let result = cssValue;
-    
-    // 首先处理特殊的十六进制格式
-    result = parseHexColorFormats(result, config);
-    
-    // 一次性处理所有的 lab() 和 lch() 函数
-    const colorFunctionRegex = /(lab|lch)\([^)]+\)/gi;
-    
-    // 存储已经处理过的颜色字符串，避免重复处理
-    const processedColors = new Map();
-    
-    // 使用一个函数来递归处理嵌套的颜色函数
-    const processColorFunctions = (str) => {
-      return str.replace(colorFunctionRegex, (match) => {
-        // 如果这个颜色已经处理过，直接返回缓存结果
-        if (processedColors.has(match)) {
-          return processedColors.get(match);
+    /**
+     * 处理所有的math()函数
+     * @param {string} cssValue - CSS属性值
+     * @param {Object} config - 配置对象
+     * @returns {string} 转换后的CSS值
+     */
+    function processMathFunctions(cssValue, config) {
+        if (!config.enableMath) {
+            return cssValue;
         }
         
-        let converted = match;
-        
-        // 根据函数类型处理
-        if (match.toLowerCase().startsWith('lab(')) {
-          if (config.convertLabToRGB) {
-            converted = convertSingleLabColor(match, config);
-          }
-        } else if (match.toLowerCase().startsWith('lch(')) {
-          if (config.convertLchToRGB) {
-            converted = convertSingleLchColor(match, config);
-          }
-        }
+        let result = cssValue;
         
-        // 缓存结果
-        processedColors.set(match, converted);
-        return converted;
-      });
-    };
-    
-    // 递归处理，直到没有更多颜色函数
-    let lastResult;
-    do {
-      lastResult = result;
-      result = processColorFunctions(result);
-    } while (result !== lastResult);
-    
-    return result;
-  }
-
-  /**
-   * 解析十六进制颜色格式：lab#L16A16B16 或 lch#L16C16H
-   * @param {string} value - 颜色值
-   * @param {Object} config - 配置对象
-   * @returns {string} 转换后的CSS颜色
-   */
-  function parseHexColorFormats(value, config) {
-    let result = value;
-    
-    // 使用正则表达式一次性匹配所有 lab# 和 lch# 格式
-    const hexLabRegex = /lab#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/gi;
-    const hexLchRegex = /lch#([0-9a-f]{2})([0-9a-f]{2})(\d{1,3})/gi;
-    
-    // 存储处理过的十六进制颜色，避免重复处理
-    const processedHexColors = new Map();
-    
-    // 处理 lab# 格式
-    result = result.replace(hexLabRegex, (match, L_hex, A_hex, B_hex) => {
-      if (processedHexColors.has(match)) {
-        return processedHexColors.get(match);
-      }
-      
-      try {
-        // 将十六进制转换为十进制，并映射到Lab范围
-        const L = parseInt(L_hex, 16) / 255 * 100; // 0-100
-        const A = (parseInt(A_hex, 16) - 128) * 1.5; // 大约 -192 到 192
-        const B = (parseInt(B_hex, 16) - 128) * 1.5; // 大约 -192 到 192
-        
-        const converted = generateColorString(L, A, B, config);
-        processedHexColors.set(match, converted);
-        return converted;
-      } catch (error) {
-        console.warn(`无法解析lab#十六进制颜色: ${match}`, error);
-        return match;
-      }
-    });
-    
-    // 处理 lch# 格式
-    result = result.replace(hexLchRegex, (match, L_hex, C_hex, H_dec) => {
-      if (processedHexColors.has(match)) {
-        return processedHexColors.get(match);
-      }
-      
-      try {
-        // 将十六进制转换为十进制，并映射到LCH范围
-        const L = parseInt(L_hex, 16) / 255 * 100; // 0-100
-        const C = parseInt(C_hex, 16) / 255 * 150; // 0-150
-        const H = parseInt(H_dec) / 100 * 360; // 0-360
-        
-        const lab = lchToLab(L, C, H);
-        const converted = generateColorString(lab.L, lab.a, lab.b, config);
-        processedHexColors.set(match, converted);
-        return converted;
-      } catch (error) {
-        console.warn(`无法解析lch#十六进制颜色: ${match}`, error);
-        return match;
-      }
-    });
-    
-    return result;
-  }
-
-  /**
-   * 转换单个 lab() 颜色函数
-   * @param {string} labString - lab() 颜色字符串
-   * @param {Object} config - 配置对象
-   * @returns {string} 转换后的颜色字符串
-   */
-  function convertSingleLabColor(labString, config) {
-    // 使用更精确的正则匹配 lab() 函数
-    const labRegex = /lab\(\s*([\d.]+)(%?)\s+([\d.-]+)\s+([\d.-]+)(?:\s*\/\s*([\d.%]+))?\s*\)/i;
-    const match = labString.match(labRegex);
-    
-    if (!match) {
-      return labString;
-    }
-    
-    try {
-      // 转换为数字
-      let L = parseFloat(match[1]);
-      
-      // 如果L有百分号，转换为0-100范围的值
-      if (match[2] === '%') {
-        L = L; // 百分比值直接使用 (0-100)
-      } else {
-        // 没有百分号，确保在0-100范围内
-        if (L < 0) L = 0;
-        if (L > 100) L = 100;
-      }
-      
-      const A = parseFloat(match[3]);
-      const B = parseFloat(match[4]);
-      
-      // 处理 alpha 通道（如果有）
-      const alphaValue = match[5] !== undefined
-        ? match[5].includes('%') 
-          ? parseFloat(match[5]) / 100 
-          : parseFloat(match[5])
-        : null;
-      
-      return generateColorString(L, A, B, config, alphaValue);
-    } catch (error) {
-      console.warn(`无法转换LAB颜色: ${labString}`, error);
-      return labString;
+        // 匹配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;
     }
-  }
 
-  /**
-   * 转换单个 lch() 颜色函数
-   * @param {string} lchString - lch() 颜色字符串
-   * @param {Object} config - 配置对象
-   * @returns {string} 转换后的颜色字符串
-   */
-  function convertSingleLchColor(lchString, config) {
-    // 使用更精确的正则匹配 lch() 函数
-    const lchRegex = /lch\(\s*([\d.]+)(%?)\s+([\d.]+)\s+([\d.]+)(deg)?(?:\s*\/\s*([\d.%]+))?\s*\)/i;
-    const match = lchString.match(lchRegex);
-    
-    if (!match) {
-      return lchString;
-    }
-    
-    try {
-      // 转换为数字
-      let L = parseFloat(match[1]);
-      
-      // 如果L有百分号，转换为0-100范围的值
-      if (match[2] === '%') {
-        L = L; // 百分比值直接使用 (0-100)
-      } else {
-        // 没有百分号，确保在0-100范围内
-        if (L < 0) L = 0;
-        if (L > 100) L = 100;
-      }
-      
-      const C = parseFloat(match[3]);
-      let H = parseFloat(match[4]);
-      
-      // 验证C范围：>= 0
-      if (C < 0) {
-        console.warn(`LCH中的C值不能为负: ${C}`);
-      }
-      
-      // 验证H范围：0-360，有deg单位或无单位都是0-360
-      H = ((H % 360) + 360) % 360; // 标准化到0-360
-      
-      // LCH -> Lab
-      const lab = lchToLab(L, C, H);
-      
-      // 处理 alpha 通道（如果有）
-      const alphaValue = match[6] !== undefined
-        ? match[6].includes('%') 
-          ? parseFloat(match[6]) / 100 
-          : parseFloat(match[6])
-        : null;
-      
-      return generateColorString(lab.L, lab.a, lab.b, config, alphaValue);
-    } catch (error) {
-      console.warn(`无法转换LCH颜色: ${lchString}`, error);
-      return lchString;
+    /**
+     * 解析并转换所有的 Lab 和 LCH 颜色（全局一次性处理）
+     * @param {string} cssValue - CSS属性值
+     * @param {Object} config - 配置对象
+     * @returns {string} 转换后的CSS值
+     */
+    function convertAllLabLchColors(cssValue, config) {
+        if (!config.convertLabToRGB && !config.convertLchToRGB) {
+            return cssValue;
+        }
+        
+        let result = cssValue;
+        
+        // 首先处理特殊的十六进制格式
+        result = parseHexColorFormats(result, config);
+        
+        // 一次性处理所有的 lab() 和 lch() 函数
+        const colorFunctionRegex = /(lab|lch)\([^)]+\)/gi;
+        
+        // 存储已经处理过的颜色字符串，避免重复处理
+        const processedColors = new Map();
+        
+        // 使用一个函数来递归处理嵌套的颜色函数
+        const processColorFunctions = (str) => {
+            return str.replace(colorFunctionRegex, (match) => {
+                // 如果这个颜色已经处理过，直接返回缓存结果
+                if (processedColors.has(match)) {
+                    return processedColors.get(match);
+                }
+                
+                let converted = match;
+                
+                // 根据函数类型处理
+                if (match.toLowerCase().startsWith('lab(')) {
+                    if (config.convertLabToRGB) {
+                        converted = convertSingleLabColor(match, config);
+                    }
+                } else if (match.toLowerCase().startsWith('lch(')) {
+                    if (config.convertLchToRGB) {
+                        converted = convertSingleLchColor(match, config);
+                    }
+                }
+                
+                // 缓存结果
+                processedColors.set(match, converted);
+                return converted;
+            });
+        };
+        
+        // 递归处理，直到没有更多颜色函数
+        let lastResult;
+        do {
+            lastResult = result;
+            result = processColorFunctions(result);
+        } while (result !== lastResult);
+        
+        return result;
     }
-  }
 
-  /**
-   * LCH 转换为 Lab (CSS标准)
-   * @param {number} L - 明度 0-100 或 0%-100%
-   * @param {number} C - 色度 >=0
-   * @param {number} H - 色相角 0-360 度
-   * @returns {Object} Lab 值 {L, a, b}
-   */
-  function lchToLab(L, C, H) {
-    // 角度转换为弧度
-    const H_rad = H * Math.PI / 180;
-    
-    // LCH -> Lab 转换公式
-    const a = C * Math.cos(H_rad);
-    const b = C * Math.sin(H_rad);
-    
-    return { L, a, b };
-  }
+    /**
+     * 解析十六进制颜色格式：lab#L16A16B16 或 lch#L16C16H
+     * @param {string} value - 颜色值
+     * @param {Object} config - 配置对象
+     * @returns {string} 转换后的CSS颜色
+     */
+    function parseHexColorFormats(value, config) {
+        let result = value;
+        
+        // 使用正则表达式一次性匹配所有 lab# 和 lch# 格式
+        const hexLabRegex = /lab#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/gi;
+        const hexLchRegex = /lch#([0-9a-f]{2})([0-9a-f]{2})(\d{1,3})/gi;
+        
+        // 存储处理过的十六进制颜色，避免重复处理
+        const processedHexColors = new Map();
+        
+        // 处理 lab# 格式
+        result = result.replace(hexLabRegex, (match, L_hex, A_hex, B_hex) => {
+            if (processedHexColors.has(match)) {
+                return processedHexColors.get(match);
+            }
+            
+            try {
+                // 将十六进制转换为十进制，并映射到Lab范围
+                const L = parseInt(L_hex, 16) / 255 * 100; // 0-100
+                const A = (parseInt(A_hex, 16) - 128) * 1.5; // 大约 -192 到 192
+                const B = (parseInt(B_hex, 16) - 128) * 1.5; // 大约 -192 到 192
+                
+                const converted = generateColorString(L, A, B, config);
+                processedHexColors.set(match, converted);
+                return converted;
+            } catch (error) {
+                console.warn(`无法解析lab#十六进制颜色: ${match}`, error);
+                return match;
+            }
+        });
+        
+        // 处理 lch# 格式
+        result = result.replace(hexLchRegex, (match, L_hex, C_hex, H_dec) => {
+            if (processedHexColors.has(match)) {
+                return processedHexColors.get(match);
+            }
+            
+            try {
+                // 将十六进制转换为十进制，并映射到LCH范围
+                const L = parseInt(L_hex, 16) / 255 * 100; // 0-100
+                const C = parseInt(C_hex, 16) / 255 * 150; // 0-150
+                const H = parseInt(H_dec) / 100 * 360; // 0-360
+                
+                const lab = lchToLab(L, C, H);
+                const converted = generateColorString(lab.L, lab.a, lab.b, config);
+                processedHexColors.set(match, converted);
+                return converted;
+            } catch (error) {
+                console.warn(`无法解析lch#十六进制颜色: ${match}`, error);
+                return match;
+            }
+        });
+        
+        return result;
+    }
 
-  // 精确的 Lab -> sRGB 转换函数
-  function preciseLabToRGB(L, a, b) {
-    // 1. Lab -> XYZ (D65白点)
-    const labToXyz = (L, a, b) => {
-      // D65 白点参考值
-      const refX = 0.95047;
-      const refY = 1.00000;
-      const refZ = 1.08883;
-      
-      const epsilon = 0.008856;
-      const kappa = 903.3;
-      
-      const fy = (L + 16) / 116;
-      const fx = a / 500 + fy;
-      const fz = fy - b / 200;
-      
-      const xr = fx ** 3 > epsilon ? fx ** 3 : (116 * fx - 16) / kappa;
-      const yr = L > kappa * epsilon ? ((L + 16) / 116) ** 3 : L / kappa;
-      const zr = fz ** 3 > epsilon ? fz ** 3 : (116 * fz - 16) / kappa;
-      
-      return [
-        xr * refX,
-        yr * refY,
-        zr * refZ
-      ];
-    };
-    
-    // 2. XYZ -> Linear RGB
-    const xyzToLinearRgb = (x, y, z) => {
-      // sRGB 转换矩阵 (D65)
-      const M = [
-        [ 3.2404542, -1.5371385, -0.4985314],
-        [-0.9692660,  1.8760108,  0.0415560],
-        [ 0.0556434, -0.2040259,  1.0572252]
-      ];
-      
-      const r = M[0][0] * x + M[0][1] * y + M[0][2] * z;
-      const g = M[1][0] * x + M[1][1] * y + M[1][2] * z;
-      const b = M[2][0] * x + M[2][1] * y + M[2][2] * z;
-      
-      return [r, g, b];
-    };
-    
-    // 3. sRGB Gamma 校正
-    const applyGamma = (c) => {
-      const sign = c < 0 ? -1 : 1;
-      const absC = Math.abs(c);
-      
-      if (absC <= 0.0031308) {
-        return sign * 12.92 * absC;
-      } else {
-        return sign * (1.055 * Math.pow(absC, 1/2.4) - 0.055);
-      }
-    };
-    
-    // 4. 钳制到 [0, 255]
-    const clamp = (value) => {
-      return Math.max(0, Math.min(255, Math.round(value * 255)));
-    };
-    
-    // 执行转换
-    const [X, Y, Z] = labToXyz(L, a, b);
-    const [linearR, linearG, linearB] = xyzToLinearRgb(X, Y, Z);
-    
-    const r = applyGamma(linearR);
-    const g = applyGamma(linearG);
-    const bOut = applyGamma(linearB);
-    
-    // 返回钳制后的 RGB 值
-    return {
-      r: clamp(r),
-      g: clamp(g),
-      b: clamp(bOut)
-    };
-  }
+    /**
+     * 转换单个 lab() 颜色函数
+     * @param {string} labString - lab() 颜色字符串
+     * @param {Object} config - 配置对象
+     * @returns {string} 转换后的颜色字符串
+     */
+    function convertSingleLabColor(labString, config) {
+        // 使用更精确的正则匹配 lab() 函数
+        const labRegex = /lab\(\s*([\d.]+)(%?)\s+([\d.-]+)\s+([\d.-]+)(?:\s*\/\s*([\d.%]+))?\s*\)/i;
+        const match = labString.match(labRegex);
+        
+        if (!match) {
+            return labString;
+        }
+        
+        try {
+            // 转换为数字
+            let L = parseFloat(match[1]);
+            
+            // 如果L有百分号，转换为0-100范围的值
+            if (match[2] === '%') {
+                L = L; // 百分比值直接使用 (0-100)
+            } else {
+                // 没有百分号，确保在0-100范围内
+                if (L < 0) L = 0;
+                if (L > 100) L = 100;
+            }
+            
+            const A = parseFloat(match[3]);
+            const B = parseFloat(match[4]);
+            
+            // 处理 alpha 通道（如果有）
+            const alphaValue = match[5] !== undefined
+                ? match[5].includes('%') 
+                    ? parseFloat(match[5]) / 100 
+                    : parseFloat(match[5])
+                : null;
+            
+            return generateColorString(L, A, B, config, alphaValue);
+        } catch (error) {
+            console.warn(`无法转换LAB颜色: ${labString}`, error);
+            return labString;
+        }
+    }
 
-  /**
-   * Lab -> Display P3 转换
-   * @param {number} L - 明度 0-100
-   * @param {number} a - a分量
-   * @param {number} b - b分量
-   * @returns {Object} P3颜色 {r, g, b}
-   */
-  function labToP3(L, a, b) {
-    // 1. Lab -> XYZ (使用与RGB相同的转换)
-    const labToXyz = (L, a, b) => {
-      const refX = 0.95047;
-      const refY = 1.00000;
-      const refZ = 1.08883;
-      
-      const epsilon = 0.008856;
-      const kappa = 903.3;
-      
-      const fy = (L + 16) / 116;
-      const fx = a / 500 + fy;
-      const fz = fy - b / 200;
-      
-      const xr = fx ** 3 > epsilon ? fx ** 3 : (116 * fx - 16) / kappa;
-      const yr = L > kappa * epsilon ? ((L + 16) / 116) ** 3 : L / kappa;
-      const zr = fz ** 3 > epsilon ? fz ** 3 : (116 * fz - 16) / kappa;
-      
-      return [
-        xr * refX,
-        yr * refY,
-        zr * refZ
-      ];
-    };
-    
-    // 2. XYZ -> Linear P3
-    const xyzToLinearP3 = (x, y, z) => {
-      // Display P3 转换矩阵 (D65)
-      const M = [
-        [ 2.493496911941425, -0.9313836179191239, -0.40271078445071684],
-        [-0.8294889695615747,  1.7626640603183463,  0.023624685841943577],
-        [ 0.03584583024378447, -0.07617238926804182, 0.9568845240076872]
-      ];
-      
-      const r = M[0][0] * x + M[0][1] * y + M[0][2] * z;
-      const g = M[1][0] * x + M[1][1] * y + M[1][2] * z;
-      const b = M[2][0] * x + M[2][1] * y + M[2][2] * z;
-      
-      return [r, g, b];
-    };
-    
-    // 3. P3 Gamma 校正（与sRGB相同）
-    const applyGamma = (c) => {
-      const sign = c < 0 ? -1 : 1;
-      const absC = Math.abs(c);
-      
-      if (absC <= 0.0031308) {
-        return sign * 12.92 * absC;
-      } else {
-        return sign * (1.055 * Math.pow(absC, 1/2.4) - 0.055);
-      }
-    };
-    
-    // 4. 钳制到 [0, 255]，然后转换为 [0, 1] 范围
-    const clamp = (value) => {
-      return Math.max(0, Math.min(255, Math.round(value * 255)));
-    };
-    
-    // 执行转换
-    try {
-      const [X, Y, Z] = labToXyz(L, a, b);
-      const [linearR, linearG, linearB] = xyzToLinearP3(X, Y, Z);
-      
-      const r = applyGamma(linearR);
-      const g = applyGamma(linearG);
-      const bOut = applyGamma(linearB);
-      
-      // 转换为0-1范围的浮点数用于P3颜色格式
-      return {
-        r: Math.max(0, Math.min(1, r)),
-        g: Math.max(0, Math.min(1, g)),
-        b: Math.max(0, Math.min(1, bOut))
-      };
-    } catch (error) {
-      console.warn('P3转换失败:', error);
-      const rgb = preciseLabToRGB(L, a, b);
-      return {
-        r: rgb.r / 255,
-        g: rgb.g / 255,
-        b: rgb.b / 255
-      };
+    /**
+     * 转换单个 lch() 颜色函数
+     * @param {string} lchString - lch() 颜色字符串
+     * @param {Object} config - 配置对象
+     * @returns {string} 转换后的颜色字符串
+     */
+    function convertSingleLchColor(lchString, config) {
+        // 使用更精确的正则匹配 lch() 函数
+        const lchRegex = /lch\(\s*([\d.]+)(%?)\s+([\d.]+)\s+([\d.]+)(deg)?(?:\s*\/\s*([\d.%]+))?\s*\)/i;
+        const match = lchString.match(lchRegex);
+        
+        if (!match) {
+            return lchString;
+        }
+        
+        try {
+            // 转换为数字
+            let L = parseFloat(match[1]);
+            
+            // 如果L有百分号，转换为0-100范围的值
+            if (match[2] === '%') {
+                L = L; // 百分比值直接使用 (0-100)
+            } else {
+                // 没有百分号，确保在0-100范围内
+                if (L < 0) L = 0;
+                if (L > 100) L = 100;
+            }
+            
+            const C = parseFloat(match[3]);
+            let H = parseFloat(match[4]);
+            
+            // 验证C范围：>= 0
+            if (C < 0) {
+                console.warn(`LCH中的C值不能为负: ${C}`);
+            }
+            
+            // 验证H范围：0-360，有deg单位或无单位都是0-360
+            H = ((H % 360) + 360) % 360; // 标准化到0-360
+            
+            // LCH -> Lab
+            const lab = lchToLab(L, C, H);
+            
+            // 处理 alpha 通道（如果有）
+            const alphaValue = match[6] !== undefined
+                ? match[6].includes('%') 
+                    ? parseFloat(match[6]) / 100 
+                    : parseFloat(match[6])
+                : null;
+            
+            return generateColorString(lab.L, lab.a, lab.b, config, alphaValue);
+        } catch (error) {
+            console.warn(`无法转换LCH颜色: ${lchString}`, error);
+            return lchString;
+        }
     }
-  }
 
-  /**
-   * 生成颜色字符串（根据P3支持情况输出P3或RGB）
-   * @param {number} L - Lab L值
-   * @param {number} a - Lab a值
-   * @param {number} b - Lab b值
-   * @param {Object} config - 配置对象
-   * @param {number|null} alpha - 透明度值
-   * @returns {string} CSS颜色字符串
-   */
-  function generateColorString(L, a, b, config, alpha = null) {
-    if (!config.enableP3 || !detectP3Support()) {
-      // 使用RGB
-      const rgb = preciseLabToRGB(L, a, b);
-      if (alpha !== null) {
-        return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
-      }
-      return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
-    } else {
-      // 使用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)})`;
+    /**
+     * LCH 转换为 Lab (CSS标准)
+     * @param {number} L - 明度 0-100 或 0%-100%
+     * @param {number} C - 色度 >=0
+     * @param {number} H - 色相角 0-360 度
+     * @returns {Object} Lab 值 {L, a, b}
+     */
+    function lchToLab(L, C, H) {
+        // 角度转换为弧度
+        const H_rad = H * Math.PI / 180;
+        
+        // LCH -> Lab 转换公式
+        const a = C * Math.cos(H_rad);
+        const b = C * Math.sin(H_rad);
+        
+        return { L, a, b };
     }
-  }
 
-  /**
-   * 处理CSS值，根据配置转换LAB、LCH颜色和math()函数
-   * @param {string} value - CSS属性值
-   * @param {Object} config - 配置对象
-   * @returns {string} 处理后的值
-   */
-  function processCSSValue(value, config) {
-    let result = value;
-    
-    // 1. 首先处理math()函数
-    if (config.enableMath) {
-      result = processMathFunctions(result, config);
+    // 精确的 Lab -> sRGB 转换函数
+    function preciseLabToRGB(L, a, b) {
+        // 1. Lab -> XYZ (D65白点)
+        const labToXyz = (L, a, b) => {
+            // D65 白点参考值
+            const refX = 0.95047;
+            const refY = 1.00000;
+            const refZ = 1.08883;
+            
+            const epsilon = 0.008856;
+            const kappa = 903.3;
+            
+            const fy = (L + 16) / 116;
+            const fx = a / 500 + fy;
+            const fz = fy - b / 200;
+            
+            const xr = fx ** 3 > epsilon ? fx ** 3 : (116 * fx - 16) / kappa;
+            const yr = L > kappa * epsilon ? ((L + 16) / 116) ** 3 : L / kappa;
+            const zr = fz ** 3 > epsilon ? fz ** 3 : (116 * fz - 16) / kappa;
+            
+            return [
+                xr * refX,
+                yr * refY,
+                zr * refZ
+            ];
+        };
+        
+        // 2. XYZ -> Linear RGB
+        const xyzToLinearRgb = (x, y, z) => {
+            // sRGB 转换矩阵 (D65)
+            const M = [
+                [ 3.2404542, -1.5371385, -0.4985314],
+                [-0.9692660,  1.8760108,  0.0415560],
+                [ 0.0556434, -0.2040259,  1.0572252]
+            ];
+            
+            const r = M[0][0] * x + M[0][1] * y + M[0][2] * z;
+            const g = M[1][0] * x + M[1][1] * y + M[1][2] * z;
+            const b = M[2][0] * x + M[2][1] * y + M[2][2] * z;
+            
+            return [r, g, b];
+        };
+        
+        // 3. sRGB Gamma 校正
+        const applyGamma = (c) => {
+            const sign = c < 0 ? -1 : 1;
+            const absC = Math.abs(c);
+            
+            if (absC <= 0.0031308) {
+                return sign * 12.92 * absC;
+            } else {
+                return sign * (1.055 * Math.pow(absC, 1/2.4) - 0.055);
+            }
+        };
+        
+        // 4. 钳制到 [0, 255]
+        const clamp = (value) => {
+            return Math.max(0, Math.min(255, Math.round(value * 255)));
+        };
+        
+        // 执行转换
+        const [X, Y, Z] = labToXyz(L, a, b);
+        const [linearR, linearG, linearB] = xyzToLinearRgb(X, Y, Z);
+        
+        const r = applyGamma(linearR);
+        const g = applyGamma(linearG);
+        const bOut = applyGamma(linearB);
+        
+        // 返回钳制后的 RGB 值
+        return {
+            r: clamp(r),
+            g: clamp(g),
+            b: clamp(bOut)
+        };
     }
-    
-    // 2. 然后处理LAB和LCH颜色
-    if (config.convertLabToRGB || config.convertLchToRGB) {
-      result = convertAllLabLchColors(result, config);
+
+    /**
+     * Lab -> Display P3 转换
+     * @param {number} L - 明度 0-100
+     * @param {number} a - a分量
+     * @param {number} b - b分量
+     * @returns {Object} P3颜色 {r, g, b}
+     */
+    function labToP3(L, a, b) {
+        // 1. Lab -> XYZ (使用与RGB相同的转换)
+        const labToXyz = (L, a, b) => {
+            const refX = 0.95047;
+            const refY = 1.00000;
+            const refZ = 1.08883;
+            
+            const epsilon = 0.008856;
+            const kappa = 903.3;
+            
+            const fy = (L + 16) / 116;
+            const fx = a / 500 + fy;
+            const fz = fy - b / 200;
+            
+            const xr = fx ** 3 > epsilon ? fx ** 3 : (116 * fx - 16) / kappa;
+            const yr = L > kappa * epsilon ? ((L + 16) / 116) ** 3 : L / kappa;
+            const zr = fz ** 3 > epsilon ? fz ** 3 : (116 * fz - 16) / kappa;
+            
+            return [
+                xr * refX,
+                yr * refY,
+                zr * refZ
+            ];
+        };
+        
+        // 2. XYZ -> Linear P3
+        const xyzToLinearP3 = (x, y, z) => {
+            // Display P3 转换矩阵 (D65)
+            const M = [
+                [ 2.493496911941425, -0.9313836179191239, -0.40271078445071684],
+                [-0.8294889695615747,  1.7626640603183463,  0.023624685841943577],
+                [ 0.03584583024378447, -0.07617238926804182, 0.9568845240076872]
+            ];
+            
+            const r = M[0][0] * x + M[0][1] * y + M[0][2] * z;
+            const g = M[1][0] * x + M[1][1] * y + M[1][2] * z;
+            const b = M[2][0] * x + M[2][1] * y + M[2][2] * z;
+            
+            return [r, g, b];
+        };
+        
+        // 3. P3 Gamma 校正（与sRGB相同）
+        const applyGamma = (c) => {
+            const sign = c < 0 ? -1 : 1;
+            const absC = Math.abs(c);
+            
+            if (absC <= 0.0031308) {
+                return sign * 12.92 * absC;
+            } else {
+                return sign * (1.055 * Math.pow(absC, 1/2.4) - 0.055);
+            }
+        };
+        
+        // 4. 钳制到 [0, 255]，然后转换为 [0, 1] 范围
+        const clamp = (value) => {
+            return Math.max(0, Math.min(255, Math.round(value * 255)));
+        };
+        
+        // 执行转换
+        try {
+            const [X, Y, Z] = labToXyz(L, a, b);
+            const [linearR, linearG, linearB] = xyzToLinearP3(X, Y, Z);
+            
+            const r = applyGamma(linearR);
+            const g = applyGamma(linearG);
+            const bOut = applyGamma(linearB);
+            
+            // 转换为0-1范围的浮点数用于P3颜色格式
+            return {
+                r: Math.max(0, Math.min(1, r)),
+                g: Math.max(0, Math.min(1, g)),
+                b: Math.max(0, Math.min(1, bOut))
+            };
+        } catch (error) {
+            console.warn('P3转换失败:', error);
+            const rgb = preciseLabToRGB(L, a, b);
+            return {
+                r: rgb.r / 255,
+                g: rgb.g / 255,
+                b: rgb.b / 255
+            };
+        }
     }
-    
-    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();
-      
-      // 检查是否是变量定义
-      const varMatch = trimmed.match(/^\$([a-zA-Z0-9_-]+)\s*:\s*(.+?);?$/);
-      
-      if (varMatch) {
-        const [, varName, varValue] = varMatch;
-        // 处理变量值中的数学表达式和颜色转换
-        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;
+    /**
+     * 生成颜色字符串（根据P3支持情况输出P3或RGB）
+     * @param {number} L - Lab L值
+     * @param {number} a - Lab a值
+     * @param {number} b - Lab b值
+     * @param {Object} config - 配置对象
+     * @param {number|null} alpha - 透明度值
+     * @returns {string} CSS颜色字符串
+     */
+    function generateColorString(L, a, b, config, alpha = null) {
+        if (!config.enableP3 || !detectP3Support()) {
+            // 使用RGB
+            const rgb = preciseLabToRGB(L, a, b);
+            if (alpha !== null) {
+                return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
+            }
+            return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
         } else {
-          // 全局变量（:root 中）
-          globalVariables[varName] = processedValue;
-        }
-        continue;
-      }
-      
-      // 检查是否是选择器开始
-      if (trimmed.endsWith('{')) {
-        currentSelector = trimmed.slice(0, -1).trim();
-        inSelectorBlock = true;
-        cssWithoutVars += line + '\n';
-        continue;
-      }
-      
-      // 检查是否是选择器结束
-      if (trimmed === '}') {
-        if (inSelectorBlock) {
-          // 在选择器结束前插入变量声明
-          if (currentSelector && selectorVariables.has(currentSelector)) {
-            const vars = selectorVariables.get(currentSelector);
-            const indent = ' '.repeat(currentIndent);
-            for (const [varName, varValue] of Object.entries(vars)) {
-              cssWithoutVars += `${indent}  --${varName}: ${varValue};\n`;
+            // 使用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)})`;
         }
-        inSelectorBlock = false;
-        currentSelector = null;
-      }
-      
-      cssWithoutVars += line + '\n';
-      
-      // 更新缩进级别
-      if (line.includes('{')) {
-        currentIndent += 2;
-      }
-      if (line.includes('}')) {
-        currentIndent = Math.max(0, currentIndent - 2);
-      }
     }
-    
-    return {
-      globalVariables,
-      selectorVariables,
-      cssWithoutVars: cssWithoutVars.trim()
-    };
-  }
 
-  // 修复的嵌套解析函数
-  function parseNestedRules(cssText, config) {
-    const lines = cssText.split('\n');
-    const stack = []; // 存储规则信息：{selector, properties, children}
-    const rootRules = [];
-    let currentIndent = 0;
-    
-    for (let i = 0; i < lines.length; i++) {
-      const line = lines[i];
-      const trimmed = line.trim();
-      
-      if (!trimmed) continue;
-      
-      // 计算缩进级别（假设使用空格缩进）
-      const indent = line.match(/^(\s*)/)[0].length;
-      const indentLevel = Math.floor(indent / config.indentSize);
-      
-      // 处理规则块结束
-      if (trimmed === '}') {
-        if (stack.length > 0) {
-          const rule = stack.pop();
-          
-          // 如果这个规则有父规则，添加到父规则的children中
-          if (stack.length > 0) {
-            const parent = stack[stack.length - 1];
-            if (!parent.children) parent.children = [];
-            parent.children.push(rule);
-          } else {
-            // 否则是根级规则
-            rootRules.push(rule);
-          }
+    /**
+     * 处理CSS值，根据配置转换LAB、LCH颜色和math()函数
+     * @param {string} value - CSS属性值
+     * @param {Object} config - 配置对象
+     * @returns {string} 处理后的值
+     */
+    function processCSSValue(value, config) {
+        let result = value;
+        
+        // 1. 首先处理math()函数
+        if (config.enableMath) {
+            result = processMathFunctions(result, config);
         }
-        continue;
-      }
-      
-      // 处理规则开始
-      if (trimmed.endsWith('{')) {
-        const selector = trimmed.slice(0, -1).trim();
-        
-        // 创建新规则
-        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];
-          // 处理属性值中的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}`);
-          });
+        // 2. 然后处理LAB和LCH颜色
+        if (config.convertLabToRGB || config.convertLchToRGB) {
+            result = convertAllLabLchColors(result, config);
         }
-        continue;
-      }
+        
+        return result;
     }
-    
-    // 处理栈中剩余规则
-    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);
-      }
+
+    // 私有方法：提取变量定义并移除（支持嵌套作用域）
+    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;
+                // 处理变量值中的数学表达式和颜色转换
+                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 中）
+                    globalVariables[varName] = processedValue;
+                }
+                continue;
+            }
+            
+            // 检查是否是选择器开始
+            if (trimmed.endsWith('{')) {
+                currentSelector = trimmed.slice(0, -1).trim();
+                inSelectorBlock = true;
+                cssWithoutVars += line + '\n';
+                continue;
+            }
+            
+            // 检查是否是选择器结束
+            if (trimmed === '}') {
+                if (inSelectorBlock) {
+                    // 在选择器结束前插入变量声明
+                    if (currentSelector && selectorVariables.has(currentSelector)) {
+                        const vars = selectorVariables.get(currentSelector);
+                        const indent = ' '.repeat(currentIndent);
+                        for (const [varName, varValue] of Object.entries(vars)) {
+                            cssWithoutVars += `${indent}  --${varName}: ${varValue};\n`;
+                        }
+                    }
+                }
+                inSelectorBlock = false;
+                currentSelector = null;
+            }
+            
+            cssWithoutVars += line + '\n';
+            
+            // 更新缩进级别
+            if (line.includes('{')) {
+                currentIndent += 2;
+            }
+            if (line.includes('}')) {
+                currentIndent = Math.max(0, currentIndent - 2);
+            }
+        }
+        
+        return {
+            globalVariables,
+            selectorVariables,
+            cssWithoutVars: cssWithoutVars.trim()
+        };
     }
-    
-    // 将规则树转换为CSS字符串
-    return convertRulesToCSS(rootRules, config);
-  }
-  
-  // 将规则树转换为CSS字符串
-  function convertRulesToCSS(rules, config, parentSelector = '') {
-    let result = '';
-    const isParentAt = parentSelector.startsWith("@");
-    
-    for (const rule of rules) {
-      // 构建完整选择器
-      const isAt = rule.selector.startsWith("@");
-      let fullSelector = (isParentAt ? '  ' : '') + rule.selector;
-      
-      if (isAt) {
-      	fullSelector = rule.selector + " {\n";
-      }
-      
-      if (parentSelector) {
-        // 处理 & 选择器
-        if (fullSelector.includes('&')) {
-          fullSelector = fullSelector.replace(/&/g, parentSelector);
-        } else if (fullSelector.trim().startsWith(':')) {
-          fullSelector = parentSelector + fullSelector;
-        } else {
-          fullSelector = parentSelector + (isParentAt ? '' : ' ') + fullSelector;
+
+    // 修复的嵌套解析函数
+    function parseNestedRules(cssText, config) {
+        const lines = cssText.split('\n');
+        const stack = []; // 存储规则信息：{selector, properties, children}
+        const rootRules = [];
+        let currentIndent = 0;
+        
+        for (let i = 0; i < lines.length; i++) {
+            const line = lines[i];
+            const trimmed = line.trim();
+            
+            if (!trimmed) continue;
+            
+            // 计算缩进级别（假设使用空格缩进）
+            const indent = line.match(/^(\s*)/)[0].length;
+            const indentLevel = Math.floor(indent / config.indentSize);
+            
+            // 处理规则块结束
+            if (trimmed === '}') {
+                if (stack.length > 0) {
+                    const rule = stack.pop();
+                    
+                    // 如果这个规则有父规则，添加到父规则的children中
+                    if (stack.length > 0) {
+                        const parent = stack[stack.length - 1];
+                        if (!parent.children) parent.children = [];
+                        parent.children.push(rule);
+                    } else {
+                        // 否则是根级规则
+                        rootRules.push(rule);
+                    }
+                }
+                continue;
+            }
+            
+            // 处理规则开始
+            if (trimmed.endsWith('{')) {
+                const selector = trimmed.slice(0, -1).trim();
+                
+                // 创建新规则
+                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];
+                    // 处理属性值中的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;
+            }
         }
-      }
-      
-      // 如果有属性，生成规则块
-      if (rule.properties.length > 0) {
-        result += (isAt ? "" : fullSelector) + ' {\n';
-        for (const prop of rule.properties) {
-          // 再次处理属性值（确保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`;
-          });
+        
+        // 处理栈中剩余规则
+        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);
+            }
         }
-        result += isParentAt ? '  }\n' : '}\n\n';
-      }
-      
-      // 递归处理子规则
-      if (rule.children && rule.children.length > 0) {
-        result += convertRulesToCSS(rule.children, config, fullSelector);
-      }
-      
-      if (isParentAt){
-      	result += "}\n\n";
-      }
+        
+        // 将规则树转换为CSS字符串
+        return convertRulesToCSS(rootRules, config);
     }
     
-    return result.trim() + (isParentAt ? "\n\n" : "");
-  }
-
-  // 替换变量值中的变量引用
-  function replaceVariableUsesInValue(value, variables) {
-    return value.replace(/\$([a-zA-Z0-9_-]+)/g, (match, varName) => {
-      if (variables[varName]) {
-        return `var(--${varName})`;
-      }
-      return match;
-    });
-  }
-
-  // 替换变量使用
-  function replaceVariableUses(cssText, globalVariables, selectorVariables, config) {
-    let result = cssText;
-    
-    // 先替换全局变量
-    for (const [varName, varValue] of Object.entries(globalVariables)) {
-      const varRegex = new RegExp(`\\$${varName}(?![a-zA-Z0-9_-])`, 'g');
-      result = result.replace(varRegex, `var(--${varName})`);
+    // 将规则树转换为CSS字符串
+    function convertRulesToCSS(rules, config, parentSelector = '') {
+        let result = '';
+        const isParentAt = parentSelector.startsWith("@");
+        
+        for (const rule of rules) {
+            // 构建完整选择器
+            const isAt = rule.selector.startsWith("@");
+            let fullSelector = (isParentAt ? '  ' : '') + rule.selector;
+            
+            if (isAt) {
+                fullSelector = rule.selector + " {\n";
+            }
+            
+            if (parentSelector) {
+                // 处理 & 选择器
+                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) {
+                    // 再次处理属性值（确保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" : "");
     }
-    
-    // 然后处理选择器特定的变量
-    result = result.replace(/\$([a-zA-Z0-9_-]+)/g, (match, varName) => {
-      return `var(--${varName})`;
-    });
-    
-    // 最后处理所有的LAB、LCH颜色和math()函数
-    result = processCSSValue(result, config);
-    
-    return result;
-  }
 
-  // 生成根规则
-  function generateRootRule(variables, config) {
-    if (Object.keys(variables).length === 0) {
-      return '';
+    // 替换变量值中的变量引用
+    function replaceVariableUsesInValue(value, variables) {
+        return value.replace(/\$([a-zA-Z0-9_-]+)/g, (match, varName) => {
+            if (variables[varName]) {
+                return `var(--${varName})`;
+            }
+            return match;
+        });
     }
-    
-    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';
-          }
+    // 替换变量使用
+    function replaceVariableUses(cssText, globalVariables, selectorVariables, config) {
+        let result = cssText;
+        
+        // 先替换全局变量
+        for (const [varName, varValue] of Object.entries(globalVariables)) {
+            const varRegex = new RegExp(`\\$${varName}(?![a-zA-Z0-9_-])`, 'g');
+            result = result.replace(varRegex, `var(--${varName})`);
         }
-        currentSelector = null;
-      }
-      
-      // 使用全局处理函数处理所有math()和颜色
-      result += processCSSValue(line, config) + '\n';
+        
+        // 然后处理选择器特定的变量
+        result = result.replace(/\$([a-zA-Z0-9_-]+)/g, (match, varName) => {
+            return `var(--${varName})`;
+        });
+        
+        // 最后处理所有的LAB、LCH颜色和math()函数
+        result = processCSSValue(result, config);
+        
+        return result;
     }
-    
-    return result.trim();
-  }
 
-  // 主转换函数
-  function convert(cssText, customConfig = {}) {
-    const config = { ...defaultConfig, ...customConfig };
-    
-    // 1. 提取变量定义（区分全局和选择器局部）
-    const { globalVariables, selectorVariables, cssWithoutVars } = 
-      extractVariablesAndCSS(cssText, config);
-    
-    // 2. 解析嵌套规则（如果启用）
-    let processedCSS = cssWithoutVars.trim();
-    if (config.enableNesting && cssWithoutVars.includes('{')) {
-      try {
-        processedCSS = parseNestedRules(cssWithoutVars, config);
-      } catch (error) {
-        console.warn('嵌套解析失败，使用原始CSS:', error);
-      }
-    }
-    
-    // 3. 生成根规则（全局变量）
-    const rootRule = generateRootRule(globalVariables, config);
-    
-    // 4. 注入选择器局部变量
-    let finalCSS = processedCSS;
-    if (selectorVariables.size > 0) {
-      finalCSS = injectSelectorVariables(processedCSS, selectorVariables, config);
+    // 生成根规则
+    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`;
     }
-    
-    // 5. 替换变量使用
-    finalCSS = replaceVariableUses(finalCSS, globalVariables, selectorVariables, config);
-    
-    // 6. 组合结果
-    return rootRule + finalCSS;
-  }
 
-  // 自动处理带有 e 属性的 style 标签
-  function autoProcessStyleTags(customConfig = {}) {
-    const config = { ...defaultConfig, ...customConfig };
-    const styleTags = document.querySelectorAll(`style[${config.styleTagAttribute || 'e'}]`);
-    
-    styleTags.forEach(styleTag => {
-      const originalCSS = styleTag.textContent;
-      const convertedCSS = convert(originalCSS, config);
-      
-      // 创建新的 style 标签
-      const newStyleTag = document.createElement('style');
-      newStyleTag.textContent = convertedCSS;
-      
-      // 插入到原标签后面
-      styleTag.parentNode.insertBefore(newStyleTag, styleTag.nextSibling);
-      
-      // 可选：移除原标签
-      if (!config.preserveOriginal) {
-        styleTag.remove();
-      } else {
-        styleTag.style.display = 'none';
-      }
-    });
-    
-    return styleTags.length;
-  }
+    // 处理选择器内部的变量
+    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;
+            }
+            
+            // 使用全局处理函数处理所有math()和颜色
+            result += processCSSValue(line, config) + '\n';
+        }
+        
+        return result.trim();
+    }
 
-  function config(config = {}) {
-    defaultConfig = { ...defaultConfig, ...config };
-  }
+    // 主转换函数
+    function convert(cssText, customConfig = {}) {
+        const config = { ...defaultConfig, ...customConfig };
+        
+        // 1. 提取变量定义（区分全局和选择器局部）
+        const { globalVariables, selectorVariables, cssWithoutVars } = 
+            extractVariablesAndCSS(cssText, config);
+        
+        // 2. 解析嵌套规则（如果启用）
+        let processedCSS = cssWithoutVars.trim();
+        if (config.enableNesting && cssWithoutVars.includes('{')) {
+            try {
+                processedCSS = parseNestedRules(cssWithoutVars, config);
+            } catch (error) {
+                console.warn('嵌套解析失败，使用原始CSS:', error);
+            }
+        }
+        
+        // 3. 生成根规则（全局变量）
+        const rootRule = generateRootRule(globalVariables, config);
+        
+        // 4. 注入选择器局部变量
+        let finalCSS = processedCSS;
+        if (selectorVariables.size > 0) {
+            finalCSS = injectSelectorVariables(processedCSS, selectorVariables, config);
+        }
+        
+        // 5. 替换变量使用
+        finalCSS = replaceVariableUses(finalCSS, globalVariables, selectorVariables, config);
+        
+        // 6. 组合结果
+        return rootRule + finalCSS;
+    }
 
-  // 初始化自动处理
-  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);
+    // 自动处理带有 e 属性的 style 标签
+    function autoProcessStyleTags(customConfig = {}) {
+        const config = { ...defaultConfig, ...customConfig };
+        const styleTags = document.querySelectorAll(`style[${config.styleTagAttribute || 'e'}]`);
+        
+        styleTags.forEach(styleTag => {
+            const originalCSS = styleTag.textContent;
+            const convertedCSS = convert(originalCSS, config);
+            
+            // 创建新的 style 标签
+            const newStyleTag = document.createElement('style');
+            newStyleTag.textContent = convertedCSS;
+            
+            // 插入到原标签后面
+            styleTag.parentNode.insertBefore(newStyleTag, styleTag.nextSibling);
+            
+            // 可选：移除原标签
+            if (!config.preserveOriginal) {
+                styleTag.remove();
+            } else {
+                styleTag.style.display = 'none';
+            }
         });
-      } else {
-        autoProcessStyleTags(config);
-      }
+        
+        return styleTags.length;
     }
-  }
 
-  // 返回公共 API
-  const api = {
-    convert,
-    apply,
-    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,
-            result,
-            parsed: parseValueWithUnit(result.replace(/^calc\(|\)$/g, ''))
-          };
-        } catch (error) {
-          return {
-            success: false,
-            expression,
-            error: error.message
-          };
+    function config(config = {}) {
+        defaultConfig = { ...defaultConfig, ...config };
+    }
+
+    // 初始化自动处理
+    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);
+            }
         }
-      }
-    },
-    
-    // 颜色转换工具方法
-    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);
-      },
-      /**
-       * 生成颜色字符串（根据P3支持情况）
-       * @param {number} L - Lab L值
-       * @param {number} a - Lab a值
-       * @param {number} b - Lab b值
-       * @param {number|null} alpha - 透明度
-       * @param {boolean} useP3 - 是否使用P3（自动检测）
-       * @returns {string} CSS颜色字符串
-       */
-      generateColor: function(L, a, b, alpha = null, useP3 = true) {
-        return generateColorString(L, a, b, { enableP3: useP3 }, alpha);
-      },
-      /**
-       * 解析CSS颜色字符串
-       * @param {string} colorString - CSS颜色字符串
-       * @returns {Object} 包含原始Lab值和颜色字符串的对象
-       */
-      parseColor: function(colorString) {
-        try {
-          // 尝试解析lab()函数格式
-          const labMatch = colorString.match(/lab\(\s*([\d.]+)(%?)\s+([\d.-]+)\s+([\d.-]+)(?:\s*\/\s*([\d.%]+))?\s*\)/i);
-          if (labMatch) {
-            let L = parseFloat(labMatch[1]);
-            const A = parseFloat(labMatch[3]);
-            const B = parseFloat(labMatch[4]);
-            const alpha = labMatch[5] ? 
-              (labMatch[5].includes('%') ? parseFloat(labMatch[5]) / 100 : parseFloat(labMatch[5])) : 
-              null;
-            
-            const colorStr = generateColorString(L, A, B, defaultConfig, alpha);
+    }
+
+    // 返回公共 API
+    const api = {
+        convert,
+        apply,
+        config,
+        version: '1.9.0',
+        
+        // 检测P3支持
+        supportsP3: detectP3Support(),
+        
+        // 重新检测P3支持（如果配置变化）
+        detectP3Support: detectP3Support,
+        
+        // 数学计算工具方法
+        math: {
+            /**
+             * 计算数学表达式
+             * @param {string} expression - 数学表达式
+             * @returns {string} 计算结果
+             */
+            evaluate: function(expression) {
+                return evaluateMathExpression(expression, defaultConfig);
+            },
             
-            return {
-              L, A, B, alpha,
-              rgb: preciseLabToRGB(L, A, B),
-              p3: labToP3(L, A, B),
-              colorString: colorStr
-            };
-          }
-          
-          // 尝试解析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;
+            /**
+             * 解析带单位的数值
+             * @param {string} value - 带单位的字符串
+             * @returns {Object} {value: number, unit: string}
+             */
+            parseUnit: parseValueWithUnit,
             
-            const lab = lchToLab(L, C, H);
-            const colorStr = generateColorString(lab.L, lab.a, lab.b, defaultConfig, alpha);
+            /**
+             * 四舍五入数字
+             * @param {number} num - 要四舍五入的数字
+             * @param {number} precision - 精度
+             * @returns {string} 四舍五入后的数字字符串
+             */
+            round: roundNumber,
             
-            return {
-              L, C, H, 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;
+            /**
+             * 测试数学表达式
+             * @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,
+            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);
+            },
+            /**
+             * 生成颜色字符串（根据P3支持情况）
+             * @param {number} L - Lab L值
+             * @param {number} a - Lab a值
+             * @param {number} b - Lab b值
+             * @param {number|null} alpha - 透明度
+             * @param {boolean} useP3 - 是否使用P3（自动检测）
+             * @returns {string} CSS颜色字符串
+             */
+            generateColor: function(L, a, b, alpha = null, useP3 = true) {
+                return generateColorString(L, a, b, { enableP3: useP3 }, alpha);
+            },
+            /**
+             * 解析CSS颜色字符串
+             * @param {string} colorString - CSS颜色字符串
+             * @returns {Object} 包含原始Lab值和颜色字符串的对象
+             */
+            parseColor: function(colorString) {
+                try {
+                    // 尝试解析lab()函数格式
+                    const labMatch = colorString.match(/lab\(\s*([\d.]+)(%?)\s+([\d.-]+)\s+([\d.-]+)(?:\s*\/\s*([\d.%]+))?\s*\)/i);
+                    if (labMatch) {
+                        let L = parseFloat(labMatch[1]);
+                        const A = parseFloat(labMatch[3]);
+                        const B = parseFloat(labMatch[4]);
+                        const alpha = labMatch[5] ? 
+                            (labMatch[5].includes('%') ? parseFloat(labMatch[5]) / 100 : parseFloat(labMatch[5])) : 
+                            null;
+                        
+                        const colorStr = generateColorString(L, A, B, defaultConfig, alpha);
+                        
+                        return {
+                            L, A, B, alpha,
+                            rgb: preciseLabToRGB(L, A, B),
+                            p3: labToP3(L, A, B),
+                            colorString: colorStr
+                        };
+                    }
+                    
+                    // 尝试解析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, C, H, 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;
+                }
+            }
         }
-      }
-    }
-  };
-  
+    };
 
-// 创建一个可调用的主函数
-const styimat = function(...args) {
-	// 检查是否是模板字符串调用（标签函数）
-	if (args.length > 1 || (args[0] && args[0].raw)) {
-		// 处理模板字符串
-		return handleTemplateTag(...args);
-	}
+    // 创建一个可调用的主函数
+    const styimat = function(...args) {
+        // 检查是否是模板字符串调用（标签函数）
+        if (args.length > 1 || (args[0] && args[0].raw)) {
+            // 处理模板字符串
+            return handleTemplateTag(...args);
+        }
 
-	// 获取第一个参数
-	const firstArg = args[0];
+        // 获取第一个参数
+        const firstArg = args[0];
 
-	// 如果传入CSS文本，则编译并返回结果
-	if (typeof firstArg === 'string') {
-		return convert(firstArg, { ...defaultConfig, ...args[1] });
-	}
+        // 如果传入CSS文本，则编译并返回结果
+        if (typeof firstArg === 'string') {
+            return convert(firstArg, { ...defaultConfig, ...args[1] });
+        }
 
-	// 如果传入配置对象，则应用配置
-	if (typeof firstArg === 'object' && firstArg !== null) {
-		defaultConfig = { ...defaultConfig, ...firstArg };
-		return styimat;
-	}
+        // 如果传入配置对象，则应用配置
+        if (typeof firstArg === 'object' && firstArg !== null) {
+            defaultConfig = { ...defaultConfig, ...firstArg };
+            return styimat;
+        }
 
-	// 如果没有参数，执行自动处理
-	if (args.length === 0) {
-		return apply();
-	}
+        // 如果没有参数，执行自动处理
+        if (args.length === 0) {
+            return apply();
+        }
 
-	return styimat;
-};
+        return styimat;
+    };
 
-// 处理模板字符串的函数
-function handleTemplateTag(strings, ...values) {
-	// 拼接模板字符串
-	let cssText = strings[0];
+    // 处理模板字符串的函数
+    function handleTemplateTag(strings, ...values) {
+        // 拼接模板字符串
+        let cssText = strings[0];
 
-	for (let i = 0; i < values.length; i++) {
-		// 处理插值（支持字符串、数字、函数等）
-		const value = values[i];
-		let result = '';
+        for (let i = 0; i < values.length; i++) {
+            // 处理插值（支持字符串、数字、函数等）
+            const value = values[i];
+            let result = '';
 
-		if (typeof value === 'function') {
-			result = value();
-		} else if (Array.isArray(value)) {
-			result = value.join(' ');
-		} else {
-			result = String(value != null ? value : '');
-		}
+            if (typeof value === 'function') {
+                result = value();
+            } else if (Array.isArray(value)) {
+                result = value.join(' ');
+            } else {
+                result = String(value != null ? value : '');
+            }
 
-		cssText += result + strings[i + 1];
-	}
+            cssText += result + strings[i + 1];
+        }
 
-	// 使用convert函数处理
-	return convert(cssText, defaultConfig);
-}
+        // 使用convert函数处理
+        return convert(cssText, defaultConfig);
+    }
 
-// 将API的所有方法复制到主函数上
-Object.assign(styimat, api);
-Object.setPrototypeOf(styimat, Function.prototype);
+    // 将API的所有方法复制到主函数上
+    Object.assign(styimat, api);
+    Object.setPrototypeOf(styimat, Function.prototype);
 
-  // 自动初始化
-  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;
-          }
+    // 自动初始化
+    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;
+                    },
+                    
+                    apply(target, thisArg, argumentsList) {
+                        const prop = argumentsList[0];
+                        const value = argumentsList[1];
+                        const varName = prop.startsWith('--') ? prop : `--${prop}`;
+                        if (value === undefined) return element.style.getPropertyValue(varName);
+                        element.style.setProperty(varName, value);
+                    }
+                });
+            }
         });
-      }
-    });
-  }
-  
-  return styimat;
+    }
+    
+    return styimat;
 }));