styimat 1.9.0 → 1.11.1

package/README.md

@@ -1,11 +1,11 @@
-# styimat
+# Styimat
 [![Stars](https://img.shields.io/badge/dynamic/json?label=Stars&query=%24.stargazers_count&url=https%3A%2F%2Fgitee.com%2Fapi%2Fv5%2Frepos%2Fwxy6987%2Fstyimat&color=FFD700&style=yellow)](https://gitee.com/wxy6987/styimat/stargazers)
 [![Forks](https://img.shields.io/badge/dynamic/json?label=Forks&query=%24.forks_count&url=https%3A%2F%2Fgitee.com%2Fapi%2Fv5%2Frepos%2Fwxy6987%2Fstyimat&color=red)](https://gitee.com/wxy6987/styimat/members)
 [![version](https://img.shields.io/npm/v/styimat.svg?color=brightgreen)](https://www.npmjs.com/package/styimat)
 [![license](https://img.shields.io/npm/l/styimat.svg?color=lightgrey)](LICENSE)
 [![npm 下载量](https://img.shields.io/npm/dt/styimat?label=download&color=blue)](https://www.npmjs.com/package/styimat)
 
-一个功能强大的 CSS 变量预处理库，支持嵌套规则、Lab/LCH 颜色空间转换、Display P3 广色域和增强的数学计算功能。
+让CSS变量拥有预处理能力：嵌套语法、Lab/LCH色彩空间、Display P3广色域、智能数学计算，一份代码适配所有现代浏览器。
 
 ## 安装方式
 
@@ -43,9 +43,9 @@ npm install styimat
 - **Lab/LCH 颜色支持** - 将 Lab 和 LCH 颜色转换为 CSS 兼容的 RGB
 - **广色域显示** - 自动检测并支持 Display P3 广色域显示器
 - **变量系统** - 类似 Sass 的变量系统，支持作用域变量
--️ **嵌套规则** - 支持 Sass 风格的嵌套选择器
+- **嵌套规则** - 支持 Sass 风格的嵌套选择器
 - **十六进制语法** - 支持 `lab#LLAABB` 和 `lch#LLCCHHH` 简洁语法
-- **增强数学计算** - 支持 `math()` 函数和复杂数学表达式
+- **增强数学计算** - 支持 `math()`` 函数和复杂数学表达式
 - **轻量高效** - 无依赖，压缩后仅约 20KB
 - **多种使用方式** - 浏览器、Node.js、命令行均可使用
 - **灵活API** - 支持函数调用、模板标签、对象配置等多种用法
@@ -124,6 +124,10 @@ npx styimat
 # 全局安装后使用
 npm install -g styimat
 styimat input.css output.css
+
+# 监听
+npx styimat --watch input.css output.css
+npx styimat -w input.css output.css
 ```
 
 ## 高级用法
@@ -226,7 +230,6 @@ ele.cssVar[prop] = value;  // 设置prop变量为value
 ele.cssVar(prop);          // 获取prop变量的值
 ele.cssVar.prop;           // 获取prop变量的值
 ele.cssVar[prop]           // 获取prop变量的值
-
 ```
 
 ### 4. 混合使用示例
@@ -307,7 +310,7 @@ body {
 
 ### 配置头语法
 
-您可以在CSS文件的开头使用配置头来设置预处理选项，配置行以 `#` 开头：
+您可以在CSS文件的开头使用配置头来设置预处理选项，配置行以 `#`` 开头：
 
 ```css
 #indentSize 4
@@ -333,6 +336,8 @@ body {
 }
 ```
 
+**注意**：配置头既支持驼峰命名也支持连字符命名，例如 `indent-size` 和 `indentSize` 效果相同。
+
 ### Math 计算语法
 
 ```css
@@ -384,7 +389,7 @@ body {
 ## 十六进制颜色语法详解
 
 ### Lab 十六进制格式：`lab#LLAABB`
-Lab 颜色使用 `lab#` 前缀，后跟 6 个十六进制字符：
+Lab 颜色使用 `lab#`` 前缀，后跟 6 个十六进制字符：
 - 前 2 位：L（明度），范围 00-FF，映射到 0-100
 - 中间 2 位：A（红绿轴），范围 00-FF，映射到 -192 到 192
 - 后 2 位：B（黄蓝轴），范围 00-FF，映射到 -192 到 192
@@ -395,7 +400,7 @@ Lab 颜色使用 `lab#` 前缀，后跟 6 个十六进制字符：
 - B = 0x80 = 128 → (128-128) × 1.5 = 0
 
 ### LCH 十六进制格式：`lch#LLCCHHH`
-LCH 颜色使用 `lch#` 前缀，后跟 6 个字符（最后1-3位是十进制色相值）：
+LCH 颜色使用 `lch#`` 前缀，后跟 6 个字符（最后1-3位是十进制色相值）：
 - 前 2 位：L（明度），范围 00-FF，映射到 0-100
 - 中间 2 位：C（色度），范围 00-FF，映射到 0-150
 - 后 1-3 位：H（色相），范围 0-100，映射到 0-360度
@@ -471,7 +476,13 @@ styimat.config({
   enableMath: true,
   mathPrecision: 6,
   indentSize: 2,
-  enableNesting: true
+  enableNesting: true,
+  importBaseUrl: '',        // 导入基础URL
+  importCache: true,        // 缓存导入文件
+  importTimeout: 5000,      // 导入超时时间
+  autoProcessStyleTags: true,
+  styleTagAttribute: 'e',
+  preserveOriginal: false
 });
 
 // 数学工具
@@ -485,24 +496,33 @@ 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)');
+
+// 导入工具
+styimat.imports.clearCache();            // 清除导入缓存
+styimat.imports.setBaseUrl('/css/');     // 设置导入基础URL
+styimat.imports.setCacheEnabled(false);  // 禁用导入缓存
+styimat.imports.setTimeout(10000);       // 设置导入超时时间
 ```
 
 ### 配置选项
 
 | 选项 | 类型 | 默认值 | 描述 |
 |------|------|--------|------|
-| `rootSelector` | string | `':root'` | CSS 变量定义的根选择器 |
-| `variablePrefix` | string | `'--'` | CSS 变量前缀 |
-| `preserveOriginal` | boolean | `false` | 是否保留原始 `<style e>` 标签 |
-| `indentSize` | number | `2` | 嵌套规则的缩进大小 |
+| `rootSelector` | string | `:root` | CSS 变量定义的根选择器 |
+| `variablePrefix` | string | `--`` | CSS 变量前缀 |
+| `preserveOriginal` | boolean | `false` | 是否保留原始 `<style e>`` 标签 |
+| `indentSize` | number | `4` | 嵌套规则的缩进大小 |
 | `enableNesting` | boolean | `true` | 是否启用嵌套规则 |
 | `autoProcessStyleTags` | boolean | `true` | 是否自动处理页面中的 style 标签 |
-| `styleTagAttribute` | string | `'e'` | 标识需要处理的 style 标签属性 |
+| `styleTagAttribute` | string | `e` | 标识需要处理的 style 标签属性 |
 | `convertLabToRGB` | boolean | `true` | 是否转换 Lab 颜色为 RGB |
 | `convertLchToRGB` | boolean | `true` | 是否转换 LCH 颜色为 RGB |
 | `enableP3` | boolean | `true` | 是否启用 Display P3 广色域支持 |
-| `enableMath` | boolean | `true` | 是否启用 `math()` 函数增强 |
+| `enableMath` | boolean | `true` | 是否启用 `math()`` 函数增强 |
 | `mathPrecision` | number | `6` | 数学计算的精度 |
+| `importBaseUrl` | string | `` | 导入的基础URL |
+| `importCache` | boolean | `true` | 是否缓存导入的文件 |
+| `importTimeout` | number | `5000` | 导入超时时间（毫秒） |
 
 ## 示例
 

package/convert-styimat.js

@@ -1,89 +1,186 @@
 #!/usr/bin/env node
 
-// 1. 只做一件事，做好
-// 2. 输入 stdin，输出 stdout
-// 3. 错误输出到 stderr
-// 4. 安静模式可用
-// 5. 返回正确的退出码
-
 const fs = require('fs');
 const path = require('path');
+const chokidar = require('chokidar');
 
 async function main() {
     const args = process.argv.slice(2);
     
+    // 解析参数
     let inputContent = '';
     let outputFile = null;
+    let watchMode = false;
+    let inputFile = null;
     
-    // 处理参数
-    if (args.length === 0) {
-        // 从 stdin 读取
-        inputContent = fs.readFileSync(0, 'utf8'); // 文件描述符 0 = stdin
-    } else if (args.length === 1) {
-        // 从文件读取，输出到 stdout
-        const inputFile = args[0];
-        inputContent = fs.readFileSync(inputFile, 'utf8');
-    } else if (args.length === 2) {
-        // 从文件读取，输出到文件
-        const inputFile = args[0];
-        outputFile = args[1];
-        inputContent = fs.readFileSync(inputFile, 'utf8');
-    } else {
-        // 参数过多，显示用法
-        console.error('用法:');
-        console.error('  huecss-converter                     # 从 stdin 读取，输出到 stdout');
-        console.error('  huecss-converter input.css          # 从文件读取，输出到 stdout');
-        console.error('  huecss-converter input.css output.css # 从文件读取，输出到文件');
-        process.exit(1);
+    for (let i = 0; i < args.length; i++) {
+        const arg = args[i];
+        
+        if (arg === '--watch' || arg === '-w') {
+            watchMode = true;
+        } else if (arg === '--help' || arg === '-h') {
+            showHelp();
+            process.exit(0);
+        } else if (arg.startsWith('-')) {
+            console.error(`错误: 未知选项 ${arg}`);
+            showHelp();
+            process.exit(1);
+        } else if (!inputFile) {
+            inputFile = arg;
+        } else if (!outputFile) {
+            outputFile = arg;
+        } else {
+            console.error('错误: 参数过多');
+            showHelp();
+            process.exit(1);
+        }
     }
     
-    // 检查是否在相同目录
-    try {
-        // 尝试从多个位置加载 styimat.js
-        const possiblePaths = [
-            path.join(__dirname, 'styimat.js'),
-            path.join(process.cwd(), 'styimat.js'),
-            path.join(process.cwd(), 'node_modules', 'styimat', 'styimat.js')
-        ];
-        
-        let huecssModule = null;
-        for (const modulePath of possiblePaths) {
-            try {
-                if (fs.existsSync(modulePath)) {
-                    huecssModule = require(modulePath);
-                    break;
-                }
-            } catch (e) {
-                // 继续尝试下一个路径
-            }
+    function showHelp() {
+        console.log(`
+用法: styimat [选项] [输入文件] [输出文件]
+
+选项:
+  -w, --watch  监控输入文件变化并自动转换
+  -h, --help   显示帮助信息
+
+示例:
+  styimat                     # 从 stdin 读取，输出到 stdout
+  styimat input.css          # 从文件读取，输出到 stdout
+  styimat input.css output.css # 从文件读取，输出到文件
+  styimat -w input.css output.css # 监控并自动转换
+`);
+    }
+    
+    // 如果没有输入文件，从 stdin 读取
+    if (!inputFile) {
+        if (watchMode) {
+            console.error('错误: 监控模式需要指定输入文件');
+            process.exit(1);
         }
         
-        if (!huecssModule) {
-            throw new Error('找不到 styimat.js 模块');
+        inputContent = fs.readFileSync(0, 'utf8');
+        await convertAndOutput(inputContent, null);
+        return;
+    }
+    
+    // 检查输入文件是否存在
+    if (!fs.existsSync(inputFile)) {
+        console.error(`错误: 输入文件 "${inputFile}" 不存在`);
+        process.exit(1);
+    }
+    
+    // 如果是监控模式
+    if (watchMode) {
+        if (!outputFile) {
+            console.error('错误: 监控模式需要指定输出文件');
+            process.exit(1);
         }
         
-        // 获取转换函数
-        const huecss = huecssModule.huecss || huecssModule;
+        console.log(`监控模式已启动: ${inputFile} -> ${outputFile}`);
+        console.log('按 Ctrl+C 退出');
         
-        if (typeof huecss.convert !== 'function') {
-            throw new Error('styimat.convert 不是函数');
-        }
+        // 初始转换
+        await convertFile(inputFile, outputFile);
+        
+        // 监控文件变化
+        const watcher = chokidar.watch(inputFile, {
+            persistent: true,
+            ignoreInitial: true,
+            awaitWriteFinish: {
+                stabilityThreshold: 200,
+                pollInterval: 100
+            }
+        });
+        
+        watcher
+            .on('change', async (filePath) => {
+                console.log(`${new Date().toLocaleTimeString()} - 检测到变化: ${filePath}`);
+                await convertFile(filePath, outputFile);
+            })
+            .on('error', (error) => {
+                console.error(`监控错误: ${error.message}`);
+            });
         
-        // 执行转换
-        const outputContent = await huecss.convert(inputContent);
+        // 处理进程终止
+        process.on('SIGINT', () => {
+            console.log('
+停止监控...');
+            watcher.close();
+            process.exit(0);
+        });
+        
+    } else {
+        // 非监控模式
+        inputContent = fs.readFileSync(inputFile, 'utf8');
+        await convertAndOutput(inputContent, outputFile);
+    }
+}
+
+async function convertFile(inputFilePath, outputFilePath) {
+    try {
+        const inputContent = fs.readFileSync(inputFilePath, 'utf8');
+        const outputContent = await convertStyimat(inputContent);
+        fs.writeFileSync(outputFilePath, outputContent, 'utf8');
+        console.log(`${new Date().toLocaleTimeString()} - 转换完成: ${inputFilePath} -> ${outputFilePath}`);
+    } catch (error) {
+        console.error(`${new Date().toLocaleTimeString()} - 转换错误: ${error.message}`);
+    }
+}
+
+async function convertAndOutput(inputContent, outputFile) {
+    try {
+        const outputContent = await convertStyimat(inputContent);
         
-        // 输出结果
         if (outputFile) {
             fs.writeFileSync(outputFile, outputContent, 'utf8');
         } else {
-            process.stdout.write(outputContent + '\n');
+            process.stdout.write(outputContent + '
+');
         }
-        
     } catch (error) {
-        console.error('错误:', error.message);
+        console.error('转换错误:', error.message);
         process.exit(1);
     }
 }
 
-// 如果是直接运行
-main();
+async function convertStyimat(inputContent) {
+    // 尝试从多个位置加载 styimat.js
+    const possiblePaths = [
+        path.join(__dirname, 'styimat.js'),
+        path.join(process.cwd(), 'styimat.js'),
+        path.join(process.cwd(), 'node_modules', 'styimat', 'styimat.js')
+    ];
+    
+    let styimatModule = null;
+    for (const modulePath of possiblePaths) {
+        try {
+            if (fs.existsSync(modulePath)) {
+                styimatModule = require(modulePath);
+                break;
+            }
+        } catch (e) {
+            // 继续尝试下一个路径
+        }
+    }
+    
+    if (!styimatModule) {
+        throw new Error('找不到 styimat.js 模块');
+    }
+    
+    // 获取转换函数
+    const styimat = styimatModule.styimat || styimatModule;
+    
+    if (typeof styimat.convert !== 'function') {
+        throw new Error('styimat.convert 不是函数');
+    }
+    
+    // 执行转换
+    return await styimat.convert(inputContent);
+}
+
+// 处理 promise 错误
+main().catch(error => {
+    console.error('程序错误:', error.message);
+    process.exit(1);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styimat",
-  "version": "1.9.0",
+  "version": "1.11.1",
   "description": "一个高效的CSS变量预处理库，支持Lab/LCH颜色空间自动转换、嵌套选择器和Display P3广色域，让现代CSS开发更简洁强大。",
   "keywords": [
     "css",
@@ -53,6 +53,7 @@
     "git:auto-tag": "git tag -d v$(node -p \"require('./package.json').version\") 2>/dev/null || true && git tag -a v$(node -p \"require('./package.json').version\") -m 'Version $(node -p \"require('./package.json').version\")' && git push && git push --tags"
   },
   "dependencies": {
+    "chokidar": "^5.0.0",
     "terser": "^5.44.1"
   }
 }