styimat 1.8.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、命令行均可使用
@@ -277,6 +277,34 @@ $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文件的开头使用配置头来设置预处理选项，配置行以 `#` 开头：
@@ -584,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.8.0",
+  "version": "1.9.0",
   "description": "一个高效的CSS变量预处理库，支持Lab/LCH颜色空间自动转换、嵌套选择器和Display P3广色域，让现代CSS开发更简洁强大。",
   "keywords": [
     "css",

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);
 // 自动初始化