styimat 1.4.0 → 1.6.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,136 @@ 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. HTMLElement的新方法
+HTMLElement由此库新增了`cssVar`属性，可以设置、获取css变量
+
+```javascript
+ele.cssVar(prop, value);   // 设置prop变量为value
+ele.cssVar.prop = value;   // 设置prop变量为value
+ele.cssVar[prop] = value;  // 设置prop变量为value
+ele.cssVar(prop);          // 获取prop变量的值
+ele.cssVar.prop;           // 获取prop变量的值
+ele.cssVar[prop]           // 获取prop变量的值
+
+```
+
+### 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 +270,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 +351,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 +374,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 +403,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 +436,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 +455,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 +465,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 +477,7 @@ $border-radius: 0.5rem;
 
   @media (max-width: 768px) {
     padding: 0 $spacing-unit;
+    font-size: math(16px * 0.9);
   }
 }
 ```
@@ -318,18 +503,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,6 +1,6 @@
 {
   "name": "styimat",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "一个高效的CSS变量预处理库，支持Lab/LCH颜色空间自动转换、嵌套选择器和Display P3广色域，让现代CSS开发更简洁强大。",
   "keywords": [
     "css",