styimat 1.3.0 → 1.5.0

package/README.md

@@ -1,37 +1,52 @@
 # styimat
+[![Stars](https://gitee.com/wxy6987/styimat/badge/star.svg?theme=white)](https://gitee.com/wxy6987/styimat/stargazers)
+[![Forks](https://gitee.com/wxy6987/styimat/badge/fork.svg?theme=white)](https://gitee.com/wxy6987/styimat/members)
 
-一个功能强大的 CSS 变量预处理库，支持嵌套规则、Lab/LCH 颜色空间转换和 Display P3 广色域。
+一个功能强大的 CSS 变量预处理库，支持嵌套规则、Lab/LCH 颜色空间转换、Display P3 广色域和增强的数学计算功能。
 
-## 特性
+## 安装方式
+
+### 1. Git 克隆（推荐）
+```bash
+# 克隆主仓库
+git clone https://gitee.com/wxy6987/styimat.git
 
-- 🎨 **Lab/LCH 颜色支持** - 将 Lab 和 LCH 颜色转换为 CSS 兼容的 RGB
-- 🌈 **广色域显示** - 自动检测并支持 Display P3 广色域显示器
-- 🔧 **变量系统** - 类似 Sass 的变量系统，支持作用域变量
-- 🏗️ **嵌套规则** - 支持 Sass 风格的嵌套选择器
-- 📱 **十六进制语法** - 支持 `lab#L16A16B16` 和 `lch#L16C16H` 简洁语法
-- ⚡ **轻量高效** - 无依赖，压缩后仅约 20KB
-- 🔄 **多种使用方式** - 浏览器、Node.js、命令行均可使用
+# 进入项目目录
+cd styimat
 
-## 安装
+# 安装依赖
+npm install
+```
 
-### NPM
+### 2. 直接下载 ZIP
+- [点击下载最新版本](https://gitee.com/wxy6987/styimat/repository/archive/main.zip)
 
+### 3. NPM 安装
 ```bash
 npm install styimat
 ```
 
-### CDN (unpkg)
-
+### 4. CDN 引入
 ```html
+<!-- unpkg -->
 <script src="https://unpkg.com/styimat"></script>
-```
-
-### CDN (jsdelivr)
 
-```html
+<!-- jsdelivr -->
 <script src="https://cdn.jsdelivr.net/npm/styimat/styimat.min.js"></script>
 ```
 
+## 特性
+
+- **Lab/LCH 颜色支持** - 将 Lab 和 LCH 颜色转换为 CSS 兼容的 RGB
+- **广色域显示** - 自动检测并支持 Display P3 广色域显示器
+- **变量系统** - 类似 Sass 的变量系统，支持作用域变量
+-️ **嵌套规则** - 支持 Sass 风格的嵌套选择器
+- **十六进制语法** - 支持 `lab#L16A16B16` 和 `lch#L16C16H` 简洁语法
+- **增强数学计算** - 支持 `math()` 函数和复杂数学表达式
+- **轻量高效** - 无依赖，压缩后仅约 20KB
+- **多种使用方式** - 浏览器、Node.js、命令行均可使用
+- **灵活API** - 支持函数调用、模板标签、对象配置等多种用法
+
 ## 快速开始
 
 ### 浏览器中使用
@@ -108,6 +123,123 @@ npm install -g styimat
 styimat input.css output.css
 ```
 
+## 高级用法
+
+### 1. 作为函数直接调用
+
+`styimat` 本身是一个可调用的函数，支持多种调用方式：
+
+```javascript
+// 方式1：直接传入CSS字符串
+const css1 = styimat(`
+  $primary: lab(54.7 77.9 80.1);
+  .button { color: $primary; }
+`);
+
+// 方式2：传入配置对象（返回函数本身，可以链式调用）
+styimat({
+  enableP3: true,
+  enableMath: true,
+  mathPrecision: 8
+});
+
+// 方式3：无参数调用（自动处理页面中所有标记的<style>标签）
+styimat();
+```
+
+### 2. 作为模板标签使用
+
+`styimat` 可以作为ES6模板字符串的标签函数，提供更简洁的语法：
+
+```javascript
+// 基本模板标签用法
+const css = styimat`
+  $primary: lab(54.7 77.9 80.1);
+  $secondary: lch(44.7 67.9 210);
+  
+  .button {
+    background: $primary;
+    color: white;
+    
+    &:hover {
+      background: $secondary;
+    }
+  }
+`;
+
+// 模板标签支持插值
+const theme = 'dark';
+const cssWithVars = styimat`
+  $primary: ${theme === 'dark' ? 'lab(30 40 50)' : 'lab(70 20 -10)'};
+  
+  body {
+    background: $primary;
+  }
+`;
+
+// 复杂的插值示例
+const spacing = 1.5;
+const cssComplex = styimat`
+  $base-spacing: ${spacing}rem;
+  $large-spacing: math(${spacing} * 2);
+  
+  .container {
+    padding: $base-spacing;
+    margin: $large-spacing;
+  }
+`;
+```
+
+### 3. 作为对象方法调用
+
+除了函数调用，`styimat` 还提供了对象方法：
+
+```javascript
+// 1. 转换CSS
+const converted = styimat.convert(cssString, config);
+
+// 2. 应用到页面
+const styleElement = styimat.apply(cssString, config);
+
+// 3. 配置全局设置
+styimat.config({
+  enableP3: true,
+  enableMath: true,
+  indentSize: 2
+});
+
+// 4. 使用工具方法
+const mathResult = styimat.math.evaluate('100px / 2'); // "50px"
+const rgbColor = styimat.colorUtils.labToRGB(54.7, 77.9, 80.1);
+```
+
+### 4. 混合使用示例
+
+```javascript
+// 先配置，然后使用模板标签
+styimat.config({ enableP3: true });
+
+const designSystem = styimat`
+  /* 设计系统变量 */
+  $primary: lab#8CFF80;
+  $secondary: lch#6CFF180;
+  $spacing-unit: 1rem;
+  
+  /* 组件样式 */
+  .btn {
+    padding: $spacing-unit;
+    background: $primary;
+    
+    &.secondary {
+      background: $secondary;
+    }
+  }
+`;
+
+// 应用到页面
+styimat.apply(designSystem);
+```
+
 ## 语法指南
 
 ### 变量定义
@@ -125,6 +257,24 @@ $font-family: 'Inter', sans-serif;
 }
 ```
 
+### Math 计算语法
+
+```css
+/* math() 函数 */
+.element {
+  width: math(100% / 3);
+  height: math(200px + 30px);
+  padding: math(2rem * 1.5);
+  margin: math(calc(100vh - 200px) / 2);
+}
+
+/* 支持单位运算 */
+.container {
+  font-size: math(16px * 1.125); /* 18px */
+  gap: math(24px + 1rem); /* 支持混合单位 */
+}
+```
+
 ### Lab 颜色语法
 
 ```css
@@ -188,10 +338,18 @@ LCH 颜色使用 `lch#` 前缀，后跟 6 个字符（最后1-3位是十进制
 
   .header {
     font-size: 2rem;
+    
+    .title {
+      color: lab(20 40 60);
+    }
   }
 
   @media (min-width: 768px) {
     padding: 2rem;
+    
+    .header {
+      font-size: 3rem;
+    }
   }
 }
 ```
@@ -203,10 +361,12 @@ LCH 颜色使用 `lch#` 前缀，后跟 6 个字符（最后1-3位是十进制
 $base-color: lab(54.7 77.9 80.1);
 $text-color: lch(20 30 270);
 $border-color: $base-color;
+$padding-large: math(2rem * 1.5);
 
 .element {
   color: $text-color;
   border: 1px solid $border-color;
+  padding: $padding-large;
 }
 ```
 
@@ -230,14 +390,23 @@ styimat.config({
   convertLabToRGB: true,
   convertLchToRGB: true,
   enableP3: true,
+  enableMath: true,
+  mathPrecision: 6,
   indentSize: 2,
   enableNesting: true
 });
 
+// 数学工具
+styimat.math.evaluate('100px / 2'); // "50px"
+styimat.math.evaluate('(16px * 1.5) + 4px'); // "28px"
+
 // 颜色工具
 const rgb = styimat.colorUtils.labToRGB(54.7, 77.9, 80.1);
 const p3 = styimat.colorUtils.labToP3(54.7, 77.9, 80.1);
 const lab = styimat.colorUtils.lchToLab(54.7, 78.9, 38.5);
+
+// 解析颜色
+const colorInfo = styimat.colorUtils.parseColor('lab(54.7 77.9 80.1 / 0.8)');
 ```
 
 ### 配置选项
@@ -254,6 +423,8 @@ const lab = styimat.colorUtils.lchToLab(54.7, 78.9, 38.5);
 | `convertLabToRGB` | boolean | `true` | 是否转换 Lab 颜色为 RGB |
 | `convertLchToRGB` | boolean | `true` | 是否转换 LCH 颜色为 RGB |
 | `enableP3` | boolean | `true` | 是否启用 Display P3 广色域支持 |
+| `enableMath` | boolean | `true` | 是否启用 `math()` 函数增强 |
+| `mathPrecision` | number | `6` | 数学计算的精度 |
 
 ## 示例
 
@@ -271,7 +442,7 @@ $border-radius: 0.5rem;
 .button {
   background-color: $brand-primary;
   color: white;
-  padding: $spacing-unit calc($spacing-unit * 2);
+  padding: $spacing-unit math($spacing-unit * 2);
   border-radius: $border-radius;
   border: 2px solid lab(44.7 67.9 70.1);
 
@@ -281,8 +452,8 @@ $border-radius: 0.5rem;
   }
 
   &.large {
-    padding: calc($spacing-unit * 1.5) calc($spacing-unit * 3);
-    font-size: 1.25rem;
+    padding: math($spacing-unit * 1.5) math($spacing-unit * 3);
+    font-size: math(1rem * 1.25);
   }
 }
 
@@ -293,6 +464,7 @@ $border-radius: 0.5rem;
 
   @media (max-width: 768px) {
     padding: 0 $spacing-unit;
+    font-size: math(16px * 0.9);
   }
 }
 ```
@@ -318,18 +490,72 @@ $primary-transparent: lab(55 190 0 / 0.8);
   .card {
     background: linear-gradient(135deg, $primary, $secondary);
     border: 1px solid $accent;
+    width: math(100% / 3);
   }
 }
 ```
 
+### Math() 函数高级示例
+
+```css
+/* 复杂数学计算 */
+.grid {
+  --columns: 12;
+  --gap: 1rem;
+  
+  .col-4 {
+    width: math(calc(100% / var(--columns)) * 4);
+  }
+  
+  .col-6 {
+    width: math(calc(100% / var(--columns)) * 6 - var(--gap));
+  }
+}
+
+.responsive {
+  font-size: math(clamp(16px, 2vw + 8px, 24px));
+  padding: math(max(1rem, 2vh));
+}
+
+.aspect-ratio {
+  height: math(100vw / 16 * 9); /* 16:9 宽高比 */
+}
+```
+
+## Git 仓库
+
+- **主仓库**: [https://gitee.com/wxy6987/styimat](https://gitee.com/wxy6987/styimat)
+- **ZIP 下载**: [https://gitee.com/wxy6987/styimat/repository/archive/main.zip](https://gitee.com/wxy6987/styimat/repository/archive/main.zip)
+- **Issues**: [问题反馈](https://gitee.com/wxy6987/styimat/issues)
+- **Pull Requests**: [贡献代码](https://gitee.com/wxy6987/styimat/pulls)
+
+## 贡献指南
+
+欢迎贡献代码！请遵循以下步骤：
+
+1. **Fork 本仓库**
+2. **创建特性分支**
+```bash
+git checkout -b feature/AmazingFeature
+```
+3. **提交更改**
+```bash
+git commit -m 'Add some AmazingFeature'
+```
+4. **推送到分支**
+```bash
+git push origin feature/AmazingFeature
+```
+5. **提交 Pull Request**
+
 ## 许可证
 
 MIT © 王小玗 2025
 
-## 贡献
+## 支持
 
-欢迎提交 Issue 和 Pull Request。
+如果发现 bug 或有功能建议，请在 [Gitee Issues](https://gitee.com/wxy6987/styimat/issues) 中创建 Issue。
 
-## 支持
+---
 
-如果发现 bug 或有功能建议，请在 GitHub 仓库中创建 Issue。
+**如果这个项目对你有帮助，请给个 [![Star](https://gitee.com/wxy6987/styimat/badge/star.svg?theme=white)](https://gitee.com/wxy6987/styimat)**

package/package.json

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

package/styimat.js

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

package/styimat.min.js

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