styimat 4.3.0 → 6.0.0

package/README.md

@@ -1,3 +1,4 @@
+
 # 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)
@@ -62,7 +63,7 @@ const css = `
   .button { background-color: $primary; }
 `;
 
-const result = styimat.convert(css);
+const result = await styimat.convert(css);
 console.log(result);
 ```
 
@@ -110,8 +111,7 @@ const css = await styimat(`
 // 方式2：传入配置对象（返回函数本身）
 styimat({
   enableP3: true,
-  enableMath: true,
-  mathPrecision: 8
+  enableMath: true
 });
 
 // 方式3：无参数调用（自动处理页面中所有标记的<style>标签）
@@ -162,7 +162,7 @@ styimat.config({
 });
 
 // 4. 使用工具方法
-const mathResult = styimat.math.evaluate('100px / 2'); // "50px"
+const mathResult = styimat.math.evaluate('100px/2'); // "calc(100px / 2)"
 const rgbColor = styimat.colorUtils.labToRGB(54.7, 77.9, 80.1);
 ```
 
@@ -254,18 +254,17 @@ $font-family: 'Inter', sans-serif;
 #root-selector :root
 #enable-nesting true
 #enable-math true
-#math-precision 8
 
 /* 然后写您的CSS代码 */
 $primary-color: lab#32a852;
-$spacing: math(16px * 2 + 4px);
+$spacing: math(16px*2+4px);
 
 body {
   color: $primary-color;
   padding: $spacing;
   
   .container {
-    margin: math($spacing / 2);
+    margin: math($spacing/2);
   }
 }
 ```
@@ -278,14 +277,14 @@ body {
 
 /* 然后写您的CSS代码 */
 $primary-color: lab#32a852;
-$spacing: math(16px * 2 + 4px);
+$spacing: math(16px*2+4px);
 
 body {
   color: $primary-color;
   padding: $spacing;
   
   .container {
-    margin: math($spacing / 2);
+    margin: math($spacing/2);
   }
 }
 ```
@@ -413,7 +412,7 @@ $padding-large: math(2rem * 1.5);
 const styimat = require('styimat');
 
 // 转换 CSS
-const css = styimat.convert(cssString, config);
+const cssPromise = styimat.convert(cssString, config);
 
 // 应用到页面
 styimat.apply(cssString, config);
@@ -426,7 +425,6 @@ styimat.config({
   convertLchToRGB: true,
   enableP3: true,
   enableMath: true,
-  mathPrecision: 6,
   indentSize: 4,
   enableNesting: true,
   importBaseUrl: '',        // 导入基础URL
@@ -438,8 +436,8 @@ styimat.config({
 });
 
 // 数学工具
-styimat.math.evaluate('100px / 2'); // "50px"
-styimat.math.evaluate('(16px * 1.5) + 4px'); // "28px"
+styimat.math.evaluate('100px/2'); // "calc(100px / 2)"
+styimat.math.evaluate('(16px*1.5)+4px'); // "calc((16px * 1.5) + 4px)"
 
 // 颜色工具
 const rgb = styimat.colorUtils.labToRGB(54.7, 77.9, 80.1);
@@ -456,8 +454,8 @@ styimat.imports.setCacheEnabled(false);  // 禁用导入缓存
 styimat.imports.setTimeout(10000);       // 设置导入超时时间
 
 // 设置插件
-styimat.plugins.compress = {
-    enable: true,
+styimat.plugins.use({
+    name: "compress",
     convert: function(css, config) {
         return css.replace(/[\n\b]/g, "");
     },
@@ -469,11 +467,7 @@ styimat.plugins.compress = {
     }
 };
 
-delete styimat.plugins.compress;        // 删除插件
-
-for(const name in styimat.plugins) {
-    console.log(name);
-}
+styimat.plugins.remove("compress");        // 删除插件
 ```
 
 ### 配置选项
@@ -491,7 +485,6 @@ for(const name in styimat.plugins) {
 | `convertLchToRGB` | boolean | `true` | 是否转换 LCH 颜色为 RGB |
 | `enableP3` | boolean | `true` | 是否启用 Display P3 广色域支持 |
 | `enableMath` | boolean | `true` | 是否启用 `math()` 函数增强 |
-| `mathPrecision` | number | `6` | 数学计算的精度 |
 | `importBaseUrl` | string | ` | 导入的基础URL |
 | `importCache` | boolean | `true` | 是否缓存导入的文件 |
 | `importTimeout` | number | `5000` | 导入超时时间（毫秒） |

package/dist/styimat.js

@@ -29,7 +29,6 @@ const styimat = (function() {
         convertLchToRGB: true,
         enableP3: true,
         enableMath: true,
-        mathPrecision: 6,
         importBaseUrl: '',
         importCache: true,
         importTimeout: 5000,
@@ -72,16 +71,13 @@ const styimat = (function() {
                     
                     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;
-                        }
+                    
+                    if (value === 'true' || value === 'false') {
+                        config[configKey] = value === 'true';
+                    } else if (!isNaN(value) && value.trim() !== '') {
+                        config[configKey] = Number(value);
                     } else {
-                        console.warn(`未知的配置项: ${key}`);
+                        config[configKey] = value;
                     }
                 } else {
                     console.warn(`无效的配置行: ${trimmed}`);
@@ -510,71 +506,23 @@ const styimat = (function() {
         
         try {
             let cleanExpr = expression.replace(/\s+/g, '');
-            const result = parseMathExpression(cleanExpr, config);
             
-            if (hasUnits(cleanExpr)) {
-                return processUnitExpression(cleanExpr, result);
-            } else {
-                return roundNumber(result, config.mathPrecision);
-            }
+            return parseMathExpression(cleanExpr, config.enableMath);
         } catch (error) {
             console.warn('math()表达式解析失败:', expression, error);
-            return `math(${expression})`;
+            return `calc(${expression})`;
         }
     }
 
     /**
      * 解析数学表达式
      */
-    function parseMathExpression(expr, config) {
-        while (expr.includes('(') && expr.includes(')')) {
-            const start = expr.lastIndexOf('(');
-            const end = expr.indexOf(')', start);
-            
-            if (end === -1) break;
-            
-            const inner = expr.substring(start + 1, end);
-            const innerResult = parseMathExpression(inner, config);
-            
-            expr = expr.substring(0, start) + innerResult + expr.substring(end + 1);
-        }
-        
-        return evaluateSimpleExpression(expr, config);
-    }
-
-    /**
-     * 评估简单表达式（无括号）
-     */
-    function evaluateSimpleExpression(expr, config) {
-        const operators = [
-            { regex: /([\d.]+(?:[a-zA-Z%]+)?)\*([\d.]+(?:[a-zA-Z%]+)?)/, handler: multiply },
-            { regex: /([\d.]+(?:[a-zA-Z%]+)?)\/([\d.]+(?:[a-zA-Z%]+)?)/, handler: divide },
-            { regex: /([\d.]+(?:[a-zA-Z%]+)?)\+([\d.]+(?:[a-zA-Z%]+)?)/, handler: add },
-            { regex: /([\d.]+(?:[a-zA-Z%]+)?)-([\d.]+(?:[a-zA-Z%]+)?)/, handler: subtract }
-        ];
-        
-        let lastExpr = expr;
-        
-        for (const op of operators) {
-            let match;
-            while ((match = expr.match(op.regex)) !== null) {
-                const left = parseValueWithUnit(match[1]);
-                const right = parseValueWithUnit(match[2]);
-                const result = op.handler(left, right);
-                
-                expr = expr.substring(0, match.index) + 
-                       result.value + 
-                       expr.substring(match.index + match[0].length);
-            }
-        }
-        
-        if (expr !== lastExpr) {
-            return evaluateSimpleExpression(expr, config);
-        }
-        
-        const parsed = parseValueWithUnit(expr);
-        return parsed.value;
+    function parseMathExpression(expr, enableMath) {
+        return `calc(${expr
+            .replace(/([\da-z])([+-])(-?[\da-z])/g, '$1 $2 $3')
+            .replace(/([\da-z])([+-])(-?[\da-z])/g, '$1 $2 $3')})`;
     }
+    
 
     /**
      * 解析带单位的数值
@@ -592,30 +540,6 @@ const styimat = (function() {
         return { value, unit };
     }
 
-    /**
-     * 检查表达式是否包含单位
-     */
-    function hasUnits(expr) {
-        return /[a-zA-Z%]/.test(expr);
-    }
-
-    /**
-     * 处理带单位的表达式
-     */
-    function processUnitExpression(originalExpr, result) {
-        const unitMatch = originalExpr.match(/([a-zA-Z%]+)(?!.*[a-zA-Z%])/);
-        
-        if (unitMatch) {
-            return result + unitMatch[1];
-        }
-        
-        if (originalExpr.includes('%')) {
-            return result + '%';
-        }
-        
-        return result + 'px';
-    }
-
     // 数学运算函数
     function multiply(a, b) {
         if (a.unit === b.unit || (!a.unit && !b.unit)) {
@@ -682,6 +606,7 @@ const styimat = (function() {
         
         const processMath = (str) => {
             return str.replace(mathRegex, (match, expression) => {
+                
                 return evaluateMathExpression(expression, config);
             });
         };
@@ -1456,86 +1381,68 @@ const styimat = (function() {
     /**
      * 主转换函数
      */
-    function convert(cssText, customConfig = {}) {
-        const syncConvert = (cssText, config) => {
-            const { config: headerConfig, css: cleanedCSS } = parseConfigHeader(cssText);
-            const finalConfig = { ...defaultConfig, ...customConfig,...headerConfig };
-            
-            let cssWithAliases = cleanedCSS;
-            let aliases = new Map();
-            if (finalConfig.enableAlias) {
-                const { aliases: parsedAliases, css: cssWithoutAliases } = parseAliasStatements(cssWithAliases);
-                aliases = parsedAliases;
-                cssWithAliases = cssWithoutAliases;
-            }
+    async function convert(cssText, customConfig = {}) {
+        let { config: headerConfig, css: cleanedCSS } = parseConfigHeader(cssText);
+        const finalConfig = { ...defaultConfig, ...customConfig, ...headerConfig };
+        cleanedCSS = await processImports(cleanedCSS, finalConfig);
+        
+        let cssWithAliases = cleanedCSS;
+        let aliases = new Map();
+        if (finalConfig.enableAlias) {
+            const { aliases: parsedAliases, css: cssWithoutAliases } = parseAliasStatements(cssWithAliases);
+            aliases = parsedAliases;
+            cssWithAliases = cssWithoutAliases;
+        }
             
-            let cssWithMacros = cssWithAliases;
-            let macros = new Map();
-            if (finalConfig.enableMacros) {
-                const { macros: parsedMacros, css: cssWithoutMacros } = parseMacroStatements(cssWithMacros, finalConfig);
-                macros = parsedMacros;
-                cssWithMacros = cssWithoutMacros;
+        let cssWithMacros = cssWithAliases;
+        let macros = new Map();
+        if (finalConfig.enableMacros) {
+            const { macros: parsedMacros, css: cssWithoutMacros } = parseMacroStatements(cssWithMacros, finalConfig);
+            macros = parsedMacros;
+            cssWithMacros = cssWithoutMacros;
                 
-                for (const [name, macro] of macros) {
-                    macroRegistry.set(name, macro);
-                }
-            }
-            
-            let cssAfterMacros = cssWithMacros;
-            if (finalConfig.enableMacros && macros.size > 0) {
-                cssAfterMacros = applyMacroCalls(cssAfterMacros, macros, finalConfig);
-            }
-            
-            const { globalVariables, selectorVariables, cssWithoutVars } = 
-                extractVariablesAndCSS(cssAfterMacros, finalConfig);
-            
-            let processedCSS = cssWithoutVars.trim();
-            if (finalConfig.enableNesting && cssWithoutVars.includes('{')) {
-                try {
-                    processedCSS = parseNestedRules(cssWithoutVars, finalConfig, aliases, macros);
-                } catch (error) {
-                    console.warn('嵌套解析失败，使用原始CSS:', error);
-                }
+            for (const [name, macro] of macros) {
+                macroRegistry.set(name, macro);
             }
+        }
+        
+        let cssAfterMacros = cssWithMacros;
+        if (finalConfig.enableMacros && macros.size > 0) {
+            cssAfterMacros = applyMacroCalls(cssAfterMacros, macros, finalConfig);
+        }
+        
+        const { globalVariables, selectorVariables, cssWithoutVars } = 
+            extractVariablesAndCSS(cssAfterMacros, finalConfig);
             
-            const rootRule = generateRootRule(globalVariables, finalConfig);
-            
-            let finalCSS = processedCSS;
-            if (selectorVariables.size > 0) {
-                finalCSS = injectSelectorVariables(processedCSS, selectorVariables, finalConfig);
-            }
-            
-            finalCSS = replaceVariableUses(finalCSS, globalVariables, selectorVariables, finalConfig);
-            
-            for (const [name, plugin] of pluginMap) {
-                try {
-                    if(plugin.enable) finalCSS = plugin.convert(finalCSS, finalConfig);
-                } catch (error) {
-                    console.error('插件处理失败:', error);
-                }
+        let processedCSS = cssWithoutVars.trim();
+        if (finalConfig.enableNesting && cssWithoutVars.includes('{')) {
+            try {
+                processedCSS = parseNestedRules(cssWithoutVars, finalConfig, aliases, macros);
+            } catch (error) {
+                console.warn('嵌套解析失败，使用原始CSS:', error);
             }
-            
-            let fullCSS = rootRule + finalCSS;
-            
-            return fullCSS;
-        };
+        }
         
-        const hasImports = cssText && /@import\s+([^;]+?)\s*;/g.test(cssText);
-        const finalConfig = { ...defaultConfig, ...customConfig };
+        const rootRule = generateRootRule(globalVariables, finalConfig);
         
-        if (!hasImports) {
-            return syncConvert(cssText, finalConfig);
-        } else {
-            return (async () => {
-                try {
-                    const processedWithImports = await processImports(cssText, finalConfig);
-                    return syncConvert(processedWithImports, finalConfig);
-                } catch (error) {
-                    console.error('@import处理失败:', error);
-                    return syncConvert(cssText, finalConfig);
-                }
-            })();
+        let finalCSS = processedCSS;
+        if (selectorVariables.size > 0) {
+            finalCSS = injectSelectorVariables(processedCSS, selectorVariables, finalConfig);
+        }
+        
+        finalCSS = replaceVariableUses(finalCSS, globalVariables, selectorVariables, finalConfig);
+            
+        let fullCSS = rootRule + finalCSS;
+        
+        for (const [name, plugin] of pluginMap) {
+            try {
+                fullCSS = plugin.convert(fullCSS, finalConfig);
+            } catch (error) {
+                console.error('插件处理失败:', error);
+            }
         }
+        
+        return fullCSS;
     }
 
     /**
@@ -1587,28 +1494,18 @@ const styimat = (function() {
         const config = { ...defaultConfig, ...customConfig };
         
         if (cssText) {
-            const hasImports = /@import\s+([^;]+?)\s*;/g.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;
-            }
+            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 {
             if (document.readyState === 'loading') {
                 document.addEventListener('DOMContentLoaded', () => {
@@ -1645,39 +1542,20 @@ const styimat = (function() {
             }
         },
         
-        plugins: new Proxy({},{
-            set(target, name, plugin) {
+        plugins: {
+            use(plugin) {
                 const createdFunc = plugin.created ?? (() => {});
                 createdFunc();
-                pluginMap.set(name, plugin);
+                pluginMap.set(plugin.name, plugin);
                 return true;
             },
-            get(target, name) {
-                return pluginMap.get(name);
-            },
-            deleteProperty(target, name) {
-                pluginMap.get(name)?.deleted();
+            remove(name) {
+                const deletedFunc = pluginMap.get(name).deleted ?? (() => {});
+                deletedFunc();
                 pluginMap.delete(name);
                 return true;
-            },
-            has(terget, name) {
-                return pluginMap.has(name);
-            },
-            ownKeys() {
-                return Array.from(pluginMap.keys());
-            },
-            getOwnPropertyDescriptor(target, prop) {
-                if (pluginMap.has(prop)) {
-                    return {
-                        enumerable: true,
-                        configurable: true,
-                        writable: true,
-                        value: pluginMap.get(prop)
-                    };
-                }
-                return undefined;
             }
-        }),
+        },
         
         aliases: {
             add: function(alias, property) {
@@ -1874,15 +1752,15 @@ const styimat = (function() {
     };
 
     // 创建主函数
-    const styimat = function(...args) {
+    const styimat = async function(...args) {
         if (args.length > 1 || (args[0] && args[0].raw)) {
-            return handleTemplateTag(...args);
+            return await handleTemplateTag(...args);
         }
 
         const firstArg = args[0];
 
         if (typeof firstArg === 'string') {
-            const result = convert(firstArg, { ...defaultConfig, ...args[1] });
+            const result = await convert(firstArg, { ...defaultConfig, ...args[1] });
             
             if (result && typeof result.then === 'function') {
                 return result;
@@ -1902,7 +1780,7 @@ const styimat = (function() {
         return styimat;
     };
 
-    function handleTemplateTag(strings, ...values) {
+    async function handleTemplateTag(strings, ...values) {
         let cssText = strings[0];
 
         for (let i = 0; i < values.length; i++) {
@@ -1920,7 +1798,7 @@ const styimat = (function() {
             cssText += result + strings[i + 1];
         }
 
-        const result = convert(cssText, defaultConfig);
+        const result = await convert(cssText, defaultConfig);
         
         if (result && typeof result.then === 'function') {
             return result;