styimat 4.2.1 → 5.0.0

package/dist/styimat.js

@@ -29,12 +29,11 @@ const styimat = (function() {
         convertLchToRGB: true,
         enableP3: true,
         enableMath: true,
-        mathPrecision: 6,
         importBaseUrl: '',
         importCache: true,
         importTimeout: 5000,
         enableAlias: true,
-        enableMacros: true,
+        enableMacros: true
     };
 
     // 全局P3支持检测结果
@@ -49,6 +48,8 @@ const styimat = (function() {
     // 宏定义存储
     const macroRegistry = new Map();
 
+    const pluginMap = new Map();
+
     /**
      * 解析配置头
      */
@@ -386,7 +387,7 @@ const styimat = (function() {
     /**
      * 解析一行CSS
      */
-    function parseSingleLineCSS(cssString, aliases=[]) {
+    function parseSingleLineCSS(cssString, aliases, macros) {
         let str = cssString.trim();
         
         if (str.endsWith(';')) {
@@ -459,6 +460,13 @@ const styimat = (function() {
                 property = aliases.get(property);
             }
             
+            if (property.startsWith("@") && macros.get(property.slice(1))) {
+                const macro = macros.get(property.slice(1));
+                const args = parseMacroArguments(value.split(" ").join(","), macro.params);
+                property = applyMacro(macro.body, args, config);
+                value = "";
+            }
+            
             result.push({ [property]: value });
         }
         
@@ -501,71 +509,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')})`;
     }
+    
 
     /**
      * 解析带单位的数值
@@ -583,30 +543,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)) {
@@ -673,6 +609,7 @@ const styimat = (function() {
         
         const processMath = (str) => {
             return str.replace(mathRegex, (match, expression) => {
+                
                 return evaluateMathExpression(expression, config);
             });
         };
@@ -1143,7 +1080,7 @@ const styimat = (function() {
     /**
      * 解析嵌套规则
      */
-    function parseNestedRules(cssText, config, aliases) {
+    function parseNestedRules(cssText, config, aliases, macros) {
         const lines = cssText.split('\n');
         const stack = [];
         const rootRules = [];
@@ -1188,11 +1125,12 @@ const styimat = (function() {
             if (!trimmed.includes('{') && !trimmed.includes('}') && trimmed.includes(':')) {
                 if (stack.length > 0) {
                     const currentRule = stack[stack.length - 1];
-                    const parsed = parseSingleLineCSS(trimmed, aliases);
+                    const parsed = parseSingleLineCSS(trimmed, aliases, macros);
                     parsed.forEach(obj => {
                         const key = Object.keys(obj)[0];
                         const value = processCSSValue(obj[key], config);
-                        currentRule.properties.push(`${key}: ${value}`);
+                        
+                        currentRule.properties.push(value === "" ? key : `${key}: ${value}`);
                     });
                 }
                 continue;
@@ -1210,13 +1148,13 @@ const styimat = (function() {
             }
         }
         
-        return convertRulesToCSS(rootRules, config, '', aliases);
+        return convertRulesToCSS(rootRules, config, '', aliases, macros);
     }
     
     /**
      * 将规则树转换为CSS字符串
      */
-    function convertRulesToCSS(rules, config, parentSelector = '', aliases=[]) {
+    function convertRulesToCSS(rules, config, parentSelector = '', aliases, macros) {
         let result = '';
         const isParentAt = parentSelector.startsWith("@");
         
@@ -1241,18 +1179,18 @@ const styimat = (function() {
             if (rule.properties.length > 0) {
                 result += (isAt ? "" : fullSelector) + ' {\n';
                 for (const prop of rule.properties) {
-                    const parsed = parseSingleLineCSS(prop, aliases);
+                    const parsed = parseSingleLineCSS(prop, aliases, macros);
                     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) : '') + " ".repeat(config.indentSize) + (value === "" ? key : `${key}: ${value};\n`);
                     });
                 }
                 result += isParentAt ? " ".repeat(config.indentSize) + '}\n' : '}\n\n';
             }
             
             if (rule.children && rule.children.length > 0) {
-                result += convertRulesToCSS(rule.children, config, fullSelector, aliases);
+                result += convertRulesToCSS(rule.children, config, fullSelector, aliases, macros);
             }
             
             if (isParentAt){
@@ -1327,13 +1265,6 @@ const styimat = (function() {
             }
             
             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;
             }
             
@@ -1453,76 +1384,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);
-                }
+            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 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);
-                } catch (error) {
-                    console.warn('嵌套解析失败，使用原始CSS:', error);
-                }
+        let processedCSS = cssWithoutVars.trim();
+        if (finalConfig.enableNesting && cssWithoutVars.includes('{')) {
+            try {
+                processedCSS = parseNestedRules(cssWithoutVars, finalConfig, aliases, macros);
+            } catch (error) {
+                console.warn('嵌套解析失败，使用原始CSS:', error);
             }
+        }
+        
+        const rootRule = generateRootRule(globalVariables, finalConfig);
+        
+        let finalCSS = processedCSS;
+        if (selectorVariables.size > 0) {
+            finalCSS = injectSelectorVariables(processedCSS, selectorVariables, finalConfig);
+        }
+        
+        finalCSS = replaceVariableUses(finalCSS, globalVariables, selectorVariables, finalConfig);
             
-            const rootRule = generateRootRule(globalVariables, finalConfig);
-            
-            let finalCSS = processedCSS;
-            if (selectorVariables.size > 0) {
-                finalCSS = injectSelectorVariables(processedCSS, selectorVariables, finalConfig);
+        for (const [name, plugin] of pluginMap) {
+            try {
+                if(plugin.enable) finalCSS = plugin.convert(finalCSS, finalConfig);
+            } catch (error) {
+                console.error('插件处理失败:', error);
             }
+        }
             
-            finalCSS = replaceVariableUses(finalCSS, globalVariables, selectorVariables, finalConfig);
-            
-            return rootRule + finalCSS;
-        };
-        
-        const hasImports = cssText && /@import\s+([^;]+?)\s*;/g.test(cssText);
-        const finalConfig = { ...defaultConfig, ...customConfig };
+        let fullCSS = rootRule + finalCSS;
         
-        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);
-                }
-            })();
-        }
+        return fullCSS;
     }
 
     /**
@@ -1574,28 +1497,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', () => {
@@ -1632,6 +1545,40 @@ const styimat = (function() {
             }
         },
         
+        plugins: new Proxy({},{
+            set(target, name, plugin) {
+                const createdFunc = plugin.created ?? (() => {});
+                createdFunc();
+                pluginMap.set(name, plugin);
+                return true;
+            },
+            get(target, name) {
+                return pluginMap.get(name);
+            },
+            deleteProperty(target, name) {
+                pluginMap.get(name)?.deleted();
+                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) {
                 aliasMap.set(alias, property);
@@ -1827,15 +1774,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;
@@ -1855,7 +1802,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++) {
@@ -1873,7 +1820,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;
@@ -1918,7 +1865,7 @@ const styimat = (function() {
 })();
 
 if (typeof define === 'function' && define.amd) {
-    define([], ()=>styimat);
+    define([], _=>styimat);
 } else if (typeof module === 'object' && module.exports) {
     module.exports = styimat;
 } else {