styimat 1.7.0 → 1.9.0

package/README.md

@@ -3,7 +3,7 @@
 [![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 广色域和增强的数学计算功能。
 
@@ -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
@@ -44,7 +44,7 @@ npm install styimat
 - **广色域显示** - 自动检测并支持 Display P3 广色域显示器
 - **变量系统** - 类似 Sass 的变量系统，支持作用域变量
 -️ **嵌套规则** - 支持 Sass 风格的嵌套选择器
-- **十六进制语法** - 支持 `lab#L16A16B16` 和 `lch#L16C16H` 简洁语法
+- **十六进制语法** - 支持 `lab#LLAABB` 和 `lch#LLCCHHH` 简洁语法
 - **增强数学计算** - 支持 `math()` 函数和复杂数学表达式
 - **轻量高效** - 无依赖，压缩后仅约 20KB
 - **多种使用方式** - 浏览器、Node.js、命令行均可使用
@@ -272,7 +272,63 @@ $font-family: 'Inter', sans-serif;
   margin: $local-var;
       
   &::before {
-   content: $$ctx;  //获取元素属性ctx
+   content: $$ctx;  // 获取元素属性ctx
+  }
+}
+```
+
+### 导入语法
+
+#### 您可以在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
+#indentSize 4
+#autoProcessStyleTags true
+#preserveOriginal true
+#enableP3 false
+#rootSelector :root
+#enableNesting true
+#enableMath true
+#mathPrecision 8
+
+/* 然后写您的CSS代码 */
+$primary-color: lab#32a852;
+$spacing: math(16px * 2 + 4px);
+
+body {
+  color: $primary-color;
+  padding: $spacing;
+  
+  .container {
+    margin: math($spacing / 2);
   }
 }
 ```
@@ -556,7 +612,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

@@ -9,7 +9,7 @@
 const fs = require('fs');
 const path = require('path');
 
-function main() {
+async function main() {
     const args = process.argv.slice(2);
     
     let inputContent = '';
@@ -70,7 +70,7 @@ function main() {
         }
         
         // 执行转换
-        const outputContent = huecss.convert(inputContent);
+        const outputContent = await huecss.convert(inputContent);
         
         // 输出结果
         if (outputFile) {

package/package.json

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

package/styimat.js

@@ -9,6 +9,8 @@
  * 支持 lab# 和 lch# 十六进制语法
  * 支持 Display P3 广色域显示器
  * 增强 math() 函数，支持复杂数学计算
+ * 支持配置头
+ * 支持 @import 语法
  */
 (function(root, factory) {
     if (typeof define === 'function' && define.amd) {
@@ -27,7 +29,7 @@
         rootSelector: ':root',
         variablePrefix: '--',
         preserveOriginal: false,
-        indentSize: 2,
+        indentSize: 4,
         enableNesting: true,
         autoProcessStyleTags: true,
         styleTagAttribute: 'e',
@@ -36,10 +38,80 @@
         enableP3: true,
         enableMath: true, // 启用math()函数增强
         mathPrecision: 6, // 数学计算精度
+        importBaseUrl: '', // @import 的基础URL
+        importCache: true, // 缓存导入的文件
+        importTimeout: 5000, // 导入超时时间（毫秒）
     };
 
     // 全局P3支持检测结果
     let p3Supported = null;
+    
+    // 导入文件缓存
+    const importCache = new Map();
+
+    /**
+     * 解析配置头
+     * @param {string} cssText - CSS文本
+     * @returns {Object} {config: 配置对象, css: 清理后的CSS}
+     */
+    function parseConfigHeader(cssText) {
+        const config = { ...defaultConfig };
+        const lines = cssText.split('\n');
+        const cleanLines = [];
+        
+        for (let line of lines) {
+            const trimmed = line.trim();
+            
+            // 检查是否是配置行（以 # 开头）
+            if (trimmed.startsWith('#')) {
+                const configLine = trimmed.substring(1).trim();
+                const firstSpace = configLine.indexOf(' ');
+                
+                if (firstSpace !== -1) {
+                    const key = configLine.substring(0, firstSpace).trim();
+                    const value = configLine.substring(firstSpace + 1).trim();
+                    
+                    // 转换配置值
+                    const configKey = camelCase(key);
+                    
+                    if (configKey in config) {
+                        // 根据值的类型进行转换
+                        if (value === 'true' || value === 'false') {
+                            config[configKey] = value === 'true';
+                        } else if (!isNaN(value) && value.trim() !== '') {
+                            // 数字类型
+                            config[configKey] = Number(value);
+                        } else {
+                            // 字符串类型
+                            config[configKey] = value;
+                        }
+                    } else {
+                        console.warn(`未知的配置项: ${key}`);
+                    }
+                } else {
+                    console.warn(`无效的配置行: ${trimmed}`);
+                }
+            } else {
+                cleanLines.push(line);
+            }
+        }
+        
+        return {
+            config,
+            css: cleanLines.join('\n')
+        };
+    }
+
+    /**
+     * 将连字符分隔的字符串转换为驼峰命名
+     * @param {string} str - 输入字符串
+     * @returns {string} 驼峰命名字符串
+     */
+    function camelCase(str) {
+        return str.replace(/-([a-z])/g, function(match, letter) {
+            return letter.toUpperCase();
+        });
+    }
 
     /**
      * 检测浏览器是否支持 Display P3
@@ -958,10 +1030,10 @@
             
             // 更新缩进级别
             if (line.includes('{')) {
-                currentIndent += 2;
+                currentIndent += config.indentSize;
             }
             if (line.includes('}')) {
-                currentIndent = Math.max(0, currentIndent - 2);
+                currentIndent = Math.max(0, currentIndent - config.indentSize);
             }
         }
         
@@ -987,7 +1059,6 @@
             
             // 计算缩进级别（假设使用空格缩进）
             const indent = line.match(/^(\s*)/)[0].length;
-            const indentLevel = Math.floor(indent / config.indentSize);
             
             // 处理规则块结束
             if (trimmed === '}') {
@@ -1015,8 +1086,7 @@
                 const rule = {
                     selector: selector,
                     properties: [],
-                    children: [],
-                    indentLevel: indentLevel
+                    children: []
                 };
                 
                 // 推入堆栈
@@ -1064,7 +1134,7 @@
         for (const rule of rules) {
             // 构建完整选择器
             const isAt = rule.selector.startsWith("@");
-            let fullSelector = (isParentAt ? '  ' : '') + rule.selector;
+            let fullSelector = (isParentAt ? " ".repeat(config.indentSize) : '') + rule.selector;
             
             if (isAt) {
                 fullSelector = rule.selector + " {\n";
@@ -1090,10 +1160,10 @@
                     parsed.forEach(obj => {
                         const key = Object.keys(obj)[0];
                         const value = processCSSValue(obj[key], config);
-                        result += (isParentAt ? '  ' : '') + `  ${key}: ${value};\n`;
+                        result += (isParentAt ? " ".repeat(config.indentSize) : '') + " ".repeat(config.indentSize) +`${key}: ${value};\n`;
                     });
                 }
-                result += isParentAt ? '  }\n' : '}\n\n';
+                result += isParentAt ? " ".repeat(config.indentSize) + '}\n' : '}\n\n';
             }
             
             // 递归处理子规则
@@ -1106,7 +1176,7 @@
             }
         }
         
-        return result.trim() + (isParentAt ? "\n\n" : "");
+        return result.trim() + "\n\n";
     }
 
     // 替换变量值中的变量引用
@@ -1146,7 +1216,7 @@
                     replaceVariableUsesInValue(value, variables),
                     config
                 );
-                return `  --${name}: ${processedValue};`;
+                return " ".repeat(config.indentSize) + `--${name}: ${processedValue};`;
             })
             .join('\n');
         
@@ -1172,7 +1242,7 @@
                     const vars = selectorVariables.get(currentSelector);
                     const indent = line.match(/^(\s*)/)[0];
                     for (const [varName, varValue] of Object.entries(vars)) {
-                        result += indent + '  --' + varName + ': ' + varValue + ';\n';
+                        result += '  --' + varName + ': ' + varValue + ';\n';
                     }
                 }
                 currentSelector = null;
@@ -1185,38 +1255,201 @@
         return result.trim();
     }
 
-    // 主转换函数
-    function convert(cssText, customConfig = {}) {
-        const config = { ...defaultConfig, ...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 => {
+                        // 递归处理导入的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;
         
-        // 1. 提取变量定义（区分全局和选择器局部）
-        const { globalVariables, selectorVariables, cssWithoutVars } = 
-            extractVariablesAndCSS(cssText, config);
+        let content;
         
-        // 2. 解析嵌套规则（如果启用）
-        let processedCSS = cssWithoutVars.trim();
-        if (config.enableNesting && cssWithoutVars.includes('{')) {
+        // 检查是否为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 {
-                processedCSS = parseNestedRules(cssWithoutVars, config);
+                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 标签
@@ -1225,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;
@@ -1255,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', () => {
@@ -1284,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: {
             /**
@@ -1461,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;
         }
 
         // 如果传入配置对象，则应用配置
@@ -1500,12 +1806,18 @@
         }
 
         // 使用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);
+    Object.setPrototypeOf(styimat, Function.prototype);
 
     // 自动初始化
     if (typeof window !== 'undefined') {

package/styimat.min.js

@@ -9,6 +9,8 @@
  * 支持 lab# 和 lch# 十六进制语法
  * 支持 Display P3 广色域显示器
  * 增强 math() 函数，支持复杂数学计算
+ * 支持配置头
+ * 支持 @import 语法
  */
 (function(root,factory){if(typeof define==="function"&&define.amd){
 // AMD 支持 (RequireJS)
@@ -18,10 +20,35 @@ 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,convertLchToRGB:true,enableP3:true,enableMath:true,// 启用math()函数增强
-mathPrecision:6};
+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,// 数学计算精度
+importBaseUrl:"",// @import 的基础URL
+importCache:true,// 缓存导入的文件
+importTimeout:5e3};
 // 全局P3支持检测结果
 let p3Supported=null;
+// 导入文件缓存
+const importCache=new Map;
+/**
+     * 解析配置头
+     * @param {string} cssText - CSS文本
+     * @returns {Object} {config: 配置对象, css: 清理后的CSS}
+     */function parseConfigHeader(cssText){const config={...defaultConfig};const lines=cssText.split("\n");const cleanLines=[];for(let line of lines){const trimmed=line.trim();
+// 检查是否是配置行（以 # 开头）
+if(trimmed.startsWith("#")){const configLine=trimmed.substring(1).trim();const firstSpace=configLine.indexOf(" ");if(firstSpace!==-1){const key=configLine.substring(0,firstSpace).trim();const value=configLine.substring(firstSpace+1).trim();
+// 转换配置值
+const configKey=camelCase(key);if(configKey in config){
+// 根据值的类型进行转换
+if(value==="true"||value==="false"){config[configKey]=value==="true"}else if(!isNaN(value)&&value.trim()!==""){
+// 数字类型
+config[configKey]=Number(value)}else{
+// 字符串类型
+config[configKey]=value}}else{console.warn(`未知的配置项: ${key}`)}}else{console.warn(`无效的配置行: ${trimmed}`)}}else{cleanLines.push(line)}}return{config:config,css:cleanLines.join("\n")}}
+/**
+     * 将连字符分隔的字符串转换为驼峰命名
+     * @param {string} str - 输入字符串
+     * @returns {string} 驼峰命名字符串
+     */function camelCase(str){return str.replace(/-([a-z])/g,function(match,letter){return letter.toUpperCase()})}
 /**
      * 检测浏览器是否支持 Display P3
      * @returns {boolean} 是否支持P3
@@ -350,12 +377,12 @@ if(trimmed==="}"){if(inSelectorBlock){
 // 在选择器结束前插入变量声明
 if(currentSelector&&selectorVariables.has(currentSelector)){const vars=selectorVariables.get(currentSelector);const indent=" ".repeat(currentIndent);for(const[varName,varValue]of Object.entries(vars)){cssWithoutVars+=`${indent}  --${varName}: ${varValue};\n`}}}inSelectorBlock=false;currentSelector=null}cssWithoutVars+=line+"\n";
 // 更新缩进级别
-if(line.includes("{")){currentIndent+=2}if(line.includes("}")){currentIndent=Math.max(0,currentIndent-2)}}return{globalVariables:globalVariables,selectorVariables:selectorVariables,cssWithoutVars:cssWithoutVars.trim()}}
+if(line.includes("{")){currentIndent+=config.indentSize}if(line.includes("}")){currentIndent=Math.max(0,currentIndent-config.indentSize)}}return{globalVariables:globalVariables,selectorVariables:selectorVariables,cssWithoutVars:cssWithoutVars.trim()}}
 // 修复的嵌套解析函数
 function parseNestedRules(cssText,config){const lines=cssText.split("\n");const stack=[];// 存储规则信息：{selector, properties, children}
 const rootRules=[];let currentIndent=0;for(let i=0;i<lines.length;i++){const line=lines[i];const trimmed=line.trim();if(!trimmed)continue;
 // 计算缩进级别（假设使用空格缩进）
-const indent=line.match(/^(\s*)/)[0].length;const indentLevel=Math.floor(indent/config.indentSize);
+const indent=line.match(/^(\s*)/)[0].length;
 // 处理规则块结束
 if(trimmed==="}"){if(stack.length>0){const rule=stack.pop();
 // 如果这个规则有父规则，添加到父规则的children中
@@ -365,7 +392,7 @@ rootRules.push(rule)}}continue}
 // 处理规则开始
 if(trimmed.endsWith("{")){const selector=trimmed.slice(0,-1).trim();
 // 创建新规则
-const rule={selector:selector,properties:[],children:[],indentLevel:indentLevel};
+const rule={selector:selector,properties:[],children:[]};
 // 推入堆栈
 stack.push(rule);continue}
 // 处理属性行（不包含 { 或 } 的行）
@@ -379,15 +406,15 @@ return convertRulesToCSS(rootRules,config)}
 // 将规则树转换为CSS字符串
 function convertRulesToCSS(rules,config,parentSelector=""){let result="";const isParentAt=parentSelector.startsWith("@");for(const rule of rules){
 // 构建完整选择器
-const isAt=rule.selector.startsWith("@");let fullSelector=(isParentAt?"  ":"")+rule.selector;if(isAt){fullSelector=rule.selector+" {\n"}if(parentSelector){
+const isAt=rule.selector.startsWith("@");let fullSelector=(isParentAt?" ".repeat(config.indentSize):"")+rule.selector;if(isAt){fullSelector=rule.selector+" {\n"}if(parentSelector){
 // 处理 & 选择器
 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){
 // 再次处理属性值（确保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"}
+const parsed=parseSingleLineCSS(prop);parsed.forEach(obj=>{const key=Object.keys(obj)[0];const value=processCSSValue(obj[key],config);result+=(isParentAt?" ".repeat(config.indentSize):"")+" ".repeat(config.indentSize)+`${key}: ${value};\n`})}result+=isParentAt?" ".repeat(config.indentSize)+"}\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":"")}
+if(rule.children&&rule.children.length>0){result+=convertRulesToCSS(rule.children,config,fullSelector)}if(isParentAt){result+="}\n\n"}}return result.trim()+"\n\n"}
 // 替换变量值中的变量引用
 function replaceVariableUsesInValue(value,variables){return value.replace(/\$([a-zA-Z0-9_-]+)/g,(match,varName)=>{if(variables[varName]){return`var(--${varName})`}return match})}
 // 替换变量使用
@@ -397,43 +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+=indent+"  --"+varName+": "+varValue+";\n"}}currentSelector=null}
+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={}){const config={...defaultConfig,...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 finalConfig={...defaultConfig,...customConfig,...headerConfig};
 // 1. 提取变量定义（区分全局和选择器局部）
-const{globalVariables:globalVariables,selectorVariables:selectorVariables,cssWithoutVars:cssWithoutVars}=extractVariablesAndCSS(cssText,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:{
 /**
@@ -493,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}
 // 如果没有参数，执行自动处理
@@ -505,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);
 // 自动初始化