styimat 1.4.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,6 +1,6 @@
 {
   "name": "styimat",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "一个高效的CSS变量预处理库，支持Lab/LCH颜色空间自动转换、嵌套选择器和Display P3广色域，让现代CSS开发更简洁强大。",
   "keywords": [
     "css",

package/styimat.js

@@ -1,3 +1,7 @@
+/*!
+ * MIT License
+ * Copyright (c) 2025 王小玗
+ */
 /**
  * CSS 变量预处理库 - 增强版
  * 支持 CSS 变量预处理、嵌套选择器和嵌套变量
@@ -1449,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') {
@@ -1472,5 +1536,5 @@
     });
   }
   
-  return api;
+  return styimat;
 }));

package/styimat.min.js

@@ -1,3 +1,7 @@
+/*!
+ * MIT License
+ * Copyright (c) 2025 王小玗
+ */
 /**
  * CSS 变量预处理库 - 增强版
  * 支持 CSS 变量预处理、嵌套选择器和嵌套变量
@@ -482,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:`--${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 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});