styimat 1.8.0 → 1.11.0

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)
-![size](https://img.shields.io/bundlephobia/minzip/styimat?label=size&color=blue)
+[![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广色域、智能数学计算，一份代码适配所有现代浏览器。
 
 ## 安装方式
 
@@ -22,7 +22,7 @@ npm install
 ```
 
 ### 2. 直接下载 ZIP
-- [点击下载最新版本](https://gitee.com/wxy6987/styimat/repository/archive/main.zip)
+[![下载ZIP压缩包](https://img.shields.io/badge/下载ZIP压缩包-007BFF?style=for-the-badge&logo=data:image/svg%2bxml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDQ4IDQ4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik02IDQyLjAwODNINDIiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMzMgMjNMMjQgMzJMMTUgMjMiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMjMuOTkxNyA2VjMyIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8%2bPC9zdmc%2b&logoColor=white)](https://gitee.com/wxy6987/styimat/repository/archive/main.zip)
 
 ### 3. NPM 安装
 ```bash
@@ -43,9 +43,9 @@ npm install styimat
 - **Lab/LCH 颜色支持** - 将 Lab 和 LCH 颜色转换为 CSS 兼容的 RGB
 - **广色域显示** - 自动检测并支持 Display P3 广色域显示器
 - **变量系统** - 类似 Sass 的变量系统，支持作用域变量
--️ **嵌套规则** - 支持 Sass 风格的嵌套选择器
-- **十六进制语法** - 支持 `lab#L16A16B16` 和 `lch#L16C16H` 简洁语法
-- **增强数学计算** - 支持 `math()` 函数和复杂数学表达式
+- **嵌套规则** - 支持 Sass 风格的嵌套选择器
+- **十六进制语法** - 支持 `lab#LLAABB` 和 `lch#LLCCHHH` 简洁语法
+- **增强数学计算** - 支持 `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. 混合使用示例
@@ -277,9 +280,37 @@ $font-family: 'Inter', sans-serif;
 }
 ```
 
+### 导入语法
+
+#### 您可以在CSS文件的开头使用导入文件来导入其他css文件，应该以`@import开头`：
+
+```css
+@import "head.css";
+@import url("tail.css");
+
+/* 然后写您的CSS代码 */
+$primary-color: lab#32a852;
+$spacing: math(16px * 2 + 4px);
+
+body {
+  color: $primary-color;
+  padding: $spacing;
+  
+  .container {
+    margin: math($spacing / 2);
+  }
+}
+```
+
+#### 还可以使用style语法:
+```html
+<!--这样就自动处理好了-->
+<style src="head.css" e></style>
+```
+
 ### 配置头语法
 
-您可以在CSS文件的开头使用配置头来设置预处理选项，配置行以 `#` 开头：
+您可以在CSS文件的开头使用配置头来设置预处理选项，配置行以 `#`` 开头：
 
 ```css
 #indentSize 4
@@ -305,6 +336,8 @@ body {
 }
 ```
 
+**注意**：配置头既支持驼峰命名也支持连字符命名，例如 `indent-size` 和 `indentSize` 效果相同。
+
 ### Math 计算语法
 
 ```css
@@ -356,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
@@ -367,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度
@@ -443,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
 });
 
 // 数学工具
@@ -457,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` | 导入超时时间（毫秒） |
 
 ## 示例
 
@@ -584,7 +632,7 @@ $primary-transparent: lab(55 190 0 / 0.8);
 欢迎贡献代码！请遵循以下步骤：
 
 1. **Fork 本仓库**  
-[![Forks](https://img.shields.io/badge/点击即可Forks-click?color=red)](https://gitee.com/wxy6987/styimat/members)
+[![Forks](https://img.shields.io/badge/点击即可Forks-red?logo=gitee)](https://gitee.com/wxy6987/styimat/members)
 2. **创建特性分支**  
 ```bash
 git checkout -b feature/AmazingFeature

package/convert-styimat.js

@@ -1,89 +1,184 @@
 #!/usr/bin/env node
 
-// 1. 只做一件事，做好
-// 2. 输入 stdin，输出 stdout
-// 3. 错误输出到 stderr
-// 4. 安静模式可用
-// 5. 返回正确的退出码
-
 const fs = require('fs');
 const path = require('path');
+const chokidar = require('chokidar');
 
-function main() {
+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(`
+用法: huecss-converter [选项] [输入文件] [输出文件]
+
+选项:
+  -w, --watch  监控输入文件变化并自动转换
+  -h, --help   显示帮助信息
+
+示例:
+  huecss-converter                     # 从 stdin 读取，输出到 stdout
+  huecss-converter input.css          # 从文件读取，输出到 stdout
+  huecss-converter input.css output.css # 从文件读取，输出到文件
+  huecss-converter -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 = huecss.convert(inputContent);
+        // 处理进程终止
+        process.on('SIGINT', () => {
+            console.log('\n停止监控...');
+            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 convertHuecss(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 convertHuecss(inputContent);
         
-        // 输出结果
         if (outputFile) {
             fs.writeFileSync(outputFile, outputContent, 'utf8');
         } else {
             process.stdout.write(outputContent + '\n');
         }
-        
     } catch (error) {
-        console.error('错误:', error.message);
+        console.error('转换错误:', error.message);
         process.exit(1);
     }
 }
 
-// 如果是直接运行
-main();
+async function convertHuecss(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 huecssModule = null;
+    for (const modulePath of possiblePaths) {
+        try {
+            if (fs.existsSync(modulePath)) {
+                huecssModule = require(modulePath);
+                break;
+            }
+        } catch (e) {
+            // 继续尝试下一个路径
+        }
+    }
+    
+    if (!huecssModule) {
+        throw new Error('找不到 styimat.js 模块');
+    }
+    
+    // 获取转换函数
+    const huecss = huecssModule.huecss || huecssModule;
+    
+    if (typeof huecss.convert !== 'function') {
+        throw new Error('styimat.convert 不是函数');
+    }
+    
+    // 执行转换
+    return await huecss.convert(inputContent);
+}
+
+// 处理 promise 错误
+main().catch(error => {
+    console.error('程序错误:', error.message);
+    process.exit(1);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styimat",
-  "version": "1.8.0",
+  "version": "1.11.0",
   "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"
   }
 }

package/styimat.js

@@ -10,6 +10,7 @@
  * 支持 Display P3 广色域显示器
  * 增强 math() 函数，支持复杂数学计算
  * 支持配置头
+ * 支持 @import 语法
  */
 (function(root, factory) {
     if (typeof define === 'function' && define.amd) {
@@ -37,10 +38,16 @@
         enableP3: true,
         enableMath: true, // 启用math()函数增强
         mathPrecision: 6, // 数学计算精度
+        importBaseUrl: '', // @import 的基础URL
+        importCache: true, // 缓存导入的文件
+        importTimeout: 5000, // 导入超时时间（毫秒）
     };
 
     // 全局P3支持检测结果
     let p3Supported = null;
+    
+    // 导入文件缓存
+    const importCache = new Map();
 
     /**
      * 解析配置头
@@ -1209,7 +1216,7 @@
                     replaceVariableUsesInValue(value, variables),
                     config
                 );
-                return `  --${name}: ${processedValue};`;
+                return " ".repeat(config.indentSize) + `--${name}: ${processedValue};`;
             })
             .join('\n');
         
@@ -1248,40 +1255,201 @@
         return result.trim();
     }
 
-    // 主转换函数
-    function convert(cssText, customConfig = {}) {
-        // 先解析配置头
-        const { config: headerConfig, css: cleanedCSS } = parseConfigHeader(cssText);
-        const config = { ...defaultConfig, ...customConfig,...headerConfig };
+    /**
+     * 处理 @import 语句
+     * @param {string} cssText - CSS文本
+     * @param {Object} config - 配置对象
+     * @returns {Promise<string>} 处理后的CSS文本
+     */
+    async function processImports(cssText, config) {
+        // 匹配所有@import语句
+        const importRegex = /@import\s+(?:url\()?["']([^"']+)["'](?:\))?[^;]*;/g;
+        
+        // 递归处理函数
+        const processRecursive = async (text) => {
+            // 使用replace更简单的方式
+            const importPromises = [];
+            
+            // 使用replace的回调函数收集所有import的promise
+            const processedText = text.replace(importRegex, (match, url) => {
+                const importPromise = fetchImportContent(url, config)
+                    .then(importedCSS => {
+                        // 递归处理导入的CSS中的import
+                        return processImports(importedCSS, config);
+                    })
+                    .catch(error => {
+                        console.warn(`无法导入CSS文件: ${url}`, error);
+                        // 导入失败时返回空字符串
+                        return '';
+                    });
+                
+                importPromises.push(importPromise);
+                
+                // 返回占位符
+                return `__IMPORT_PLACEHOLDER_${importPromises.length - 1}__`;
+            });
+            
+            // 等待所有import完成
+            if (importPromises.length > 0) {
+                const importedContents = await Promise.all(importPromises);
+                
+                // 替换占位符为实际内容
+                let finalText = processedText;
+                for (let i = 0; i < importedContents.length; i++) {
+                    finalText = finalText.replace(`__IMPORT_PLACEHOLDER_${i}__`, importedContents[i]);
+                }
+                
+                return finalText;
+            }
+            
+            return processedText;
+        };
+        
+        return processRecursive(cssText);
+    }
+
+    /**
+     * 获取导入的CSS内容
+     * @param {string} url - CSS文件URL
+     * @param {Object} config - 配置对象
+     * @returns {Promise<string>} CSS内容
+     */
+    async function fetchImportContent(url, config) {
+        // 检查缓存
+        if (config.importCache && importCache.has(url)) {
+            return importCache.get(url);
+        }
+        
+        // 构建完整的URL
+        const fullUrl = config.importBaseUrl 
+            ? new URL(url, config.importBaseUrl).href
+            : url;
+        
+        let content;
         
-        // 1. 提取变量定义（区分全局和选择器局部）
-        const { globalVariables, selectorVariables, cssWithoutVars } = 
-            extractVariablesAndCSS(cleanedCSS, config);
+        // 检查是否为Node.js环境
+        const isNode = typeof process !== 'undefined' && 
+                      process.versions && 
+                      process.versions.node;
         
-        // 2. 解析嵌套规则（如果启用）
-        let processedCSS = cssWithoutVars.trim();
-        if (config.enableNesting && cssWithoutVars.includes('{')) {
+        if (isNode && typeof require !== 'undefined') {
+            // Node.js环境：使用fs模块
             try {
-                processedCSS = parseNestedRules(cssWithoutVars, config);
+                const fs = require('fs');
+                const path = require('path');
+                
+                // 处理相对路径
+                let filePath = fullUrl;
+                if (fullUrl.startsWith('.')) {
+                    filePath = path.join(process.cwd(), fullUrl);
+                }
+                
+                content = fs.readFileSync(filePath, 'utf-8');
+            } catch (error) {
+                throw new Error(`Node.js文件读取失败: ${fullUrl} - ${error.message}`);
+            }
+        } else {
+            // 浏览器环境：使用fetch
+            try {
+                const controller = new AbortController();
+                const timeoutId = setTimeout(() => controller.abort(), config.importTimeout);
+                
+                const response = await fetch(fullUrl, {
+                    signal: controller.signal,
+                    headers: {
+                        'Accept': 'text/css'
+                    }
+                });
+                
+                clearTimeout(timeoutId);
+                
+                if (!response.ok) {
+                    throw new Error(`HTTP错误: ${response.status} ${response.statusText}`);
+                }
+                
+                content = await response.text();
             } catch (error) {
-                console.warn('嵌套解析失败，使用原始CSS:', error);
+                if (error.name === 'AbortError') {
+                    throw new Error(`导入超时: ${fullUrl}`);
+                }
+                throw new Error(`无法获取CSS: ${fullUrl} - ${error.message}`);
             }
         }
         
-        // 3. 生成根规则（全局变量）
-        const rootRule = generateRootRule(globalVariables, config);
-        
-        // 4. 注入选择器局部变量
-        let finalCSS = processedCSS;
-        if (selectorVariables.size > 0) {
-            finalCSS = injectSelectorVariables(processedCSS, selectorVariables, config);
+        // 缓存内容
+        if (config.importCache) {
+            importCache.set(url, content);
         }
         
-        // 5. 替换变量使用
-        finalCSS = replaceVariableUses(finalCSS, globalVariables, selectorVariables, config);
+        return content;
+    }
+
+    /**
+     * 主转换函数
+     * @param {string} cssText - CSS文本
+     * @param {Object} customConfig - 自定义配置
+     * @returns {string|Promise<string>} 转换后的CSS（如果是异步则为Promise）
+     */
+    function convert(cssText, customConfig = {}) {
+        // 处理同步和异步版本
+        const syncConvert = (cssText, config) => {
+            // 先解析配置头
+            const { config: headerConfig, css: cleanedCSS } = parseConfigHeader(cssText);
+            const finalConfig = { ...defaultConfig, ...customConfig,...headerConfig };
+            
+            // 1. 提取变量定义（区分全局和选择器局部）
+            const { globalVariables, selectorVariables, cssWithoutVars } = 
+                extractVariablesAndCSS(cleanedCSS, finalConfig);
+            
+            // 2. 解析嵌套规则（如果启用）
+            let processedCSS = cssWithoutVars.trim();
+            if (finalConfig.enableNesting && cssWithoutVars.includes('{')) {
+                try {
+                    processedCSS = parseNestedRules(cssWithoutVars, finalConfig);
+                } catch (error) {
+                    console.warn('嵌套解析失败，使用原始CSS:', error);
+                }
+            }
+            
+            // 3. 生成根规则（全局变量）
+            const rootRule = generateRootRule(globalVariables, finalConfig);
+            
+            // 4. 注入选择器局部变量
+            let finalCSS = processedCSS;
+            if (selectorVariables.size > 0) {
+                finalCSS = injectSelectorVariables(processedCSS, selectorVariables, finalConfig);
+            }
+            
+            // 5. 替换变量使用
+            finalCSS = replaceVariableUses(finalCSS, globalVariables, selectorVariables, finalConfig);
+            
+            // 6. 组合结果
+            return rootRule + finalCSS;
+        };
+        
+        // 检查是否有@import语句（需要异步处理）
+        const hasImports = cssText && /@import\s+(?:url\()?["']([^"']+)["']/i.test(cssText);
+        const finalConfig = { ...defaultConfig, ...customConfig };
         
-        // 6. 组合结果
-        return rootRule + finalCSS;
+        if (!hasImports) {
+            // 没有@import，同步处理
+            return syncConvert(cssText, finalConfig);
+        } else {
+            // 有@import，异步处理
+            return (async () => {
+                try {
+                    // 处理@import
+                    const processedWithImports = await processImports(cssText, finalConfig);
+                    
+                    // 同步处理剩余部分
+                    return syncConvert(processedWithImports, finalConfig);
+                } catch (error) {
+                    console.error('@import处理失败:', error);
+                    // 如果导入失败，尝试同步处理原始CSS
+                    return syncConvert(cleanedCSS, finalConfig);
+                }
+            })();
+        }
     }
 
     // 自动处理带有 e 属性的 style 标签
@@ -1290,22 +1458,35 @@
         const styleTags = document.querySelectorAll(`style[${config.styleTagAttribute || 'e'}]`);
         
         styleTags.forEach(styleTag => {
-            const originalCSS = styleTag.textContent;
-            const convertedCSS = convert(originalCSS, config);
+            let originalCSS = styleTag.textContent;
             
-            // 创建新的 style 标签
-            const newStyleTag = document.createElement('style');
-            newStyleTag.textContent = convertedCSS;
-            
-            // 插入到原标签后面
-            styleTag.parentNode.insertBefore(newStyleTag, styleTag.nextSibling);
+            // 处理@import（如果是异步的）
+            const processStyleTag = async () => {
+                try {
+                    if (styleTag.getAttribute("src")){
+                        originalCSS = "@import url(\""+styleTag.getAttribute("src")+"\");";
+                    }
+                    const convertedCSS = await 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';
+                    }
+                } catch (error) {
+                    console.error('处理style标签失败:', error);
+                }
+            };
             
-            // 可选：移除原标签
-            if (!config.preserveOriginal) {
-                styleTag.remove();
-            } else {
-                styleTag.style.display = 'none';
-            }
+            processStyleTag();
         });
         
         return styleTags.length;
@@ -1320,11 +1501,31 @@
         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;
+            // 检查是否有@import
+            const hasImports = /@import\s+(?:url\()?["']([^"']+)["']/i.test(cssText);
+            
+            if (hasImports) {
+                // 异步处理
+                return (async () => {
+                    try {
+                        const converted = await convert(cssText, config);
+                        const styleEl = document.createElement('style');
+                        styleEl.textContent = converted;
+                        document.head.appendChild(styleEl);
+                        return styleEl;
+                    } catch (error) {
+                        console.error('应用CSS失败:', error);
+                        return null;
+                    }
+                })();
+            } else {
+                // 同步处理
+                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', () => {
@@ -1349,6 +1550,40 @@
         // 重新检测P3支持（如果配置变化）
         detectP3Support: detectP3Support,
         
+        // 导入相关方法
+        imports: {
+            /**
+             * 清除导入缓存
+             */
+            clearCache: function() {
+                importCache.clear();
+            },
+            
+            /**
+             * 设置导入基础URL
+             * @param {string} baseUrl - 基础URL
+             */
+            setBaseUrl: function(baseUrl) {
+                defaultConfig.importBaseUrl = baseUrl;
+            },
+            
+            /**
+             * 启用/禁用导入缓存
+             * @param {boolean} enabled - 是否启用缓存
+             */
+            setCacheEnabled: function(enabled) {
+                defaultConfig.importCache = enabled;
+            },
+            
+            /**
+             * 设置导入超时时间
+             * @param {number} timeout - 超时时间（毫秒）
+             */
+            setTimeout: function(timeout) {
+                defaultConfig.importTimeout = timeout;
+            }
+        },
+        
         // 数学计算工具方法
         math: {
             /**
@@ -1526,7 +1761,13 @@
 
         // 如果传入CSS文本，则编译并返回结果
         if (typeof firstArg === 'string') {
-            return convert(firstArg, { ...defaultConfig, ...args[1] });
+            const result = convert(firstArg, { ...defaultConfig, ...args[1] });
+            
+            // 如果结果是Promise，返回Promise
+            if (result && typeof result.then === 'function') {
+                return result;
+            }
+            return result;
         }
 
         // 如果传入配置对象，则应用配置
@@ -1565,7 +1806,13 @@
         }
 
         // 使用convert函数处理
-        return convert(cssText, defaultConfig);
+        const result = convert(cssText, defaultConfig);
+        
+        // 如果结果是Promise，返回Promise
+        if (result && typeof result.then === 'function') {
+            return result;
+        }
+        return result;
     }
 
     // 将API的所有方法复制到主函数上

package/styimat.min.js

@@ -10,6 +10,7 @@
  * 支持 Display P3 广色域显示器
  * 增强 math() 函数，支持复杂数学计算
  * 支持配置头
+ * 支持 @import 语法
  */
 (function(root,factory){if(typeof define==="function"&&define.amd){
 // AMD 支持 (RequireJS)
@@ -20,9 +21,14 @@ module.exports=factory()}else{
 root.styimat=factory()}})(typeof self!=="undefined"?self:this,function(){
 // 默认配置
 let defaultConfig={rootSelector:":root",variablePrefix:"--",preserveOriginal:false,indentSize:4,enableNesting:true,autoProcessStyleTags:true,styleTagAttribute:"e",convertLabToRGB:true,convertLchToRGB:true,enableP3:true,enableMath:true,// 启用math()函数增强
-mathPrecision:6};
+mathPrecision:6,// 数学计算精度
+importBaseUrl:"",// @import 的基础URL
+importCache:true,// 缓存导入的文件
+importTimeout:5e3};
 // 全局P3支持检测结果
 let p3Supported=null;
+// 导入文件缓存
+const importCache=new Map;
 /**
      * 解析配置头
      * @param {string} cssText - CSS文本
@@ -418,45 +424,134 @@ result=result.replace(/(?:\$\$|\$)([a-zA-Z0-9_-]+)/g,(match,varName)=>match.star
 // 最后处理所有的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=processCSSValue(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" ".repeat(config.indentSize)+`--${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+="  --"+varName+": "+varValue+";\n"}}currentSelector=null}
 // 使用全局处理函数处理所有math()和颜色
 result+=processCSSValue(line,config)+"\n"}return result.trim()}
-// 主转换函数
-function convert(cssText,customConfig={}){
+/**
+     * 处理 @import 语句
+     * @param {string} cssText - CSS文本
+     * @param {Object} config - 配置对象
+     * @returns {Promise<string>} 处理后的CSS文本
+     */async function processImports(cssText,config){
+// 匹配所有@import语句
+const importRegex=/@import\s+(?:url\()?["']([^"']+)["'](?:\))?[^;]*;/g;
+// 递归处理函数
+const processRecursive=async text=>{
+// 使用replace更简单的方式
+const importPromises=[];
+// 使用replace的回调函数收集所有import的promise
+const processedText=text.replace(importRegex,(match,url)=>{const importPromise=fetchImportContent(url,config).then(importedCSS=>processImports(importedCSS,config)).catch(error=>{console.warn(`无法导入CSS文件: ${url}`,error);
+// 导入失败时返回空字符串
+return""});importPromises.push(importPromise);
+// 返回占位符
+return`__IMPORT_PLACEHOLDER_${importPromises.length-1}__`});
+// 等待所有import完成
+if(importPromises.length>0){const importedContents=await Promise.all(importPromises);
+// 替换占位符为实际内容
+let finalText=processedText;for(let i=0;i<importedContents.length;i++){finalText=finalText.replace(`__IMPORT_PLACEHOLDER_${i}__`,importedContents[i])}return finalText}return processedText};return processRecursive(cssText)}
+/**
+     * 获取导入的CSS内容
+     * @param {string} url - CSS文件URL
+     * @param {Object} config - 配置对象
+     * @returns {Promise<string>} CSS内容
+     */async function fetchImportContent(url,config){
+// 检查缓存
+if(config.importCache&&importCache.has(url)){return importCache.get(url)}
+// 构建完整的URL
+const fullUrl=config.importBaseUrl?new URL(url,config.importBaseUrl).href:url;let content;
+// 检查是否为Node.js环境
+const isNode=typeof process!=="undefined"&&process.versions&&process.versions.node;if(isNode&&typeof require!=="undefined"){
+// Node.js环境：使用fs模块
+try{const fs=require("fs");const path=require("path");
+// 处理相对路径
+let filePath=fullUrl;if(fullUrl.startsWith(".")){filePath=path.join(process.cwd(),fullUrl)}content=fs.readFileSync(filePath,"utf-8")}catch(error){throw new Error(`Node.js文件读取失败: ${fullUrl} - ${error.message}`)}}else{
+// 浏览器环境：使用fetch
+try{const controller=new AbortController;const timeoutId=setTimeout(()=>controller.abort(),config.importTimeout);const response=await fetch(fullUrl,{signal:controller.signal,headers:{Accept:"text/css"}});clearTimeout(timeoutId);if(!response.ok){throw new Error(`HTTP错误: ${response.status} ${response.statusText}`)}content=await response.text()}catch(error){if(error.name==="AbortError"){throw new Error(`导入超时: ${fullUrl}`)}throw new Error(`无法获取CSS: ${fullUrl} - ${error.message}`)}}
+// 缓存内容
+if(config.importCache){importCache.set(url,content)}return content}
+/**
+     * 主转换函数
+     * @param {string} cssText - CSS文本
+     * @param {Object} customConfig - 自定义配置
+     * @returns {string|Promise<string>} 转换后的CSS（如果是异步则为Promise）
+     */function convert(cssText,customConfig={}){
+// 处理同步和异步版本
+const syncConvert=(cssText,config)=>{
 // 先解析配置头
-const{config:headerConfig,css:cleanedCSS}=parseConfigHeader(cssText);const config={...defaultConfig,...customConfig,...headerConfig};
+const{config:headerConfig,css:cleanedCSS}=parseConfigHeader(cssText);const finalConfig={...defaultConfig,...customConfig,...headerConfig};
 // 1. 提取变量定义（区分全局和选择器局部）
-const{globalVariables:globalVariables,selectorVariables:selectorVariables,cssWithoutVars:cssWithoutVars}=extractVariablesAndCSS(cleanedCSS,config);
+const{globalVariables:globalVariables,selectorVariables:selectorVariables,cssWithoutVars:cssWithoutVars}=extractVariablesAndCSS(cleanedCSS,finalConfig);
 // 2. 解析嵌套规则（如果启用）
-let processedCSS=cssWithoutVars.trim();if(config.enableNesting&&cssWithoutVars.includes("{")){try{processedCSS=parseNestedRules(cssWithoutVars,config)}catch(error){console.warn("嵌套解析失败，使用原始CSS:",error)}}
+let processedCSS=cssWithoutVars.trim();if(finalConfig.enableNesting&&cssWithoutVars.includes("{")){try{processedCSS=parseNestedRules(cssWithoutVars,finalConfig)}catch(error){console.warn("嵌套解析失败，使用原始CSS:",error)}}
 // 3. 生成根规则（全局变量）
-const rootRule=generateRootRule(globalVariables,config);
+const rootRule=generateRootRule(globalVariables,finalConfig);
 // 4. 注入选择器局部变量
-let finalCSS=processedCSS;if(selectorVariables.size>0){finalCSS=injectSelectorVariables(processedCSS,selectorVariables,config)}
+let finalCSS=processedCSS;if(selectorVariables.size>0){finalCSS=injectSelectorVariables(processedCSS,selectorVariables,finalConfig)}
 // 5. 替换变量使用
-finalCSS=replaceVariableUses(finalCSS,globalVariables,selectorVariables,config);
+finalCSS=replaceVariableUses(finalCSS,globalVariables,selectorVariables,finalConfig);
 // 6. 组合结果
-return rootRule+finalCSS}
+return rootRule+finalCSS};
+// 检查是否有@import语句（需要异步处理）
+const hasImports=cssText&&/@import\s+(?:url\()?["']([^"']+)["']/i.test(cssText);const finalConfig={...defaultConfig,...customConfig};if(!hasImports){
+// 没有@import，同步处理
+return syncConvert(cssText,finalConfig)}else{
+// 有@import，异步处理
+return(async()=>{try{
+// 处理@import
+const processedWithImports=await processImports(cssText,finalConfig);
+// 同步处理剩余部分
+return syncConvert(processedWithImports,finalConfig)}catch(error){console.error("@import处理失败:",error);
+// 如果导入失败，尝试同步处理原始CSS
+return syncConvert(cleanedCSS,finalConfig)}})()}}
 // 自动处理带有 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);
+function autoProcessStyleTags(customConfig={}){const config={...defaultConfig,...customConfig};const styleTags=document.querySelectorAll(`style[${config.styleTagAttribute||"e"}]`);styleTags.forEach(styleTag=>{let originalCSS=styleTag.textContent;
+// 处理@import（如果是异步的）
+const processStyleTag=async()=>{try{if(styleTag.getAttribute("src")){originalCSS='@import url("'+styleTag.getAttribute("src")+'");'}const convertedCSS=await 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}}
+if(!config.preserveOriginal){styleTag.remove()}else{styleTag.style.display="none"}}catch(error){console.error("处理style标签失败:",error)}};processStyleTag()});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)}}}
+function apply(cssText,customConfig={}){const config={...defaultConfig,...customConfig};if(cssText){
+// 检查是否有@import
+const hasImports=/@import\s+(?:url\()?["']([^"']+)["']/i.test(cssText);if(hasImports){
+// 异步处理
+return(async()=>{try{const converted=await convert(cssText,config);const styleEl=document.createElement("style");styleEl.textContent=converted;document.head.appendChild(styleEl);return styleEl}catch(error){console.error("应用CSS失败:",error);return null}})()}else{
+// 同步处理
+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.9.0",
 // 检测P3支持
 supportsP3:detectP3Support(),
 // 重新检测P3支持（如果配置变化）
 detectP3Support:detectP3Support,
+// 导入相关方法
+imports:{
+/**
+             * 清除导入缓存
+             */
+clearCache:function(){importCache.clear()},
+/**
+             * 设置导入基础URL
+             * @param {string} baseUrl - 基础URL
+             */
+setBaseUrl:function(baseUrl){defaultConfig.importBaseUrl=baseUrl},
+/**
+             * 启用/禁用导入缓存
+             * @param {boolean} enabled - 是否启用缓存
+             */
+setCacheEnabled:function(enabled){defaultConfig.importCache=enabled},
+/**
+             * 设置导入超时时间
+             * @param {number} timeout - 超时时间（毫秒）
+             */
+setTimeout:function(timeout){defaultConfig.importTimeout=timeout}},
 // 数学计算工具方法
 math:{
 /**
@@ -516,7 +611,9 @@ return handleTemplateTag(...args)}
 // 获取第一个参数
 const firstArg=args[0];
 // 如果传入CSS文本，则编译并返回结果
-if(typeof firstArg==="string"){return convert(firstArg,{...defaultConfig,...args[1]})}
+if(typeof firstArg==="string"){const result=convert(firstArg,{...defaultConfig,...args[1]});
+// 如果结果是Promise，返回Promise
+if(result&&typeof result.then==="function"){return result}return result}
 // 如果传入配置对象，则应用配置
 if(typeof firstArg==="object"&&firstArg!==null){defaultConfig={...defaultConfig,...firstArg};return styimat}
 // 如果没有参数，执行自动处理
@@ -528,7 +625,9 @@ 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)}
+const result=convert(cssText,defaultConfig);
+// 如果结果是Promise，返回Promise
+if(result&&typeof result.then==="function"){return result}return result}
 // 将API的所有方法复制到主函数上
 Object.assign(styimat,api);Object.setPrototypeOf(styimat,Function.prototype);
 // 自动初始化