styimat 1.0.0

package/styimat.js

@@ -0,0 +1,1166 @@
+/**
+ * CSS 变量预处理库 - 增强版
+ * 支持 CSS 变量预处理、嵌套选择器和嵌套变量
+ * 支持 Lab 和 LCH 颜色空间转换为 RGB（CSS标准格式）
+ * 支持 lab# 和 lch# 十六进制语法
+ * 支持 Display P3 广色域显示器
+ */
+const styimat = (function() {
+  // 默认配置
+  let defaultConfig = {
+    rootSelector: ':root',
+    variablePrefix: '--',
+    preserveOriginal: false,
+    indentSize: 2,
+    enableNesting: true,
+    autoProcessStyleTags: true,
+    styleTagAttribute: 'e',
+    convertLabToRGB: true,  // 是否将lab颜色转换为rgb
+    convertLchToRGB: true,   // 是否将lch颜色转换为rgb
+    enableP3: true,          // 是否启用P3广色域支持
+  };
+
+  // 全局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;
+    }
+    
+    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--;
+        }
+      }
+      
+      // 如果遇到分号且不在括号和引号内，则分割声明
+      if (char === ';' && !inQuotes && inParens === 0) {
+        if (currentDeclaration.trim()) {
+          declarations.push(currentDeclaration.trim());
+          currentDeclaration = '';
+        }
+      } 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 });
+    }
+    
+    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;
+      }
+    }
+    
+    return -1;
+  }
+
+  /**
+   * 解析并转换所有的 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;
+  }
+
+  /**
+   * 解析十六进制颜色格式：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;
+    }
+  }
+
+  /**
+   * 转换单个 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;
+    }
+  }
+
+  /**
+   * 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 -> 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 -> 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
+      };
+    }
+  }
+
+  /**
+   * 生成颜色字符串（根据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)})`;
+    }
+  }
+
+  /**
+   * 处理CSS值，根据配置转换LAB和LCH颜色
+   * @param {string} value - CSS属性值
+   * @param {Object} config - 配置对象
+   * @returns {string} 处理后的值
+   */
+  function processCSSValue(value, config) {
+    // 直接调用全局转换函数
+    return convertAllLabLchColors(value, config);
+  }
+
+  // 私有方法：提取变量定义并移除（支持嵌套作用域）
+  function extractVariablesAndCSS(cssText, config) {
+    const lines = cssText.split('\n');
+    const globalVariables = {};
+    const selectorVariables = new Map(); // 选择器 -> 变量映射
+    let cssWithoutVars = '';
+    let currentSelector = null;
+    let inSelectorBlock = false;
+    let currentIndent = 0;
+    
+    for (let line of lines) {
+      const trimmed = line.trim();
+      
+      // 检查是否是变量定义
+      const varMatch = trimmed.match(/^\$([a-zA-Z0-9_-]+)\s*:\s*(.+?);?$/);
+      
+      if (varMatch) {
+        const [, varName, varValue] = varMatch;
+        // 处理变量值中的LAB/LCH颜色转换
+        const processedValue = convertAllLabLchColors(
+          replaceVariableUsesInValue(varValue.trim(), {
+            ...globalVariables,
+            ...(currentSelector ? selectorVariables.get(currentSelector) || {} : {})
+          }),
+          config
+        );
+        
+        if (currentSelector) {
+          // 选择器内部的变量
+          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()
+    };
+  }
+
+  // 修复的嵌套解析函数
+  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];
+          // 处理属性值中的LAB/LCH颜色
+          const parsed = parseSingleLineCSS(trimmed);
+          parsed.forEach(obj => {
+            const key = Object.keys(obj)[0];
+            const value = convertAllLabLchColors(obj[key], config);
+            currentRule.properties.push(`${key}: ${value}`);
+          });
+        }
+        continue;
+      }
+    }
+    
+    // 处理栈中剩余规则
+    while (stack.length > 0) {
+      const rule = stack.pop();
+      if (stack.length === 0) {
+        rootRules.push(rule);
+      } else {
+        const parent = stack[stack.length - 1];
+        if (!parent.children) parent.children = [];
+        parent.children.push(rule);
+      }
+    }
+    
+    // 将规则树转换为CSS字符串
+    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;
+        }
+      }
+      
+      // 如果有属性，生成规则块
+      if (rule.properties.length > 0) {
+        result += (isAt ? "" : fullSelector) + ' {\n';
+        for (const prop of rule.properties) {
+          // 再次处理属性值（确保LAB/LCH颜色被转换）
+          const parsed = parseSingleLineCSS(prop);
+          parsed.forEach(obj => {
+            const key = Object.keys(obj)[0];
+            const value = convertAllLabLchColors(obj[key], config);
+            result += (isParentAt ? '  ' : '') + `  ${key}: ${value};\n`;
+          });
+        }
+        result += isParentAt ? '  }\n' : '}\n\n';
+      }
+      
+      // 递归处理子规则
+      if (rule.children && rule.children.length > 0) {
+        result += convertRulesToCSS(rule.children, config, fullSelector);
+      }
+      
+      if (isParentAt){
+      	result += "}\n\n";
+      }
+    }
+    
+    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})`);
+    }
+    
+    // 然后处理选择器特定的变量
+    result = result.replace(/\$([a-zA-Z0-9_-]+)/g, (match, varName) => {
+      return `var(--${varName})`;
+    });
+    
+    // 最后处理所有的LAB和LCH颜色（一次性全局处理）
+    if (config.convertLabToRGB || config.convertLchToRGB) {
+      result = convertAllLabLchColors(result, config);
+    }
+    
+    return result;
+  }
+
+  // 生成根规则
+  function generateRootRule(variables, config) {
+    if (Object.keys(variables).length === 0) {
+      return '';
+    }
+    
+    const declarations = Object.entries(variables)
+      .map(([name, value]) => {
+        const processedValue = convertAllLabLchColors(
+          replaceVariableUsesInValue(value, variables),
+          config
+        );
+        return `  --${name}: ${processedValue};`;
+      })
+      .join('\n');
+    
+    return `${config.rootSelector} {\n${declarations}\n}\n\n`;
+  }
+
+  // 处理选择器内部的变量
+  function injectSelectorVariables(cssText, selectorVariables, config) {
+    let result = '';
+    const lines = cssText.split('\n');
+    let currentSelector = null;
+    
+    for (let line of lines) {
+      const trimmed = line.trim();
+      
+      if (trimmed.endsWith('{')) {
+        currentSelector = trimmed.slice(0, -1).trim();
+      }
+      
+      if (trimmed === '}' && currentSelector) {
+        // 在选择器结束前插入变量声明
+        if (selectorVariables.has(currentSelector)) {
+          const vars = selectorVariables.get(currentSelector);
+          const indent = line.match(/^(\s*)/)[0];
+          for (const [varName, varValue] of Object.entries(vars)) {
+            result += indent + '  --' + varName + ': ' + varValue + ';\n';
+          }
+        }
+        currentSelector = null;
+      }
+      
+      // 使用全局转换函数处理所有颜色
+      if (config.convertLabToRGB || config.convertLchToRGB) {
+        result += convertAllLabLchColors(line, config) + '\n';
+      } else {
+        result += line + '\n';
+      }
+    }
+    
+    return result.trim();
+  }
+
+  // 主转换函数
+  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;
+  }
+
+  // 自动处理带有 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 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);
+      }
+    }
+  }
+
+  // 返回公共 API
+  const api = {
+    convert,
+    apply,
+    config,
+    version: '1.8.0',
+    
+    // 检测P3支持
+    supportsP3: detectP3Support(),
+    
+    // 重新检测P3支持（如果配置变化）
+    detectP3Support: detectP3Support,
+    
+    // 颜色转换工具方法
+    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;
+        }
+      }
+    }
+  };
+
+  // 自动初始化
+  if (typeof window !== 'undefined') {
+    apply();
+    Object.defineProperty(window.HTMLElement.prototype, 'cssVar', {
+      get() {
+        const element = this;
+        return new Proxy({}, {
+          get(target, prop) {
+            const varName = prop.startsWith('--') ? prop : `--${prop}`;
+            return element.style.getPropertyValue(varName);
+          },
+          
+          set(target, prop, value) {
+            const varName = prop.startsWith('--') ? prop : `--${prop}`;
+            element.style.setProperty(varName, value);
+            return true;
+          }
+        });
+      }
+    });
+  }
+  
+  return api;
+})();
+
+// 导出
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = styimat;
+} else {
+  window.styimat = styimat;
+}